[AngularJS] Best Practise

Module definitions

---

 

Angular modules can be declared in various ways, either stored in a variable or using the getter syntax. Use the getter syntax at all times (angular recommended).

Bad:

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

Good:

angular
  .module('app', [])
  .controller()
  .factory();

From these modules we can pass in function references.

Module method functions

---

 

Angular modules have a lot of methods, such as controller, factory, directive, service and more. There are many syntaxes for these modules when it comes to dependency injection and formatting your code. Use a named function definition and pass it into the relevant module method, this aids in stack traces as functions aren't anonymous (this could be solved by naming the anonymous function but this method is far cleaner).

Bad:

var app = angular.module('app', []);
app.controller('MyCtrl', function () {
  
});

Good:

function MainCtrl () {
  
}
angular
  .module('app', [])
  .controller('MainCtrl', MainCtrl);

Define a module once using angular.module('app', []) setter, then use the angular.module('app')getter elsewhere (such as other files).

To avoid polluting the global namespace, wrap all your functions during compilation/concatenation inside an IIFE which will produce something like this:

Best:

(function () {
  angular.module('app', []);
  
  // MainCtrl.js
  function MainCtrl () {
  
  }
  
  angular
    .module('app')
    .controller('MainCtrl', MainCtrl);
    
  // AnotherCtrl.js
  function AnotherCtrl () {
  
  }
  
  angular
    .module('app')
    .controller('AnotherCtrl', AnotherCtrl);
    
  // and so on...
    
})();