Why we Inject our dependencies two times in angula

Question

I'm new in angular, want to know why and when we should inject all our needed dependencies two times.

Example :

var analysisApp=angular.module('analysisApp',[]);

analysisApp.controller('analysisController',function($scope,$http,$cookies,$state,globalService){   

});

But we can also write the above code as :

var analysisApp=angular.module('analysisApp',[]);

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function($scope,$http,$cookies,$state,globalService){ 

}]);

Why ?

Answer 1

This is to make the app minsafe.

Careful: If you plan to minify your code, your dependency names will get renamed and break your app.

When you will(or may), minify all the files, the dependencies are replaced by the words like a, b, ... etc.

But, when you use array and string like syntax, as shown in the second snippet, the string are never minifies and can be used for mapping. So, the app knows that a is $scope(See below example).

Example:

// The minified version
var _ = angular.module('analysisApp', []);

_.controller('analysisController', ['$scope', '$http', '$cookies', '$state', 'globalService', function (a, b, c, d, e) {
    a.name = 'John Doe'; // Now a here is `$scope`.
}]);

See Angular Docs

Here is nice article for making your app minsafe with Grunt.

For minification best practices: Angularjs minify best practice

Answer 2

Dependency injection in Angular works by stringifying the function and detecting its arguments. This is quite fragile, especially when minifying your code, because these variable names will be mangled, and so your app will break. The workaround is to tell Angular the name of these injections with a string, which won't get mangled. In other words, if your code gets minified it would look like this:

analysisApp.controller('analysisController',
['$scope','$http','$cookies','$state','globalService', function(a,b,c,d,e) {

}]);

Under the covers, Angular will match $scope to a, $http to b, and so on.

Another possibility is to use ngannotate, which is a pre-processor tool to add to your build process. It will take the first code, and turn it into the second.

Answer 3

var analysisApp=angular.module('analysisApp',[]);

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function($scope,$http,$cookies,$state,globalService){ 

}]);

In this case when u minify your code the above code may become like

var analysisApp=angular.module('analysisApp',[]);

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function(a,b,c,d, e){ 

}]);

In this case a, b, c, d will holde the refrence of '$scope','$http','$cookies','$state','globalService' accordingly and the things will work as expected.

'$scope','$http','$cookies','$state','globalService' will not be changed because these are string as string is not changed in minification

analysisApp.controller('analysisController',function($scope,$http,$cookies,$state,globalService){   

});

But in this case after minification it may become like

analysisApp.controller('analysisController',function(a, b, c, d, e){   

});

Now all angular objects like $scope and other have lost their meaning And things will not work.