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.  

 

var sharedServicesModule = angular.module('sharedServices',[]); sharedServices.service('NetworkService', function($http){});

var loginModule = angular.module('login',['sharedServices']);

loginModule.service('loginService', function(NetworkService){});

loginModule.controller('loginCtrl', function($scope, loginService){});

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

 

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.

Hire A Freelancer In Seconds

Looking to get some work done? Hire the world's best Designers, Developers, and Copywriters in just a few clicks.

Happymarli
Happymarli Hire Me

Professional Proofreader, Editor and Writer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2397+ projects completed on freelancer. 2)...

Hire Me

Next Article

Guide to Using NoFlo