Dependency injection is a software design pattern given in a component that replaces the encoding of their dependencies within a hard component. This reduces a component from positioning dependencies, dependency configuration. This helps make components reusable, maintained and tested.
AngularJS provides a supreme dependency injection mechanism. It provides an injectable core component that depends on each other.
value
factory
Serve
Provider
Always
value
Values are simple JavaScript objects that are used to pass values during configuration phase controllers.
//define a modulevar mainApp = angular.module("mainApp", []);//create a value object as "defaultInput" and pass it a data.mainApp.value("defaultInput", 5);...//inject the value in the controller using its name "defaultInput"mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});factory
Factory is used to return the value of the function. It creates value according to demand, whenever a service or controller needs it. It usually uses a factory function to calculate and return the corresponding value
//define a modulevar mainApp = angular.module("mainApp", []);//create a factory "MathService" which provides a method multiply to return multiplication of two numbersmainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory;}); //inject the factory "MathService" in a service to utilize the multiply method of factory.mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});...Serve
A service is a single JavaScript that contains a set of function objects to perform certain tasks. The service uses the service() function and injects into the controller's definition.
//define a modulevar mainApp = angular.module("mainApp", []);...//create a service which defines a method square to return square of a number.mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});//inject the service "CalcService" into the controllermainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});Provider
The provider uses the service, factory, etc. during the configuration phase of the AngularJS internal creation process (as during the AngularJS boot itself). The scripts mentioned below can be used to create, we have created MathService in advance. The provider is a special factory method and get() method to return value/service/factory.
//define a modulevar mainApp = angular.module("mainApp", []);...//create a service using provider which defines a method square to return square of a number.mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; });});constant
Constants are used to consider the facts by configuring phase values, values cannot be passed during the configuration phase.
mainApp.constant("configParam", "constant value");
example
The following examples will show all the above instructions.
testAngularJS.html
<html><head> <title>AngularJS Dependency Injection</title></head><body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp" ng-controller="CalcController"> <p>Enter a number: <input type="number" ng-model="number" /> <button ng-click="square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); }); mainApp.value("defaultInput", 5); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }); mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script></body></html>result
Open textAngularJS.html in a web browser. The results are as follows.
The above is the collection of information for AngularJS dependency injection. We will continue to add relevant information in the future. Thank you for your support for this site!