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)
    {
    }]);

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)
    {
    }]);

• javascript
• angularjs
• dependency-injection

Share Improve this question Follow edited Aug 6, 2017 at 4:48 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked Aug 6, 2015 at 10:11 guagay_wkguagay_wk 28.1k6464 gold badges200200 silver badges309309 bronze badges 5

• 1 Cos if you don't have them inside the function you cannot use them and angular cannot know which dependencies you are talking about as it cannot get the parameters set for a function. They do both because they have too. – GillesC Commented Aug 6, 2015 at 10:12
• 1 you can able to use last option as well like this : angular.module('7minWorkout').controller('WorkoutController',function($scope, $interval, $location){}); – gaurav bhavsar Commented Aug 6, 2015 at 10:13
• 1 @gillesc : agree, you need to create object which you want to use as a function's parameter, because your code is inside your controller's function. – gaurav bhavsar Commented Aug 6, 2015 at 10:15
• possible duplicate of Dependency injection in Angular JS – Mathias F Commented Aug 6, 2015 at 10:17
• 1 So it would not work for production unless for some reason the JS wasn't served minified :) Still feel like the result is nearly the same, if anything it's dangerous that it work when not minified which might be what dev are working with when prod build script probably minify JS. Also make me want to dig in their code as I'm aware of arguments but not sure how they extract the name of each argument to pass in the correct dependency. – GillesC Commented Aug 6, 2015 at 10:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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.

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

AngularJS - Controllers, Dependencies, and Minification

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

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

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

}

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 (pared to just type out the parameters).

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

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
    });