Reason for using array notation when defining AngularJS Controller

Apologies if this question sounds too obvious.

I've recently starting exploring and learning AngularJS. I've gone through some good tutorials -

• Official Docs
• w3cSchool
• Some cool site

.. and there are a few other that I've seen.

I'm not saying that I've read/studied all the documents.

Question starts here -

Now, coming to the question, I see that the definition of a Controller is different in one place and it's different in some other -

One definition uses a sort of array notation (not sure of the official term) for injection:

app.controller("MyCtrl", ['$scope', function($scope){
    $scope.someData = "Array notation";
}]);

And there's this, with no array:

app.controller("MyCtrl", function($scope){
    $scope.someData = "non-array notation";
});

Not saying this is the only thing that I'm trying to understand but yes, I'd definitely love to understand the difference.

Is there a major difference between the two?

Thanks a lot.

Note: I did search for similar questions in SO but couldn't find what I was looking for. Sorry.

Solution 1:

The difference is that when the second is minified, the parameter name will be minified and angular will no longer be able to inspect the arguments to figure out which dependencies to inject. The array syntax with the dependency in a string means that it is minification safe.

There is a library called ng-annotate which will change the second example into the first example so that the code is again minification safe.

Solution 2:

There is not much difference between the two approaches. Both code works same way. But if you use the second code then it will confuse you after you minify your code.

Look for an example:-

  app.controller("MyCtrl", function(a){ ... });//$scope is changed to a

And your code won't work as AngularJs code uses $scope variable as it doesn't take first, second, third, and so on parameters.

So, the first code is safer than second as if when you minify the code, it will still takes same variable i.e. $scope.

Look for an example:

app.controller("MyCtrl", ['$scope', function(a){...}]);//a refers to $scope

So, the above code works fine when you minify the code as $scope is injected in place of a.So, if you pass multiple parameters then ordering matters in this example.

Look at the following:

 app.controller("MyCtrl", ['$scope','$timeout' ,function(a,t){...}]);

where a is injected as $scope and t is injected as $timeout.

So if you change the orders of parameters passed as

app.controller("MyCtrl", ['$timeout','$scope', function(a,t){...}]); where a is $timeout and t is $scope.

So, ordering matters in this example but in your second example code ordering won't matter as name matters like $scope, $timeout.

There's also another way to inject variables if you use your first example code like below:

 MyCtrl.$inject = ['$scope'];

For multiple parameters,

 MyCtrl.$inject = ['$scope','$timeout'];

So, there are mainly three kinds of annotation:

1. Implicit Annotation - your first example code
2. $inject Property Annotation - the $inject method
3. Inline Array Annotation - your second example code

You can learn more about it here

Solution 3:

There is a difference when it comes to minification. If you were to minify your file, as you may do to increase performance this is when you may run into issues if you used option two.

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 the controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

So in essence you are better off using the first option, small bit more typing involved but it's safer and will not break if you minify your code :-)

This is quite a short tutorial but explains it nicely.