Angular Dependency Injection – Explained
Dependency Injection in Angular is a can be defineddefines as the software design pattern that which defines the way the software components are dependent on each other. AngularJS provides a set of components that can be injected in the form of dependencies such as factory, value, constant, service, and provider.
- factory
- value
- constant
- service
- provider
Full Stack Web Development Course Video
1. factory
It is a function which returns value. It produces value on demand when a service or controller is needed
2. value
It is a javascript object It passes values to the controllerto controller .Moreover, it can’t be used in the config phase.
3. constant
Constants passpasses values at config phase considering the fact that value cannot be used to be passed during config phase. It’s ideal for application-wide constants like base URLs or configuration settings.
4. service
It is a singleton javascript object. It uses a constructor function and this keyword, which hashave a set of functions to execute certain tasks. It is defined by service() function.
5. provider
It is used to create factory, service etc. in the configin config phase.
e.g.
<html><br>
<head><br>
<title> Dependency Injection in AngularJS</title><br>
</head><br>
<body><br>
<h1>Example of Dependency Injection</h1><br>
<div ng-app = "intellipaatApp" ng-controller = "CalcController"><br>
<p>Enter a number: <input type = "number" ng-model = "number" /></p><br>
<button ng-click = "cube()">X<sup>3</sup></button><br>
<p>Result: {{result}}</p><br>
</div><br>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<script><br>
var intellipaatApp= angular.module("intellipaatApp", []);<br>
//create a service using provider which describes a method cube to return cube of a number.<br>
intellipaatApp.config(function($provide) {<br>
$provide.provider('MultiplyService', function() {<br>
this.$get = function() {<br>
var factory = {};<br>
factory.multiply = function(a, b, c) {<br>
return a * b * c;<br>
}<br>
return factory;<br>
};<br>
});<br>
});<br>
// make a value object as "defaultInput" and pass it a data<br>
intellipaatApp.value("defaultInput", 2);<br>
/*make a factory "MultiplyService" which gives a method multiply to return multiplication of three numbers */<br>
intellipaatApp.factory('MultiplyService', function() {<br>
var factory = {};<br>
factory.multiply = function(a, b, c) {<br>
return a * b * c;<br>
}<br>
return factory;<br>
});<br>
/* inject the factory "MultiplyService" in a service to use the multiply method of factory and make a service which defines a method cube to return cube of a number*/<br>
intellipaatApp.service('CalcService', function(MultiplyService){<br>
this.cube= function(a) {<br>
return MultiplyService.multiply(a,a,a);<br>
}<br>
});<br>
/* insert the value using its name "defaultInput" and<br>
insert the service "CalcService" into the controller */<br>
intellipaatApp.controller('CalcController', function($scope, CalcService, defaultInput) {<br>
$scope.number = defaultInput;<br>
$scope.result = CalcService.cube($scope.number);<br>
$scope.cube= function() {<br>
$scope.result = CalcService.cube($scope.number);<br>
}<br>
});<br>
</script><br>
</body><br>
</html><br>
Output
