Dependency Annotation in AngularJS

When a function of service or controller invoked via the injector then we have to annotate these functions so that the injector knows what service to inject into the function.

In Angular, there are three ways of annotating code with service name –

• Inline Array Annotation
• $inject Property Annotation
• Implicit Annotation

1. Inline Array Annotation

   This is most preferred way to annotate components in Angular. Lets take an example of registering a controller to module.

   [java]
   var myApp = angular.module("myApp", []);

   myApp.controller("MyController", ["$scope", "MyService", function($scope, MyService) {
   $scope.myService = MyService;
   }]);
   [/java]

   In the above example, we use an array whose elements are type of string and the last one is the function. In the array, those strings are names of the dependencies. be careful when use this method to keep the annotation array sync with the parameters in the function declaration.

2. $inject Property Annotation

   If your code allow to minifiers to rename the function parameters and still to inject the right services then you can use $inject property which is an array of dependency names to inject to the function.

   [java]
   var myApp = angular.module("myApp", []);

   var MyController = function($scope, MyService) {
   $scope.myService = MyService;
   };
   MyController.$inject = ["$scope", "MyService"];

   myApp.controller("MyController", MyController);
   [/java]

   In the above example, we use an array whose elements are type of string. In the array, those strings are names of the dependencies. same as ‘Inline Array Annotation’ be careful to keep the array sync with the parameters in the function declaration.

3. Implicit Annotation

   This way is the simplest one but if you are plan to minify your code then avoid it because your service names will get renamed and services are not available to the function. In this, function parameters are treated as names of services to inject into the function.

   [java]
   var myApp = angular.module("myApp", []);

   myApp.controller("MyController", function($scope, MyService) {
   $scope.myService = MyService;
   });
   [/java]

   In the above example “$scope” and “MyService” are treated as name of the services to inject to the “MyController”.

   No need to sync anything with the function parameters because here is no array of names so you can also rearrange dependencies in the function declaration.

   NOTE: This method will not work with Javascript minifiers/obfuscators (source or machine code that is difficult for humans to understand.) because they rename the parameters.

Hope this helps !!!

Read Further on AngularJS Series

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS