供應商（$provide）

$provide服務負責告訴Angular如何創造一個新的可註入的東西：即服務。服務會被叫做供應商的東西來定義，你可以使用$provide來創建一個供應商。你需要使用$provide中的provider()方法來定義一個供應商，同時你也可以通過要求$provide被註入到一個應用的config函數中來獲得$provide服務。

上面的描述是官方wiki的翻譯版，如果有些繞的話，看下這張圖：

• $provide是一個服務，在Auto模塊中

• 這個服務下面有好多方法，是用來定義供應商

• 而供應商是用來提供服務的，被註入來註入去的東西就是供應商們提供的服務了

下面是一個例子：

myMod.config(function($provide) {
  $provide.provider(‘greeting‘, function() {
    this.$get = function() {
      return function(name) {
        alert("Hello, " + name);
      };
    };
  });
});

這個例子可以說是最終形態，先大概看下

定義供應商的方法們

AngularJS用$provide去定義一個供應商,這個$provide

• constant

• value

• service

• factory

• provider

• decorator 我沒有說我也是，我只是路過o(╯□╰)o

Constant

定義常量用的，這貨定義的值當然就不能被改變，它可以被註入到任何地方，但是不能被裝飾器(decorator)裝飾

var app = angular.module(‘app‘, []);
 
app.config(function ($provide) {
  $provide.constant(‘movieTitle‘, ‘The Matrix‘);
});
 
app.controller(‘ctrl‘, function (movieTitle) {
  expect(movieTitle).toEqual(‘The Matrix‘);
});
 

語法糖：

app.constant(‘movieTitle‘, ‘The Matrix‘);

Value

這貨可以是string,number甚至function,它和constant的不同之處在於，它可以被修改，不能被註入到config中，但是它可以被decorator裝飾

var app = angular.module(‘app‘, []);
 
app.config(function ($provide) {
  $provide.value(‘movieTitle‘, ‘The Matrix‘)
});
 
app.controller(‘ctrl‘, function (movieTitle) {
  expect(movieTitle).toEqual(‘The Matrix‘);
})

語法糖：

app.value(‘movieTitle‘, ‘The Matrix‘);

Service

它是一個可註入的構造器，在AngularJS中它是單例的，用它在Controller中通信或者共享數據都很合適

var app = angular.module(‘app‘ ,[]);
 
app.config(function ($provide) {
  $provide.service(‘movie‘, function () {
    this.title = ‘The Matrix‘;
  });
});
 
app.controller(‘ctrl‘, function (movie) {
  expect(movie.title).toEqual(‘The Matrix‘);
});

語法糖：

app.service(‘movie‘, function () {
  this.title = ‘The Matrix‘;
});

在service裏面可以不用返回東西，因為AngularJS會調用new關鍵字來創建對象。但是返回一個自定義對象好像也不會出錯。

Factory

它是一個可註入的function，它和service的區別就是：factory是普通function，而service是一個構造器(constructor)，這樣Angular在調用service時會用new關鍵字，而調用factory時只是調用普通的function，所以factory可以返回任何東西，而service可以不返回(可查閱new關鍵字的作用)

var app = angular.module(‘app‘, []);
 
app.config(function ($provide) {
  $provide.factory(‘movie‘, function () {
    return {
      title: ‘The Matrix‘
    }
  });
});
 
app.controller(‘ctrl‘, function (movie) {
  expect(movie.title).toEqual(‘The Matrix‘);
});

語法糖：

app.factory(‘movie‘, function () {
  return {
    title: ‘The Matrix‘
  }
});

factory可以返回任何東西，它實際上是一個只有$get方法的provider

Provider

provider是他們的老大，上面的幾乎(除了constant)都是provider的封裝，provider必須有一個$get方法，當然也可以說provider是一個可配置的factory

var app = angular.module(‘app‘, []);
 
app.provider(‘movie‘, function () {
  var version;
  return {
    setVersion: function (value) {
      version = value;
    },
    $get: function () {
      return {
          title: ‘The Matrix‘ + ‘ ‘ + version
      }
    }
  }
});
 
app.config(function (movieProvider) {
  movieProvider.setVersion(‘Reloaded‘);
});
 
app.controller(‘ctrl‘, function (movie) {
  expect(movie.title).toEqual(‘The Matrix Reloaded‘);
});

註意這裏config方法註入的是movieProvider，上面定義了一個供應商叫movie，但是註入到config中不能直接寫movie，因為前文講了註入的那個東西就是服務，是供應商提供出來的，而config中又只能註入供應商（兩個例外是$provide和$injector），所以用駝峰命名法寫成movieProvider，Angular就會幫你註入它的供應商。（更詳細可參考文末官方wiki翻譯版中的配置provider）

Decorator

這個比較特殊，它不是provider,它是用來裝飾其他provider的，而前面也說過，他不能裝飾Constant，因為實際上Constant不是通過provider()方法創建的。

var app = angular.module(‘app‘, []);
 
app.value(‘movieTitle‘, ‘The Matrix‘);
 
app.config(function ($provide) {
  $provide.decorator(‘movieTitle‘, function ($delegate) {
    return $delegate + ‘ - starring Keanu Reeves‘;
  });
});
 
app.controller(‘myController‘, function (movieTitle) {
  expect(movieTitle).toEqual(‘The Matrix - starring Keanu Reeves‘);
});

總結

• 所有的供應商都只被實例化一次，也就說他們都是單例的

• 除了constant，所有的供應商都可以被裝飾器(decorator)裝飾

• value就是一個簡單的可註入的值

• service是一個可註入的構造器

• factory是一個可註入的方法

• decorator可以修改或封裝其他的供應商，當然除了constant

• provider是一個可配置的factory

最後來看一張對比圖：

參考文章

Differences Between Providers in AngularJS
官方wiki：Understanding Dependency Injection
官方wiki翻譯版：理解依賴註入
AngularJS中的Provider
傷不起的provider們

AngularJS中的Provider們：Service和Factory等的區別