AngularJS依赖注入Dependency Injection
时间:2021-11-29 作者:匿名
依赖注入是一个组件的软件设计给出他们的依赖关系,它缓解一个组件从定位依赖,使可配置的依赖关系,它还有助于使组件可重用,方便维护和测试。
AngularJS提供了最高的依赖注入机制,它提供了以下核心组件,可以注入彼此依赖。
1、Value
2、Factory
3、Service
4、Provider
5、Constant
Value
Value是一个简单的JavaScript对象,在配置阶段(配置阶段是AngularJS自身引导时)将值传递给控制器时需要它。
//定义一个模块 var mainApp = angular.module("mainApp", []); //创建一个值对象为“defaultInput”并将其传递给一个数据。 mainApp.value("defaultInput", 5); ... //mainApp注入控制器中的Value取名“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是一个用于返回值的函数。每当服务或控制器需要时,它就会按需创建价值。它通常使用工厂函数来计算和返回值。
//定义一个模块 var mainApp = angular.module("mainApp", []); //创建一个factory取名“MathService”,它提供了一个乘法方法来返回两个数字的乘法 mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //在服务中注入工厂“MathService”,以利用Factory的乘法方法。 mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); ...
Service
服务是一个单例JavaScript对象,包含一组用于执行特定任务的函数。使用Service()函数定义服务,然后将其注入控制器。
//定义一个模块 var mainApp = angular.module("mainApp", []); ... //创建一个服务,该服务定义一个方法square来返回数字的平方。 mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); //将服务“CalcService”注入控制器 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); } });
Provider
AngularJS在配置阶段内部使用提供者创建Service、Factory等。以下脚本可用于创建我们先前创建的MathService。Provider是一个特殊的Factory方法,带有get()方法,用于返回Value/Service/Factory。
//定义一个模块 var mainApp = angular.module("mainApp", []); ... //使用提供程序创建一个服务,该提供程序定义一个方法square来返回数字的平方。 mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); });
Constant
考虑到在配置阶段不能使用value,常量用于在配置阶段传递值。
mainApp.constant("configParam", "constant value");
Example
下面的示例显示了上述所有指令的使用
testAngularJS.htm
<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" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src = "https://www.yangzhiw.cn/static/js/angularjs-1.5.8/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>
输出
在浏览器中打开testAngularJS.htm后显示: