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.<\/p>\n
In Angular<\/a>, there are three ways of annotating code with service name –<\/p>\n This is most preferred way to annotate components in Angular. Lets take an example of registering a controller to module.<\/p>\n [java] myApp.controller("MyController", ["$scope", "MyService", function($scope, 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.<\/li>\n 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.<\/p>\n [java] var MyController = function($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 \u2018Inline Array Annotation\u2019 be careful to keep the array sync with the parameters in the function declaration.<\/li>\n 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.<\/p>\n [java] myApp.controller("MyController", function($scope, MyService) { In the above example \u201c$scope\u201d and \u201cMyService\u201d are treated as name of the services to inject to the \u201cMyController\u201d.<\/p>\n 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.<\/p>\n 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.<\/strong><\/li>\n<\/ol>\n Hope this helps !!!<\/p>\n Read Further on AngularJS Series<\/span><\/p>\n 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 Inline Array Annotation This […]<\/p>\n","protected":false},"author":103,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1439,3429],"tags":[3955,955,4697,1866,1865],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20803"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=20803"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20803\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=20803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=20803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=20803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
Inline Array Annotation<\/h3>\n
\nvar myApp = angular.module("myApp", []);<\/p>\n
\n\t$scope.myService = MyService;
\n}]);
\n[\/java]<\/p>\n$inject Property Annotation<\/h3>\n
\nvar myApp = angular.module("myApp", []);<\/p>\n
\n\t$scope.myService = MyService;
\n};
\nMyController.$inject = ["$scope", "MyService"];<\/p>\n
\n[\/java]<\/p>\nImplicit Annotation<\/h3>\n
\nvar myApp = angular.module("myApp", []);<\/p>\n
\n\t$scope.myService = MyService;
\n});
\n[\/java]<\/p>\n\n