Reason for using array notation when defining AngularJS Controller

Question

Apologies if this question sounds too obvious.

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

• Off

Answer 1

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

Answer 2

I have a great and complex AngularJS project, so making manually the changes the all the codes would have been a big pain. But I solved using babel-plugin-angularjs-annotate.

Install the plugin:

$ npm install babel-plugin-angularjs-annotate --save-dev

and then add the plugin to the .babelrc file:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["angularjs-annotate"]
}

Answer 3

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.

Answer 4

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.