Why don't you use explicit annotations when defining controllers in AngularJS?

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

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

An example of what I am saying:

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

      

against.

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

      

+3


source to share


5 answers


inline array annotation is just a workaround for Javascript limitations to keep Angular code short and not stop working. But this is not a great solution, because if you force duplicate your code. And we all know how bad duplicate code is. Angular document itself confirms that:

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

It's too easy to add a new dependency and forget to add the appropriate annotation. Or change the order of the arguments and forget to update the annotation list. Trust me. Been there, did it.



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

To be honest, I find it odd that the Angular documentation recommends not following this approach.

+6


source


Obviously you need the DI array annotation when doing JS minification.If you don't want to minify JS files, you can continue with the functions.

Submit this article for a good explanation of what you want.

If you don't want to include dependency injection array annotation, just you can use the ng-annotate library. (As you say, its a pretty good template thought you could avoid it ng-annotate

)



What converting your code to DI array annotation does when minifying js files

Only you need to add the attribute ng-strict-di

wherever you declare your directive ng-app

.

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

      

+4


source


Using direct arguments

when you pass an argument to a 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 examples, the place of $ scope and $ http is different, but they work without errors. This means that angular recognizes what $ scope and $ http are.

Now let's take a look at how you created a web application and are going to deploy it. Before deploying, your javascript minicode will reduce the size of your js file. During the minification process, each variable will be truncated, since $ scope can become a and angular cannot recognize "a".

Using an array method

This is the standard mechanism when you pass an array, the elements of the array are strings except for the last element, the last element of the array is your controller function. You need to specify the order of each argument in the array as a string, and you can pass that function to functions, you can specify variable names here as they are just an 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 whatever name say 'b', but it will not touch $ scope as it is a string and you don't need to worry as b is just an alias for $ scope.

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

0


source


I suppose one of the situations where it would be useful and really necessary to use annotations would be if you don't want anyone to minify your application code.

0


source


The only real reason is that it is faster when taunting the application .

This is from the beginning in Angular, when they had a few features that they used to "brag" how easy it was to make an Angular application. Another example is how Angular is used to find controllers declared globally on window

; they removed this feature in 1.3. This changelog best explains why.

It's a fun little trick and helps make it easier for new developers to enter the Angular world, but there is no good reason to use it in a production application.

0


source







All Articles