14 Tips for Developing AngularJS Applications

14 tips for developing AngularJS applications

AngularJS is one of the most popular JavaScript frameworks for client-side development. An insight into some AngularJS concepts, such as $scopes, two-way data binding and directives, will bring us some important tips to keep in mind while developing AngularJS applications.

AngularJS provides MVC architecture for developing SPA (Single Page Application). Key features are two-way data binding, built-in dependency injection, templates written with HTML and facilities for unit testing of every component in the application.

AngularJS $scope objects

Scopes are objects associated to controllers and shared with views. They are the basis of the two-data binding magic of AngularJS. There is a hierarchical structure of $scope objects, with the $rootScope as root, using JavaScript prototypal inheritance for children.

You can easily build a big mess with the data you write into and read from scopes. Keep scopes under control:

1. Use “Controller as” syntax.
2. Store a model object in your scopes, instead of storing your data directly.
3. Ensure you always use a dot when accessing your data – “Controller as” syntax will help you with this.

Two-way data binding

Two-way data binding in AngularJS is a cool feature. Changes in model are propagated to be viewed automatically and changes in view are propagated to models automatically too.

AngularJS performs dirty-checking of values to fire change events, versus change listeners of other frameworks. That means checking if any variable in scopes have changed, in cycles called digest cycles.

In order to improve your application performance:

1. Avoid using complex AngularJS expressions. AngularJS expressions can be evaluated a huge number of times. Use one-time binding expressions when possible.
2. Use $watchCollection over $watch with a true third parameter to observe objects and arrays.
3. Avoid ng-repeat where possible.

AngularJS directives

AngularJS directives are great. They allow you to extend HTML. You can create reusable DOM elements that will be shared across your application. When working on an AngularJS application:

1. Do not manipulate or access DOM in controllers. Never do it. Use directives for DOM manipulation.
2. Directives can be used as element names, attributes, class names and comments. Restrict your directives to element names and attributes, it will make easier finding out matching between directives and DOM elements.

Besides that, you should take care of keeping up with latest releases of AngularJS. Handy features are introduced continuously. To make your upgrading easier:

1. Avoid obsolete directive formats. Use ng-xyz or data-ng-xyz formats, others are supported just for legacy reasons and could not be supported in future releases.
2. Replace $http deprecated functions, success and error, by then function.
3. Do not access scope properties starting by $$, the AngularJS naming convention states that they are private properties.

Last but not least, organize your code:

1. Pay attention to your folder layout.
2. Define just one AngularJS component per file.
3. Use a consistent naming convention.

Stay tuned, soon you will have a set of new specific rules for AngularJS applications available in Kiuwan Code Analysis  These rules will help you to follow best practices and enjoy building great AngularJS applications.