Difference between dependency injection syntaxes in AngularJS

Question

AngularJS supports two slightly different syntaxes for dependency injection

Syntax 1

myModule.controller('myCtrl', function($scope, $http, myService) {
    ...
    ...
});

Syntax 2

myModule.controller('myCtrl', ['$scope', '$http', 'myService', function($scope, $http, myService) {
    ...
    ...
}]);

Is there a fundamental difference between the two syntaxes?
When to use either of the two syntaxes?

this has been asked many times and is explained in the documentation — charlietfl
– charlietfl, Commented Oct 8, 2015 at 18:25
Syntax 2 is used for minification. Strings are not modified by minifiers so they are used for mapping the corresponding minified function parameters (injections) so they point back to the correct services. — buzzsaw
– buzzsaw, Commented Oct 8, 2015 at 18:29

taxicala · Accepted Answer · 2015-10-08 18:33:07Z

1

Syntax 2 is called type hinting, if you plan to uglify and mangle your code, angular would still know what services to inject.

After mangling and ugilying:

myModule.controller('myCtrl', ['$scope', '$http', 'myService', function(a, b, c) {

Angular would read the string values of the array provided in order to determine the name of the services a, b, c in order to inject them properly.

answered Oct 8, 2015 at 18:26

taxicala

21.8k7 gold badges40 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1