Why do angularjs controller declaration have this syntax structure?

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

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

Why the repetition in the parameter names? Why not just like this

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

or

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

Solution 1:

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.

Solution 2:

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

AngularJS - Controllers, Dependencies, and Minification

Solution 3:

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) {

}

Solution 4:

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.