How to Spot Common Angular Mistakes

AngularJS is currently one of the more popular frameworks used by software developers. It was developed with the goal of making the process of development simple, and this makes it ideal for the prototyping of smaller apps. It also has the power to be scaled so it can be used to develop client side apps with more features. This scalability and feature-rich framework is the reason it has been so widely adapted, but with that comes mistakes that are repeated. Here are some of the most common ones you may encounter if you are not careful.

· Modules (or not having them)

Most developers will start off a small app by tying everything to a main module. It can become a problem when the app gets larger.

var app = angular.module('app',[]);

app.service('MyService', function(){

//service code

});

app.controller('MyCtrl', function($scope, MyService){

//controller code

});

After coding this, many developers will attempt to group objects that are similar.

var services = angular.module('services',[]);

services.service('MyService', function(){

//service code

});

var controllers = angular.module('controllers',['services']);

controllers.controller('MyCtrl', function($scope, MyService){

//controller code

});

var app = angular.module('app',['controllers', 'services']);

This method of coding works well – every bit as good as the directory structures demonstrated in part 1. It is not the best solution though. Scalability can be achieved by following the same concept of grouping features together.

When a developer is working on a large application, it is important to keep in mind that in many cases, not everything will fit on one page. It is much easier to have features that are contained within modules, as this makes them simpler to use across apps.

· Global Dependencies

When you are writing AngularJS apps, an object has a dependency that ties it to the global scope. This means that it may be referenced in any AngularJS code, but this can cause a problem in testing since it breaks the dependency injection model.

But AngularJS makes it easy to inject globals into individual modules. Underscore.js is one library that can make Javascript code simple and allow it to be used in a functional pattern. You may turn it into a module by using the following code:

var underscore = angular.module('underscore', []);

underscore.factory('_', function() {

return window._; //Underscore must already be loaded on the page

});

var app = angular.module('app', ['underscore']);

app.controller('MainCtrl', ['$scope', '_', function($scope, _) {

init = function() {

_.keys($scope); }

init();

}]);

This fulfills the requirements for an application to continue the AngularJS dependency injection model, and allows the underscore to be swapped out in testing. While this may seem like unnecessary work, if you're doing the right thing and use USE STRICT—and you should be—it is a requirement.

These are just two of the many common mistakes developers make using and scaling AngularJS, and by using these conventions, you should be able to avoid these common pitfalls.