1、Provider服务($provide)
$provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service)。服务会被叫做provider的东西来定义,你可以使用$provide来创建一个provider。你需要使用$provide中的provider方法来定义一个provider,同时你也可以通过要求改服务被注入到一个应用的config函数中来获得$provide服务。下面是一个例子:
html
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body ng-controller="MainController"> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'world'}}! <div ng-click="onClick()">feng</div> </body> <script src="AngularJS.js"></script> <script src="test.js"></script> </html>
test.js
var myapp=angular.module("myapp",[]) myapp.config(function($provide) { $provide.provider('greeting', function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); }); myapp.controller('MainController', function($scope, greeting) { $scope.onClick = function() { greeting('Ford Prefect'); }; });
2014年4月19日view:21613
理解AngularJS中的依赖注入
AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在。在本文中我们将会解释AngularJS依赖注入系统是如何运行的。
Provider服务($provide)
1、$provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service)。服务会被叫做provider的东西来定义,你可以使用$provide来创建一个provider。你需要使用$provide中的provider方法来定义一个provider,同时你也可以通过要求改服务被注入到一个应用的config函数中来获得$provide服务。下面是一个例子:
app.config(function($provide) {
$provide.provider('greeting', function() {
this.$get = function() {
return function(name) {
alert("Hello, " + name);
};
};
});
});
在上面的例子中我们为一个服务定义了一个叫做greeting的新provider;我么可以把一个叫做greeting的变量注入到任何可注入的函数中(例如控制器,在后面会讲到)然后Angular就会调用这个provider的$get函数来返回这个服务的一个实例($get方法必须有)。在上面的例子中,被注入的是一个函数,它接受一个叫做name的参数并且根据这个参数alert一条信息。我们可以像调用click事件使用它:
2、现在有趣的事情来了。factory,service以及value全部都是用来定义一个providr的简写,它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。例如,你可以用下面的代码定义一个和前面完全相同的provider:
myapp.config(function($provide) { $provide.factory('greeting', function() { return function(name) { alert("Hello, " + name); }; }); }); myapp.config(function($provide) { $provide.value('greeting', function(name) { alert("Hello, " + name); }); }); 以上两种方式的效果完全一样 – 只不过是代码的量不同而已
3、现在你可能已经注意到了我们使用的烦人的
app.config(function($provide){...})
4、由于定义一个新的provider是如此的常用,AngularJS在模块对象上直接暴露了provider方法,以此来减少代码的输入量:
var myMod = angular.module('myModule', []); myMod.provider("greeting", ...); myMod.factory("greeting", ...); myMod.value("greeting", ...);
具体代码
myapp.provider("greeting",function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); myapp.factory("greeting",function() { return function(name) { alert("Hello, " + name); }; }); myapp.value("greeting",function() { return function(name) { alert("Hello, " + name); }; }); 以上代码效果都是一样的
注入器($injector)
1、注入器负责从我们通过$provide创建的服务中创建注入的实例。只要你编写了一个带有可注入性的参数,你都能看到注入器是如何运行的。每一个AngularJS应用都有唯一一个$injector,当应用启动的时候它被创造出来,你可以通过将$injector注入到任何可注入函数中来得到它($injector知道如何注入它自己!)。
一旦你拥有了$injector,你可以动过调用get函数来获得任何一个已经被定义过的服务的实例。例如:
var greeting = $injector.get('greeting'); greeting('Ford Prefect');
具体应用
myapp.provider("greeting",function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); myapp.controller('MainController', function($scope,$injector) { $scope.onClick = function() { var greeting = $injector.get('greeting'); greeting('Ford Prefect'); }; }); 这里要注入$inject否则会报错
注入器同样也负责将服务注入到函数中;例如,你可以魔法般的将服务注入到任何函数中,只要你使用了注入器的invoke方法:
var myFunction = function(greeting) { greeting('Ford Prefect'); }; $injector.invoke(myFunction);
具体事项方法
myapp.provider("greeting",function() { this.$get = function() { return function(name) { alert("Hello, " + name); }; }; }); myapp.controller('MainController', function($scope,$injector) { var myFunction = function(greeting) { greeting('Ford Prefect'); }; $injector.invoke(myFunction); });
配置provider
1、你可能会感到困惑:既然factorry和value能够节省那么多的代码,为什么还有人要使用provider。答案是provider允许我们进行一些配置。在前面我们已经提到过当你通过provider(或者其他简写方法)创建一个服务时,你实际上创建了一个新的provider,它将定义你的服务如何被创建。我们没有提到的是,这些provider可以被注入到config函数中,你可以和它们进行一些交互。
首先,AngularJS分两个阶段运行你的应用 – config阶段和run阶段。config阶段是你设置任何的provider的阶段。它也是你设置任何的指令,控制器,过滤器以及其它东西的阶段。在run阶段,AngularJS会编译你的DOM并启动你的应用。
你可以在myMod.config和myMod.run中添加任何代码 – 这两个函数分别在两个阶段运行。正如我们看到的,这些函数都是可以被注入的 – 我们在第一个例子中注入了内建的$provide函数。然而,值得注意的是在config阶段,只有provider能被注入(只有两个例外是$provide和$injector)。
例如,下面的代码就是错误的写法:
myapp.provider('greeting', function() { var text = 'Hello, '; this.setText = function(value) { text = value; }; this.$get = function() { return function(name) { alert(text + name); }; }; }); myapp.config(function(greetingProvider) { greetingProvider.setText("Howdy there, "); }); myapp.run(function(greeting) { greeting('Ford Prefect'); });
现在我们在provider中拥有了一个叫做setText的函数,我们可以使用它来自定义我们alert的内容;我们可以再config中访问这个provider,调用setText方法并自定义我们的service。当我们最终运行我们的应用时,我们可以获取greeting服务,然后你会看到我们自定义的行为起作用了。