Dependency Annotation in AngularJS

15 / Jun / 2015 by Dhanendra Kumar 2 comments

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.

    var myApp = angular.module("myApp", []);
    
    myApp.controller("MyController", ["$scope", "MyService", function($scope, MyService) {
    	$scope.myService = MyService;
    }]);
    

    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.

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

    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.

    var myApp = angular.module("myApp", []);
    
    myApp.controller("MyController", function($scope, MyService) {
    	$scope.myService = MyService;
    });
    

    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 !!!

FOUND THIS USEFUL? SHARE IT

comments (2)

  1. Tim G

    I think you should put a note under ‘Implicit Annotation’ saying that if as a developer you plan to minify your code that specified service names will get renamed and end up breaking your js app.

    Reply
    1. Dhanendra KumarDhanendra Kumar Post author

      Hi @Tim G
      Last line in ‘Implicit Annotation’ is the same as you mentioned above that it will not work with Javascript minifiers/obfuscators because they will rename the parameters.
      Thanks for the feedback.

      Reply

Leave a comment -