Angular Controllers - Annotations

Question

just saw 2 different demos and they differ some in the code. What is the reason for the two different approaches?

app.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
  //Code goes here
}]);

and

app.controller('AppCtrl', function($scope, $mdDialog){
  //Code goes here
});

As I understand it the first one is to recommend in case of I'm to use minification.. but is there other reasons to consider?

It expands upon the minification use case, but when you intend your code to be re-usable as a library / module, the annotated version (so the first) is considered the best practice. — Fasermaler, Mar 23 '15 at 16:05

score 2 · Accepted Answer · answered Mar 23 '15 at 16:04

The first syntax is minification-safe.

If you minify the second syntax, you will get for your controller :

function(a,b){...};

And you will then get errors.

Note that you can use build plugins like ng-annotate that will transform your code from the second syntax to the first, thus will make your code minification-safe. That's why it is more convenient to go with the second syntax.

score 2 · Answer 2 · edited May 23 '17 at 12:06

Both are ways to use Dependency injection, you can read angular's documentation on that matter.

Basically, on the options you just mentioned:

Option 1 - Inline Array Annotation - Here we pass an array whose elements consist of a list of strings (the names of the dependencies) followed by the function itself.
Option 2 - Implicit Annotation - you assume that the function parameter names are the names of the dependencies

Option 1 is safe to minify. See related post - Why implicit annotation are not safe to minify

Angular Controllers - Annotations

2 Answers2