Different way of dependency injection in Angular

Question

what's the difference of defining controller's dependencies in array:

app.controller('IndexController', ['$rootScope', '$http', function($rootScope, $http) {
    //some cool stuff
}]);

and injecting them right into the function like this:

app.controller('IndexController', function($rootScope, $http) {
    //some cool stuff
});

Lot of posts and tutorials use the shorter version, so I'm wondering if there's any advantage of doing it the first way.

Thanks!

The problem will be created during minification of code. Since the string are not mutated during minification, so the first one will work well after minification where as second one will create problem. — mia
– mia, Commented Jan 8, 2015 at 16:38

Michael · Accepted Answer · 2015-01-08 16:38:32Z

2

This is necessary if you use some minification tools such as uglify. These kind of tools change the name of the variables, thus, for example:

app.controller('IndexController', function($rootScope, $http) {
    //some cool stuff
});

Becomes something like:

randomVariable.controller('IndexController',function(a, b){});

And a and b are not your dependencies.

In the other case, the minified code becomes something like:

app.controller('IndexController',['$rootScope','$http',function(a,b)

Here a and b are passed as arguments from two strings that are values and hence they cannot be modified by the minification tools

answered Jan 8, 2015 at 16:38

Michael

3,3345 gold badges27 silver badges37 bronze badges

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

2 Comments

Thanks! So there's no need to use the longer way if you're not going to minify the script, right?

s. there is no need to use that approach unless you minify