AngularJS relies on injection
Dependency injection is one of the key features of AngularJS, which simplifies the process of resolving dependencies between modules/components.
What is dependency injection
The explanation on the wiki is that 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 state.
This pattern separates the creation of the client's dependent behavior, which makes the program design loosely coupled and follows the principles of dependency inverse and single responsibility. I n direct contrast to service locator mode, it allows clients to understand how clients use the system to find dependencies
In a word--- You don't come to me, I'll find you if something happens.
AngularJS provides a good dependency injection mechanism. The following five core components are used as dependency injections:
- value
- factory
- service
- provider
- constant
value
Value is a simple javascript object that passes values (configuration stages) to the controller:
// 定义一个模块 var mainApp = angular.module("mainApp", []); // 创建 value 对象 "defaultInput" 并传递数据 mainApp.value("defaultInput", 5); ... // 将 "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 a function that returns a value. Created when service and controller are needed.
Usually we use the factory function to calculate or return values.
// 定义一个模块 var mainApp = angular.module("mainApp", []); // 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); // 在 service 中注入 factory "MathService" mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } }); ...
provider
AngularJS creates a service, factory, and so on (configuration phase) through provider.
There is a factory method get() in Provider that returns value/service/factory.
// 定义一个模块 var mainApp = angular.module("mainApp", []); ... // 使用 provider 创建 service 定义一个方法用于计算两数乘积 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 is used to pass values during the configuration phase, noting that this constant is not available during the configuration phase.
mainApp.constant("configParam", "constant value");
The following examples provide a demonstration of the above dependency injection mechanisms.
<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</title> </head> <body> <h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>输入一个数字: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>结果: {{result}}</p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" ></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>