I am new to AngularJS and learning about the two styles of writing controller functions. It seems as though the only reason someone would not use explicit annotations is to save time, which doesn't seem like a good reason. And being able to minify/obfuscate code seems like a requirement I would want to keep in any application.

Also note that I am not asking which is better or asking for a debate. I am asking for what reasons (or in what situation) it would be more beneficial to not use explicit annotations.

Example of what I'm talking about:

module('myApp').controller('MyController', function($scope) {});

vs.

module('myApp').controller('MyController', ['$scope', function($scope) {}]);

I am new to AngularJS and learning about the two styles of writing controller functions. It seems as though the only reason someone would not use explicit annotations is to save time, which doesn't seem like a good reason. And being able to minify/obfuscate code seems like a requirement I would want to keep in any application.

Also note that I am not asking which is better or asking for a debate. I am asking for what reasons (or in what situation) it would be more beneficial to not use explicit annotations.

Example of what I'm talking about:

module('myApp').controller('MyController', function($scope) {});

vs.

module('myApp').controller('MyController', ['$scope', function($scope) {}]);

• javascript
• angularjs
• dependency-injection
• angularjs-controller

• 1 as you said array annotation of DI would be require if you are doing minification.. – Pankaj Parkar Commented Apr 25, 2015 at 18:17
• It's an ugly and redundant idiom forced on us by language shortings. They freaked me out when I first saw them. I might choose not to use them as a protest. – Robert Moskal Commented Apr 25, 2015 at 18:18
• @pankajparkar Correct, which is why I'm asking why you would not use array annotation (called 'explicit annotation' in the Angular docs) – NicholasFolk Commented Apr 25, 2015 at 18:18
• @RobertMoskal I am learning this in one of the first Angular lessons that I'm using. Who would be developing an Angular application and be surprised be this? – NicholasFolk Commented Apr 25, 2015 at 18:21
• 1 Besides being (arguably) ugly, as Robert mentioned, it's also error-prone. It's very easy to add a new dependency and forget to add the corresponding annotation. The best solution, IMO, is not to use annotations at all and let some tool do that for you during your build process, as answered by pankajparkar. – Michael Benford Commented Apr 25, 2015 at 18:41

5 Answers 5

The inline array annotation is simply a workaround over Javascript limitations to allow Angular code to be minified and not to stop working. But it isn't a great solution because if forces you to duplicate your code. And we all know how bad duplicate code is. Angular documentation itself acknowledges that:

When using this type of annotation, take care to keep the annotation array in sync with the parameters in the function declaration.

It's way too easy to add a new dependency and forget to add the corresponding annotation. Or to reorder the arguments and forget to update the list of annotations. Trust me. Been there, done that.

Fortunately there are tools developed by smart people that take that burden off our shoulders by taking care of annotating the code automatically. Probably the most known is ng-annotate, as mentioned by @pankajparkar. All you have to do is plug it into your build process and your code will be correctly annotated.

To be honest, I find it really odd that Angular documentation remends against following this approach.

Obviously You need Array annotation of DI while doing JS minification, If you don't want minification of JS files then you can continue function pattern.

Refer this Article which has good explanation about what you want.

If you don't want to include array annotation of Dependency injection then simply you could use ng-annotate library. (As you are saying, its not bad pattern thought you can avoid it by ng-annotate)

Which does do convert your code to array annotation of DI while minifying js files

Only you need to add ng-strict-di attribute where ever you declared your ng-app directive.

<div ng-app="myApp" ng-strict-di>

I suppose the one situation where it would be useful and indeed necessary to use the annotations would be if you didn't want anyone to minify your application code.

Using direct arguments

when you pass argument to controller function, In this mechanism, you will pass arguments and angular will recognize

Ex.

module('myApp').controller('MyController', function($scope) {});

module('myApp').controller('MyController', function($scope,$http) {});

                               OR

module('myApp').controller('MyController', function($http,$scope) {});

In the second and third example, place of $scope and $http is different, but they work without error. This means angular recognizes which is $scope and which is $http.

Now consider you developed an web application and you are going to deploy it. Before deploy will minify your javascript code to reduce size of your js file. In minification process, each variable will get shorten as like $scope may bee a, and angular can not recognize 'a'.

Using array method

This is the standard mechanism, when you pass an array , the array elements are strings except last element, the last array element is your controller function. You must need to specify the order of each argument in array as string and you can pass that variable in function, here you can provide any variable names as they are just alias.

ex.

module('myApp').controller('MyController', ['$scope',function($scope) {}]);

module('myApp').controller('MyController', ['$scope','$http',function(myscope,newhttp) {}]);

Now in this mechanism, if you use any minifier to minify this js, it will minify and change myscope to any other name say 'b', but it will not touch $scope as it is a string, and you dont need to worry as b is just a alias for $scope.

This is remended, but if you are using grunt/gulp for minification, you can check these

• ng-di-annotate
• ng-annotate

The only real reason is that it's faster when mocking an application.

This is a leftover from early on in Angular, when they had a few features that they used for 'showing off' how easy it was to make an Angular app. Another example is how Angular used to look for controllers that were declared globally on window; they removed that 'feature' in 1.3. This changelog best explains why.

It's a fun little gimmick, and it helps ease new developers into the world of Angular, but there's no good reason to use it in a production app.