AngularJS Dependency Injection
What is dependency injection
The explanation on the wiki is: Dependency Injection (DI) is a software design pattern in which one or more dependencies (or services) are injected (or passed by reference) into a separate object (or client) and then become part of the client's state.
This pattern separates the creation of client dependency behaviors, which makes programming loosely coupled and follows the principles of dependency reversal and single responsibility. In direct contrast to the service locator pattern, it allows the client to understand how the client uses the system to find dependencies
In a word--If you have nothing to do, don’t come to me, I will go to you if you have something to do.
AngularJS provides a good dependency injection mechanism. The following 5 core components are used as dependency injection:
value
factory
service
Provider
constant
value
Value is a simple javascript object that passes values to the controller (configuration phase):
var mainApp = angular.module("mainApp", []);// Create the value object "defaultInput" and pass the data mainApp.value("defaultInput", 5);...// Inject "defaultInput" into the controller 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 a function that returns a value. Created when service and controller require.
Usually we use factory functions to calculate or return values.
// Define a module var mainApp = angular.module("mainApp", []);// Create factory "MathService" Used to multiply the product of two numbersmainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory;}); // Inject factory "MathService" in service mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});...Provider
In AngularJS, a service, factory, etc. are created through the provider (configuration stage).
A factory method get() is provided in the Provider, which is used to return value/service/factory.
// Define a module var mainApp = angular.module("mainApp", []);...// Create service using provider Define a method to calculate the product of two numbers mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; });});constant
constant (constant) is used to pass numeric values during the configuration phase. Note that this constant is not available during the configuration phase.
mainApp.constant("configParam", "constant value");
Example
The following examples provide a demonstration of several above dependency injection mechanisms.
<html> <head> <meta charset="utf-8"> <title>AngularJS Dependency Injection</title> </head> <body> <h2>AngularJS Simple Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>Running results:
The above is the sorting of data for injecting AngularJS dependencies. We will continue to add it later. I hope that it can help friends who develop AngularJS.