{"id":50723,"date":"2019-02-27T11:00:59","date_gmt":"2019-02-27T05:30:59","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=50723"},"modified":"2020-01-31T10:51:08","modified_gmt":"2020-01-31T05:21:08","slug":"angularjs-dependency-injection","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/","title":{"rendered":"AngularJS Dependency Injection Components &#8211; Annotation &amp; Introspection"},"content":{"rendered":"<p>Since, we studied about <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-api\/\"><strong>AngularJS API<\/strong><\/a>. Here, we will talk about AngularJS Dependency Injection. Moreover, we will learn components, annotations, introspection, and example of dependency injection in AngularJS.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50755\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg\" alt=\"Introduction to AngularJS Dependency Injection\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h2>What is AngularJS Dependency Injection?<\/h2>\n<p><em>AngularJS Dependency injection defines, how the various components of the software are dependent on each other<\/em>. Instead of hard-coding a component within another component, a component is given their own dependencies using dependency injection.<\/p>\n<p><strong>Why Dependency Injection?<\/strong><\/p>\n<ul>\n<li>AngularJS Dependency injections make an application modularize.<\/li>\n<li>AngularJS DI makes easier to reuse components of an application.<\/li>\n<li>It makes easier to test components of an application.<\/li>\n<li>It makes easier to configure components of an application.<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\">Do you know What is AngularJS Modules and how to create it?<\/a><\/strong><\/p>\n<h2>Components of Dependency Injection in Angular JS<\/h2>\n<p><em>In the form of dependencies, we can inject this set of AngularJS Dependency\u00a0Injection components<\/em>. AngularJS provides a supreme dependency mechanism.<\/p>\n<p>List of some <strong>core components which can be injected as a dependency<\/strong> in one another:<\/p>\n<ul>\n<li>Value<\/li>\n<li>Factory<\/li>\n<li>Service<\/li>\n<li>Provider<\/li>\n<li>Constant<\/li>\n<\/ul>\n<h3>1. Value<\/h3>\n<p>Value is an object. It can be a number, string or <strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-tutorial\/\">javascript<\/a><\/strong> object. It is used to pass the value to controller, service or factories in config or run phase.<\/p>\n<p>Syntax:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var\u00a0demo\u00a0=\u00a0angular.module(\"myModule\",\u00a0[]);\u00a0\u00a0\/\/define\u00a0a\u00a0module\u00a0\u00a0\r\ndemo.value(\"numberAsValue\",\u00a0101);\u00a0\u00a0\/\/create\u00a0a\u00a0value\u00a0object\u00a0and\u00a0pass\u00a0it\u00a0a\u00a0data.\u00a0\u00a0\u00a0\r\ndemo.value(\"stringAsValue\",\u00a0\"tutorial\");\u00a0\u00a0\r\ndemo.value(\"objectAsValue\",\u00a0{\u00a0val1\u00a0:\u00a0103,\u00a0val2\u00a0:\u00a0\"xyz\"}\u00a0);<\/pre>\n<p>value() function is used on module to define values. It consists of two parameters, the first parameter is the <em>name of the value<\/em> and the second parameter is <em>assigned value<\/em>. Now, these values can be referenced by their names in factories, services, and controllers.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;! DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n   &lt;meta charset=\"UTF-8\"&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.4\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body ng-app=\"myApp\"&gt;\r\n\r\n&lt;div ng-controller=\"myController\"&gt;\r\n  &lt;h3&gt; Tutorial Id is:&lt;\/h3&gt;\r\n  {{ID}}\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n\r\n   var sample = angular.module('myApp',[]);\r\n   sample.value(\"id\", 101);\r\n   sample.controller('myController', function($scope,id) {\r\n$scope.ID =id;\r\n});\r\n\r\n   &lt;\/script&gt;\r\n   &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><strong>Tutorial Id is:<\/strong><\/p>\n<p>101<\/p>\n<h3>2. Service<\/h3>\n<p>It is like a<em> singleton javascript object<\/em>. It consists of a set of functions to execute certain tasks. Service() function is used on a module to create services. After creation, it is injected into the controller.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;! DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n   &lt;meta charset=\"UTF-8\"&gt;\r\n   &lt;title&gt;Event Registration&lt;\/title&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.4\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n\r\n\r\n&lt;div ng-app = \"serviceApp\" ng-controller = \"serviceController\"&gt;\r\n   &lt;p&gt;Result: {{result}}&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n   var t = angular.module(\"serviceApp\", []);\r\n\r\nt.service('sum', function(){\r\n   this.addition = function(x,y) {\r\n     return x+y;\r\n    }\r\n });\r\n\r\nt.controller('serviceController', function($scope, sum) {\r\n     $scope.result = sum.addition(5,6);\r\n});\r\n    &lt;\/script&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><br \/>\nResult: 11<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-controller\/\">Let&#8217;s discuss AngularJS Controller with syntax and example\u00a0<\/a><\/strong><\/p>\n<p><em>Note &#8211;\u00a0Config phase is the phase in which angular JS bootstraps itself.<\/em><\/p>\n<h3>3. Constant<\/h3>\n<p>It is used to <em>pass value at config phase irrespective of the fact<\/em> that value cannot be passed during the config phase.<\/p>\n<h3>4. Provider<\/h3>\n<p>In the config phase, <em>factory and service are created by using a provider<\/em>.<\/p>\n<h3>5. Factory<\/h3>\n<p>A factory is a function that <em>returns value on demand<\/em>. It returns value on the basis of the requirement made by service and controller. It uses factory function to process the value and return the output.<\/p>\n<p>AngularJS Dependency Injection example-<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n  &lt;head&gt; \r\n     &lt;title&gt;AngularJS Dependency Injection&lt;\/title&gt; \r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n&lt;div ng-app = \"myApp\" ng-controller = \"myController\"&gt; \r\n  &lt;p&gt;Enter a number: &lt;input type = \"number\" ng-model = \"number\" \/&gt;&lt;\/p&gt; \r\n  &lt;button ng-click = \"square()\"&gt;Result&lt;\/button&gt; \r\n  &lt;p&gt;Result: {{result}}&lt;\/p&gt; \r\n&lt;\/div&gt; \r\n\r\n&lt;script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js\"&gt;&lt;\/script&gt; \r\n&lt;script&gt; \r\n  var demo = angular.module(\"myApp\", []); \r\n  demo.config(function($provide) { \r\n    $provide.provider('MathService', function() { \r\n      this.$get = function() { \r\n         var factory = {}; \r\n         factory.sum = function(a, b) { \r\n           return a + b; \r\n         }  \r\n         return factory; \r\n       }; \r\n     }); \r\n  }); \r\n  demo.value(\"defaultInput\", 10); \r\n  demo.factory('MathService', function() { \r\n    var factory = {}; \r\n    \r\n     factory.sum = function(a, b) { \r\n      return a + b; \r\n    } \r\n     return factory; \r\n  }); \r\n   demo.service('demoService', function(MathService){ \r\n   this.addition = function(a) { \r\n      return MathService.sum(a,a); \r\n    } \r\n  }); \r\n    demo.controller('myController', function($scope, \r\n demoService, defaultInput) { \r\n    $scope.number = defaultInput; \r\n    $scope.result = demoService.addition($scope.number); \r\n\r\n    $scope.addition = function() { \r\n    $scope.result = demoService.addition($scope.number); \r\n    } \r\n }); \r\n     &lt;\/script&gt; \r\n  &lt;\/body&gt; \r\n&lt;\/html&gt; &lt;!DOCTYPE html&gt;  \r\n&lt;html&gt;  \r\n   &lt;head&gt;  \r\n      &lt;title&gt;AngularJS Dependency Injection&lt;\/title&gt;  \r\n   &lt;\/head&gt;  \r\n   &lt;body&gt;  \r\n          \r\n      &lt;div ng-app = \"myApp\" ng-controller = \"myController\"&gt;  \r\n         &lt;p&gt;Enter a number: &lt;input type = \"number\" ng-model = \"number\" \/&gt;&lt;\/p&gt;  \r\n         &lt;button ng-click = \"square()\"&gt;Result&lt;\/button&gt;  \r\n         &lt;p&gt;Result: {{result}}&lt;\/p&gt;  \r\n      &lt;\/div&gt;  \r\n        \r\n      &lt;script src = \"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js\"&gt;&lt;\/script&gt;  \r\n        \r\n      &lt;script&gt;  \r\n         var demo = angular.module(\"myApp\", []);  \r\n           \r\n         demo.config(function($provide) {  \r\n            $provide.provider('MathService', function() {  \r\n               this.$get = function() {  \r\n                  var factory = {};  \r\n                    \r\n                  factory.sum = function(a, b) {  \r\n                     return a + b;  \r\n                  }  \r\n                  return factory;  \r\n               };  \r\n            });  \r\n         });  \r\n              \r\n         demo.value(\"defaultInput\", 10);  \r\n           \r\n         demo.factory('MathService', function() {  \r\n            var factory = {};  \r\n              \r\n            factory.sum = function(a, b) {  \r\n               return a + b;  \r\n            }  \r\n            return factory;  \r\n         });  \r\n           \r\n         demo.service('demoService', function(MathService){  \r\n            this.addition = function(a) {  \r\n               return MathService.sum(a,a);  \r\n            }  \r\n         });  \r\n           \r\n         demo.controller('myController', function($scope, demoService, defaultInput) {  \r\n            $scope.number = defaultInput;  \r\n            $scope.result = demoService.addition($scope.number);  \r\n  \r\n            $scope.addition = function() {  \r\n               $scope.result = demoService.addition($scope.number);  \r\n            }  \r\n         });  \r\n          &lt;\/script&gt;  \r\n      &lt;\/body&gt;  \r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Enter a Number:10<\/p>\n<p>Result<\/p>\n<p>Result: 20<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/\">Recommanded Reading &#8211; Directives for AngularJS HTML DOM<\/a><\/strong><\/p>\n<h2>AngularJS Dependency Annotation<\/h2>\n<p>Some functions like controller, service, and factories are invoked through the injector in AngularJS. Therefore, it is required to annotate these functions, so that injector will be well aware of which function is to be injected.<\/p>\n<p>Angular provides three ways of annotating code. It is provided with a service name.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50756\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations.jpg\" alt=\"Types of AngularJS Dependency Annotations\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-Dependency-Annotations-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h3>1. Inline Array Annotation<\/h3>\n<p>To annotate components in angular, inline array annotation is mostly used.<\/p>\n<p>An example that illustrates registering a controller to a module.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var demoApp = angular.module(\"myApp\", []);\r\ndemoApp.controller(\"MyController\", [\"$scope\", \"MyService\", function($scope, MyService) {\r\n\u00a0\u00a0\u00a0\u00a0 $scope.myService = MyService;\r\n}]);<\/pre>\n<p>In the above example, an array is used. The elements of an array are the name of dependencies and are of string type followed by a function.<\/p>\n<h3>2. $inject Property Annotation<\/h3>\n<p>It is an array of dependency names that are being injected in the function. You can use the $inject property only when, it is allowed to rename the function parameter in your code and still to inject the right services.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var demoApp = angular.module(\"myApp\", []);\r\nvar MyController = function($scope, MyService) {\r\n\u00a0\u00a0\u00a0\u00a0$scope.myService = MyService;\r\n};\r\nMyController.$inject = [\"$scope\", \"MyService\"];\r\ndemoApp.controller(\"MyController\", MyController);<\/pre>\n<p>Since it is an array of dependency names, therefore, synchronization is necessary between the array and the parameters in the function declaration.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-ng-view\/\">How to Impement View in AngularJS?<\/a><\/strong><\/p>\n<h3>3. Implicit Annotation<\/h3>\n<p>It is the easiest way. But if you are minifying code then you cannot use implicit annotation. Because the name of your service will get change as it will get rename then this service will not be available to that function. The parameters passed inside a function are treated as the name of services.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var demoApp = angular.module(\"myApp\", []);\r\n\u00a0\r\ndemoApp.controller(\"MyController\", function($scope, MyService) {\r\n\u00a0\u00a0\u00a0\u00a0$scope.myService = MyService;\r\n});<\/pre>\n<p>In the above code, $scope and MyService are the names of services, which pass as a parameter inside a\u00a0function(). Inside a controller, these services already injects. Here, we don&#8217;t require any synchronization of anything with the parameter pass inside the function because there is no array of names. Therefore, we can rearrange dependencies in the function declaration.<\/p>\n<h2>Strict Dependency Injection in AngularJS<\/h2>\n<p>We can opt for strict dependency injection in AngularJS by using ng-strict-di directive. It will apply on the same element as ng-app.\u00a0 When you use strict mode, it will throw an error. When we use service by an implicit annotation.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!doctype html&gt;\r\n&lt;html ng-app=\"demoApp\" ng-strict-di&gt;\r\n&lt;body&gt;\r\n  Result of 2+2 is: {{2+2}}\r\n  &lt;script src=\"angular.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Result of 2+2: 4<\/p>\n<p>In the below example we are using implicit dependency injection in a service name as willBreak. So when the service named as willBreak is instantiated, an error is thrown by angular JS because of its strict mode.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">angular.module('demoApp', [])\r\n.factory('willBreak', function($rootScope) {\r\n  \/\/ $rootScope is implicitly injected\r\n})\r\n.run(['willBreak', function(willBreak) {\r\n  \/\/ AngularJS will throw an error when this runs\r\n}]);<\/pre>\n<p>By providing strictDi: true in the optional config argument, we can use strict <a href=\"https:\/\/angular.io\/guide\/dependency-injection\"><strong>dependency injection<\/strong><\/a> in manual bootstrapping.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">angular.bootstrap(document, ['demoApp'], {\r\n  strictDi: true\r\n})<\/pre>\n<h2>Introspection<\/h2>\n<p>Generally when you declare a function with parameters, it is the responsibility of users to pass the parameter inside the function in appropriate order.<\/p>\n<p>For example : Suppose you are declaring a function details with two parameter id and name.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">Function details(id, name)\r\n{\r\n\/\/ body of function\r\n}<\/pre>\n<p>Then the function is called by passing values in it but in the same order as it is passed in function declaration. It means for the function details you have to first pass id then name while calling that function.<\/p>\n<p>Details (101,\u2019ram\u2019);<\/p>\n<p>Similarly in angular JS when you create components like controller, services you need to declare a function in it. This function contains the elements of angular JS.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">angular.module('DemoApp', [])\r\n  .controller('DemoController', ['$scope', '$log', function($scope, $log) {\r\n      $scope.name = \"ram\";\r\n      $log.debug('logging hey!!');\r\n}]);<\/pre>\n<p>Here the component controller receives two parameter <em>name of controller and array of elements<\/em>. \u2018DemoController\u2019 is the name of controller. $scope and $log are the two elements of an array follow by an anonymous function. Function contains the same elements of array passed inside it and also in the same order.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/\">Have a Look &#8211; ngmodel in AngularJS<\/a><\/strong><\/p>\n<h2>AngularJS Dependency Injection Example<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;meta name=\"viewport\"\r\ncontent=\"width=device-width, initial-scale=1, user-scalable=yes\"&gt;\r\n  &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.5\/angular.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script&gt;\r\n  angular.module('DiApp', [])\r\n  .controller('DiController', ['$scope', function($scope) {\r\n     $scope.name = \"ram\";\r\n     $scope.id = 101;\r\n}]);\r\n  &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=\"DiApp\" ng-controller=\"DiController\"&gt;\r\n\r\n&lt;h1&gt;Details&lt;\/h1&gt;\r\n{{id}}\r\n{{name}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Output:<\/p>\n<p>Details<\/p>\n<p>101 ram<\/p>\n<p>But in the above example there is a duplication. First you declare a string then you are passing the same string through function. Although we don\u2019t need to do this but if we don\u2019t do so at the time of minify our code may break.<\/p>\n<p>Many times we had seen angular code like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">angular.module('DemoApp', [])\r\n  .controller('DemoController', function($scope, $log) {\r\n      $scope.name = \"ram\";\r\n      $log.debug('logging hello');\r\n  });<\/pre>\n<p>In this code, there is no duplication. We can pass the same string through function, when there is no array of strings can pass.<\/p>\n<p>This is because of introspection, but the only problem is at the time of minifying of javascript code, the scripts parameter name will also get shorten.<\/p>\n<p>And at the time of function call, angular cannot be able to recognize which function to call. This problem does not arise in case of duplication.<\/p>\n<h2>Conclusion<\/h2>\n<p>AngularJS Dependency injection is the process of injecting dependent functionality at run time into modules. It helps in achieving reusability of code. Suppose you have a functionality that can use at multiple places in a single application so better to define a central service for it and then inject into different modules of an application as a dependency.<\/p>\n<p>Hope, you liked this AngularJS Dependency Injection. In our next tutorial, we will discuss <strong>events in AngularJS<\/strong>.<\/p>\n<p>We would love to hear you in the comment section!<span hidden class=\"__iawmlf-post-loop-links\" data-iawmlf-links=\"[{&quot;id&quot;:1636,&quot;href&quot;:&quot;https:\\\/\\\/angular.io\\\/guide\\\/dependency-injection&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20240518042359\\\/https:\\\/\\\/angular.io\\\/guide\\\/dependency-injection&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/v17.angular.io\\\/guide\\\/dependency-injection&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-01-29 08:36:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-04 08:55:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-09 03:59:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-20 10:29:22&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-06 05:52:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-14 09:10:05&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-22 13:03:06&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-07-04 01:53:03&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-07-10 06:47:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-07-16 01:55:17&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-07-16 01:55:17&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since, we studied about AngularJS API. Here, we will talk about AngularJS Dependency Injection. Moreover, we will learn components, annotations, introspection, and example of dependency injection in AngularJS. What is AngularJS Dependency Injection? AngularJS&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":50755,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[19039,19037,19040,3755,19036,19038],"class_list":["post-50723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-dependency-annotation","tag-angularjs-dependency-injection","tag-angularjs-di","tag-dependency-injection","tag-dependency-injection-in-angularjs","tag-strict-dependency-injection"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AngularJS Dependency Injection Components - Annotation &amp; Introspection - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn AngularJS Dependency Injection with its Components, Annotations, Strict Dependency Injection, Introspection with real-time examples\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Dependency Injection Components - Annotation &amp; Introspection - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn AngularJS Dependency Injection with its Components, Annotations, Strict Dependency Injection, Introspection with real-time examples\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-27T05:30:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:21:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Dependency Injection Components - Annotation &amp; Introspection - DataFlair","description":"Learn AngularJS Dependency Injection with its Components, Annotations, Strict Dependency Injection, Introspection with real-time examples","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Dependency Injection Components - Annotation &amp; Introspection - DataFlair","og_description":"Learn AngularJS Dependency Injection with its Components, Annotations, Strict Dependency Injection, Introspection with real-time examples","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-02-27T05:30:59+00:00","article_modified_time":"2020-01-31T05:21:08+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"AngularJS Dependency Injection Components &#8211; Annotation &amp; Introspection","datePublished":"2019-02-27T05:30:59+00:00","dateModified":"2020-01-31T05:21:08+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/"},"wordCount":1191,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg","keywords":["AngularJS Dependency Annotation","AngularJS dependency injection","AngularJS Di","Dependency Injection","dependency injection in AngularJS","Strict Dependency Injection"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/","name":"AngularJS Dependency Injection Components - Annotation &amp; Introspection - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg","datePublished":"2019-02-27T05:30:59+00:00","dateModified":"2020-01-31T05:21:08+00:00","description":"Learn AngularJS Dependency Injection with its Components, Annotations, Strict Dependency Injection, Introspection with real-time examples","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/02\/AngularJS-DI-Tutorial.jpg","width":1200,"height":628,"caption":"Introduction to AngularJS Dependency Injection"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-dependency-injection\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"AngularJS Dependency Injection Components &#8211; Annotation &amp; Introspection"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=50723"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50723\/revisions"}],"predecessor-version":[{"id":51543,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/50723\/revisions\/51543"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/50755"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=50723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=50723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=50723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}