理解AngularJS中的依赖注入

AngularJS中的依赖注入非常的有用，它同时也是我们能够轻松对组件进行测试的关键所在。在本文中我们将会解释AngularJS依赖注入系统是如何运行的。

Provider服务（$provide）

$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函数来返回这个服务的一个实例。在上面的例子中，被注入的是一个函数，它接受一个叫做name的参数并且根据这个参数alert一条信息。我们可以像下面这样使用它：

app.controller('MainController', function($scope, greeting) {
  $scope.onClick = function() {
greeting('Ford Prefect');
  };
}); 

现在有趣的事情来了。factory，service以及value全部都是用来定义一个providr的简写，它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。例如，你可以用下面的代码定义一个和前面完全相同的provider：

app.config(function($provide) {
  $provide.factory('greeting', function() {
return function(name) {
  alert("Hello, " + name);
};
  });
});  

这非常的重要，所以一定要记住：在幕后，AngularJS实际上是在调用前面出现的代码（就是$provide.provider的版本）。从字面上来说，这两种方法基本上没有差别。value方法也一样 – 如果我们需要从$get函数（也就是我们的factory函数）返回的值永远相同的话，我们可以使用value方法来编写更少的代码。例如如果我们的greeting服务总是返回相同的函数，我们可以使用value来进行定义：

app.config(function($provide) {
  $provide.value('greeting', function(name) {
alert("Hello, " + name);
  });
});