Why do angularjs controller declaration have this syntax structure?

Question

I see the following angularjs controller syntax structure all the time.

angular.module(\'7minWorkout\').controller(\'WorkoutController\', 
[\'$scope\', \'$in         


        

Answer 1

or you can use following syntax, according to popular angular-styleguide https://github.com/johnpapa/angular-styleguide

angular.module('7minWorkout')
       .controller('WorkoutController', WorkoutController);
WorkoutController.$inject = ['$scope', '$interval', '$location'];

function WorkoutController($scope, $interval, $location) {

}

Answer 2

The first controller syntax makes it possible to minify/uglify the javascript code with the use of tools like ngmin. I'm not quite sure if the 2nd and 3rd options you have provided are viable options to create a controller, but in any case they will not be minified correctly since the tools will not now what the providers are. I would either suggest to use option 1 or option 3 (without the brackets) to create a controller. Note that option 3 will not be minified correctly by automated tools.

Some Useful information about creating controllers: AngularJS Developer Guide - Controllers

option3 without brackets

angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location)
    {
      //Your Code
    });

Answer 3

This "repetion" is to make it safe for minification:

AngularJS - Controllers, Dependencies, and Minification

Answer 4

The array syntax will help you with minification/uglify of your js code.

angular.module('7minWorkout').controller('WorkoutController', 
  function ($scope, $interval, $location) {
    // code here
});

Will be minified and mangled as:

angular.module('7minWorkout').controller('WorkoutController', 
 function (a, b, c) {
    // code here
});

So Angular won't be able to figure out which dependencies to inject

On the other hand, using the array declaration:

angular.module('7minWorkout').controller('WorkoutController', 
 ['$scope', '$interval', '$location', function ($scope, $interval, $location) {
    // code here
}]);

Will be minified as :

angular.module('7minWorkout').controller('WorkoutController', 
  ['$scope', '$interval', '$location', function (a, b, c) {
    // code here
}]);

So Angular will know what a, b and c represent.

---

There's also another way to inject variables if you use your first example code like below:

WorkoutController.$inject = ['$scope', '$interval', '$location'];

or

angular.module('7minWorkout').controller('WorkoutController', /* @ngInject */
  function ($scope, $interval, $location) {
   // code here
});

which will create the $inject method mentioned above when the code is annotated.

---

So, there are mainly four kinds of annotation:

1. Implicit Annotation - the first example code
2. Inline Array Annotation - the second example code
3. $inject Property Annotation - the $inject method
4. $ngInject Comment Annotation - the @ngInject method

---

ng-annotate

Tools like ng-annotate let you use implicit dependency annotations in your app and automatically add inline array annotations prior to minifying. If you decide to take this approach, you probably want to use ng-strict-di.

For more information, see AngularJS Developer Guide - Using Strict Dependency Injection.

Answer 5

You could write the first version since it just omits the parameters of the function which are also accesible via arguments inside the function. So you would avoid the repition but slicing the arguments property is also not really efficient (compared to just type out the parameters).

As the others answers stated the repition is to make it safe for minification.