I saw these two differents patterns to define controllers in AngularJS:
myApp.controller('myControllerName', function($scope) {
// ... my controller code ...
});
and
myApp.controller('myControllerName', ['$scope', function($scope) {
// ... my controller code ...
}]);
In dependency injection, parameters added respectively.
What is the difference between those two coding routines? I'd love for detailed answer, for both the JavaScript and AngularJS low-level aspects.
The second way is used to resolve minification issues.
Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.
We can overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified
Both examples will have the same effect. When using the first pattern Angular parses out the parameter names by converting the function to a string. When using the second pattern the names are explicitly provided as strings.
The second pattern is useful because it's good practice to minify production code. Any good minifier will rename parameter identifiers so the first example would end up something like this:
a.controller('myControllerName',function(a){});
In this situation Angular will no longer know which service to inject since it will parse the parameter names, get a and attempt to inject the a service (which may or may not exist but definitely isn't what you wanted).
The second example will minfiy to something like this:
a.controller('myControllerName',['$scope',function(a){}]);
This time Angular will provide the correct service. Inside the controller function a is a reference to the provided service and everything will work as expected.
Both will do the same thing, but the later is useful when we minify code.
Minifying code will shorten local variables and arguments names in functions. For example, your code snippets would be changed to the following after minification:
myApp.controller('myControllerName', function(a) {
});
and
myApp.controller('myControllerName', ['$scope', function(a) {
// ... my controller code ...
}]);
As angular inject services based on the argument name, it would not find the provider with the name 'a', so it fails.
