AngularJS boiler plate syntax

Question

One of the frustrations I face with AngularJS is the variety of styles that are used in examples. I have seen 4 different ways to declare and add AngularJS elements to a module (including different ways to declare the module). In another question I asked about using a global variable vs. directly declaring the module. Now I would like to know what are the advantages/disadvantages to using various styles to add elements to the module. (I will not include the examples that declare a global variable for the module, as that style has been discounted as a 'bad practice')

Assume the module is declared in file myMod.js as:

angular.module('myMod', [
        // Angular modules
        'ui.router'
        ,'ui.bootstrap'
        ,'ngResource'
        ,'ngStorage'

    ]);

Now I want to add a controller to the module, I have seen:

(assume each example represents the entire contents of a file named: myController.js)

option A:

angular.module('myMod')
        .controller.('thisController',['dependencyA','dependencyB',
        function(dependencyA, dependencyB){
....stuff to do
}]);

option B: just adding 'use strict'

'use strict';

 angular.module('myMod')
            .controller.('thisController',['dependencyA','dependencyB',
            function(dependencyA, dependencyB){
    ....stuff to do
    }]);

options C: wrapping the whole thing in an anonymous function as:

(function(){
'use strict';

angular.module('myMod')
            .controller.('thisController',['dependencyA','dependencyB',
            function(dependencyA, dependencyB){
    ....stuff to do
    }]);

option D: Declaring a named function rather than an anonymous function in the controller declaration as:

(function(){

'use strict'

angular
       .module('myMod')
       .controller('thisController',thisController);

thisController.$inject = ['dependencyA','dependencyB'];

function thisController(dependencyA,dependencyB){
...stuff to do
}

Similar diverse examples exist for adding factories, services, directives, etc. into a module. As best I can tell these are different styles for accomplishing the same goal. Which techniques represent 'best practices' and 'why'?

(I am not wanting this to turn into an 'opinion piece' please offer 'objective' reasons to select a style.)

score 2 · Answer 1 · answered Sep 22 '15 at 15:24

As for 'use strict', this has nothing to do with AngularjJS per se. It is a Javascript directive that enforces strict mode which prohibits the use of undeclared variables in Javascript. Immediately-Invoked Function Expression (IIFE) that wrap angular code prevent the leaking of variables into the global scope. As for declaring a named function, in my opinion this leads to much clearer code and is my preferred way.

score 1 · Answer 2 · answered Sep 22 '15 at 15:32

1

They all perform the same job, I personally use the named function approach. But you can combine them if you want.

angular
       .module('myMod')
       .controller('thisController',['dependencyA', thisController]);

thisController.$inject = ['dependencyB'];

function thisController(dependencyA,dependencyB){
...stuff to do
}

I use TypeScript so my controllers look something like this.

export class thisController
{
        static $inject = ['DependencyA'];
        constructor(private _dependencyA: DependencyA)
        {

        }
}
 angular.module('myMod').controller('thisController', thisController)

answered Sep 22 '15 at 15:32

Delta

869
6
12

I appreciate your thoughts, but I am really looking for a more objective analysis of 'best practices'... – Cos Callis Sep 22 '15 at 18:20
As far as I know they only best practice is to make sure your dependencies are in quotes. This is so your code will still function if minified. – Delta Sep 22 '15 at 18:39

AngularJS boiler plate syntax

2 Answers2