Why do angularjs controller declaration have this syntax structure?

by

The array syntax will help you with minification/uglify of your js code.

angular.module('7minWorkout').controller('WorkoutController', 
  function ($scope, $interval, $location) {
    // code here
});

Will be minified and mangled as:

angular.module('7minWorkout').controller('WorkoutController', 
 function (a, b, c) {
    // code here
});

So Angular won’t be able to figure out which dependencies to inject

On the other hand, using the array declaration:

angular.module('7minWorkout').controller('WorkoutController', 
 ['$scope', '$interval', '$location', function ($scope, $interval, $location) {
    // code here
}]);

Will be minified as :

angular.module('7minWorkout').controller('WorkoutController', 
  ['$scope', '$interval', '$location', function (a, b, c) {
    // code here
}]);

So Angular will know what a, b and c represent.

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

WorkoutController.$inject = ['$scope', '$interval', '$location'];

or

angular.module('7minWorkout').controller('WorkoutController', /* @ngInject */
  function ($scope, $interval, $location) {
   // code here
});

which will create the $inject method mentioned above when the code is annotated.

So, there are mainly four kinds of annotation:

  1. Implicit Annotation – the first example code
  2. Inline Array Annotation – the second example code
  3. $inject Property Annotation – the $inject method
  4. $ngInject Comment Annotation – the @ngInject method

ng-annotate

Tools like ng-annotate let you use implicit dependency annotations in your app and automatically add inline array annotations prior to minifying. If you decide to take this approach, you probably want to use ng-strict-di.

For more information, see AngularJS Developer Guide – Using Strict Dependency Injection.

More Related Contents:

  1. Angularjs minify best practice
  2. Angularjs minification using grunt uglify resulting in js error
  3. I don’t understand the use of $inject in controllers
  4. Create token on textbox focusout
  5. How do you increment a cookie value?
  6. How to enable CORS in AngularJs
  7. AngularJS- Login and Authentication in each route and controller
  8. Click everywhere but here event
  9. Does it make sense to use Require.js with Angular.js? [closed]
  10. AngularJS $resource RESTful example
  11. Turn off URL manipulation in AngularJS
  12. How to read response headers in angularjs?
  13. angularJS display base64 image
  14. CSS: Change parent on focus of child
  15. Angular Js currency, symbol euro after
  16. ScrollTo function in AngularJS
  17. Angular $http is sending OPTIONS instead of PUT/POST
  18. How do I connect this interval service to a view?
  19. Produce a promise which depends on recursive promises
  20. Best way to wait for .forEach() to complete
  21. Hour difference between two times(HH:MM:SS a)in momentjs
  22. How can I use HTTPS in AngularJS?
  23. Add ng-click dynamically in directive link function
  24. how can we use $compile outside a directive in Angularjs
  25. Difference between $state.transitionTo() and $state.go() in Angular ui-router
  26. Run jQuery code after AngularJS completes rendering HTML
  27. AngularJS Load Data from Service
  28. How do I return data from a $http.get() inside a factory in angularjs
  29. Use underscore inside Angular controllers
  30. How to create an Array with AngularJS’s ng-model

Leave a Comment