一、定义
如前所述,$scope对象被神秘的注入到了控制器中,实际上,这是因为控制器声明了它需要$scope,所以AngularJS才会创建并注入它。这套依赖管理系统可以这样总结:"为了正常工作,我需要一个依赖(协作对象):我不知道它从哪里来,也不知道它如何创建。我只知道我需要它,所以请为我提供它"。
AngularJS拥有内建的依赖注入(dependeny injection,DI)引擎,职责如下:
- 理解对象对其协作对象的需求。
- 找到所需的协作对象。
- 连接协作对象,以形成功能完备的应用。
二、注册服务
AngularJS只连接其认识的对象。因此,接入依赖注入机制的第一步,是将对象注册在模块(module)上。我们不直接注册对象的实例,而是将对象创建方案抛给依赖注入系统。然后AngularJS解释这些方案以初始化对象,并在之后连接他们,最后成为可运行的项目。
AngularJS的$provide服务可以注册不同的对象创建方案。之后$injector服务会解释这些方案,生成完备而可用的对象实例(已经解决好所有的依赖关系)。
$injector服务创建的对象成为服务(service)。在整个应用的生命中,每种方案AngularJS仅解释一次,也就是说,每个对象仅有一个实例。
http://www.yiibai.com/angularjs/angularjs_dependency_injection.html
五种对象创建方案:
2.1 值
定义一个名为defaultInput值,可以注入到控制器中
// 定义一个模块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); }});
2.2 服务
定义一个名为CalcService的服务,可以注入到控制器中
//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); }});
2.3 Factory
//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); }});...
2.4 常量
mainApp.constant("configParam", "constant value");
2.5 Provider
//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; }; });});