摘要：引言看了很多文章可能還是不太說(shuō)得出中的幾個(gè)創(chuàng)建供應(yīng)商的方法到底有啥區(qū)別，啥時(shí)候該用啥，之前一直傻傻分不清楚，現(xiàn)在來(lái)總結(jié)一下。

看了很多文章可能還是不太說(shuō)得出AngularJS中的幾個(gè)創(chuàng)建供應(yīng)商(provider)的方法(factory(),service(),provider())到底有啥區(qū)別，啥時(shí)候該用啥，之前一直傻傻分不清楚，現(xiàn)在來(lái)總結(jié)一下。

下文中泛指統(tǒng)一用中文，英文即為特指$provide方法中對(duì)應(yīng)方法創(chuàng)建出的東東

供應(yīng)商==>泛指provider
服務(wù)==>泛指service

provider==>provider()方法創(chuàng)建的東東
service==>service()方法創(chuàng)建的東東

$provide服務(wù)負(fù)責(zé)告訴Angular如何創(chuàng)造一個(gè)新的可注入的東西：即服務(wù)。服務(wù)會(huì)被叫做供應(yīng)商的東西來(lái)定義，你可以使用$provide來(lái)創(chuàng)建一個(gè)供應(yīng)商。你需要使用$provide中的provider()方法來(lái)定義一個(gè)供應(yīng)商，同時(shí)你也可以通過(guò)要求$provide被注入到一個(gè)應(yīng)用的config函數(shù)中來(lái)獲得$provide服務(wù)。

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

$provide是一個(gè)服務(wù)，在Auto模塊中

這個(gè)服務(wù)下面有好多方法，是用來(lái)定義供應(yīng)商

而供應(yīng)商是用來(lái)提供服務(wù)的，被注入來(lái)注入去的東西就是供應(yīng)商們提供的服務(wù)了

下面是一個(gè)例子：

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

這個(gè)例子可以說(shuō)是最終形態(tài)，先大概看下

AngularJS用$provide去定義一個(gè)供應(yīng)商,這個(gè)$provide有5個(gè)用來(lái)創(chuàng)建供應(yīng)商的方法：

constant

value

service

factory

provider

decorator 我沒(méi)有說(shuō)我也是，我只是路過(guò)o(╯□╰)o

定義常量用的，這貨定義的值當(dāng)然就不能被改變，它可以被注入到任何地方，但是不能被裝飾器(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");
});

語(yǔ)法糖：

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

這貨可以是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");
})

語(yǔ)法糖：

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

它是一個(gè)可注入的構(gòu)造器，在AngularJS中它是單例的，用它在Controller中通信或者共享數(shù)據(jù)都很合適

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");
});

語(yǔ)法糖：

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

在service里面可以不用返回東西，因?yàn)?b>AngularJS會(huì)調(diào)用new關(guān)鍵字來(lái)創(chuàng)建對(duì)象。但是返回一個(gè)自定義對(duì)象好像也不會(huì)出錯(cuò)。

它是一個(gè)可注入的function，它和service的區(qū)別就是：factory是普通function，而service是一個(gè)構(gòu)造器(constructor)，這樣Angular在調(diào)用service時(shí)會(huì)用new關(guān)鍵字，而調(diào)用factory時(shí)只是調(diào)用普通的function，所以factory可以返回任何東西，而service可以不返回(可查閱new關(guān)鍵字的作用)

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");
});

語(yǔ)法糖：

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

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

provider是他們的老大，上面的幾乎(除了constant)都是provider的封裝，provider必須有一個(gè)$get方法，當(dāng)然也可以說(shuō)provider是一個(gè)可配置的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，上面定義了一個(gè)供應(yīng)商叫movie，但是注入到config中不能直接寫(xiě)movie，因?yàn)榍拔闹v了注入的那個(gè)東西就是服務(wù)，是供應(yīng)商提供出來(lái)的，而config中又只能注入供應(yīng)商（兩個(gè)例外是$provide和$injector），所以用駝峰命名法寫(xiě)成movieProvider，Angular就會(huì)幫你注入它的供應(yīng)商。（更詳細(xì)可參考文末官方wiki翻譯版中的配置provider）

這個(gè)比較特殊，它不是provider,它是用來(lái)裝飾其他provider的，而前面也說(shuō)過(guò)，他不能裝飾Constant，因?yàn)閷?shí)際上Constant不是通過(guò)provider()方法創(chuàng)建的。

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");
});

所有的供應(yīng)商都只被實(shí)例化一次，也就說(shuō)他們都是單例的

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

value就是一個(gè)簡(jiǎn)單的可注入的值

service是一個(gè)可注入的構(gòu)造器

factory是一個(gè)可注入的方法

decorator可以修改或封裝其他的供應(yīng)商，當(dāng)然除了constant

provider是一個(gè)可配置的factory

最后來(lái)看一張對(duì)比圖：

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