- Each component and template should not exceed 400 lines.
- Make functions smaller. The maximum lines on a function should not exceed 10-15 lines (derived from Uncle Bob’s clean code)
- Use consistent name for all assets. Make classes upper camel case. Class name should be noun and method names should be verb.
- Append symbol name with conventional suffix. (for example, the login component can be named as LoginComponent with Component suffixed).
- File name should have conventional suffix. For example, a component can have its name suffixed with component.
- Use lower camel case for naming selectors and components.
- Separate words with hyphens in selectors
- The best way to store bootstraping and platform information is main.ts.
- Configure your components to use logger. Use proper error handling.
- Unit testing is mandatory and the test spec file should have the same name as the component name.
- Do not use capital letters for constants. Use lower camel case instead.
- Do not use data type names while naming properties. ‘strusrename’ is wrong and ‘username’ is correct.
- Stop prefixing interfaces with ‘I’. It is a typescript best practice as some predefined interfaces use I during compilation.
- Use classes instead of interfaces. In ES5 and above only classes exist and even though we write interfaces, it will be converted into classes.
- Import line spacing. Leave an empty line between angular imports and custom imports
- Follow the LIFT principle (Locate your code quickly, Identify the code easily, Flattest structure, Try DRY. )
- Use lazy loading on subcomponents and where ever possible.
- Try Using ng-bind Rather Than {{}}
- Now the question arises why we should noy try using double curly braces ({{}})? The answer is simple, double curly braces is much slower compared to the ng-bind, which is a directive and will place a watcher on the passed variable. Henceforth, it will only be applied when the passed value is actually changed whereas brackets, on the other hand are dirty-checked and are refreshed in every “Digest Cycle”, even if it is not necessary.
- Design A Proper Folder Structure Which Can Help You Code In A Modular Approach
- We spend a lot of time writing codes. In the early phases of a project, the directory structure doesn’t matter too much and many people tend to ignore this angular js best practices. In short term this allows the developer to code rapidly, but in long-term, it creates a mess.
- Maintain Constant To Store All The App Constants
- We maintain constant for those variables whose value are same throughout the Angular JS app. One main advantage of this is, let suppose the value of that variable is changed then we don’t need to change the value of that variable for each and every part where we access that variable. Just change the value of that variable where it is declared then it will be affected everywhere in the app.
- Use Directive For DOM Handling
-
Directive is one of the important and useful concept of Angular Js. For DOM manipulation, directive is always first and best choice. This question always appears that when should we use Directives and the answer is, where a particular functionality or a reusable view component is needed. You’ll just declare your directive for that particular view and you can access this directive in any part of your app.
-
Suppose, we need a modal for different pages of our project but the functionality is same everywhere. So rather than declaring it everywhere, it is better to make the directive for that modal and invoke that directive,wherever you want.
-
- Use Controller To Manipulate View-data
- Controller is one of the powerful concepts of Angular Js. Controller basically manipulates the data part of any view. We can set the data of any view in many different ways, but it is always best practice to set the data into the view through it’s controller
- Custom Directive
- In the simplest terms, a directive in AngularJS is a reusable component. But before using it, Always keep in mind that we must create a directive when a piece of code is used more than once. Don’t make directive for those which are already provided by Angular JS and it is unnecessary to make a directive which is used only once. *First, we define the Angular JS app and controller. Note that the list of movies is defined in the controller.
- Minify Code Before Production
- If you do decide to opt-in and build your AngularJS apps in a modularized fashion, be sure to concatenate and minify your code before using it in production. There are many great module bundler tools like Gulp, Webpack or Grunt that will help with this – so don’t be afraid to split code as much as you need.
- Provides an easy-to-use event-like abstraction layer where Observable emissions are synonymous with events
- Helps develop asynchronous, user-interactive applications efficiently
- Enables a simple communication mechanism across different parts of the application without introducing explicit dependencies between components