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

時間 2019-12-11

標籤 angularjs provider service factory 區別欄目 AngularJS 简体版

原文原文鏈接

引言

看了不少文章可能仍是不太說得出AngularJS中的幾個建立供應商(provider)的方法(factory(),service(),provider())到底有啥區別，啥時候該用啥，以前一直傻傻分不清楚，如今來總結一下。javascript

下文中泛指統一用中文，英文即爲特指$provide方法中對應方法建立出的東東php

供應商==>泛指provider 服務==>泛指service  provider==>provider()方法建立的東東 service==>service()方法建立的東東

先說說供應商（$provide）

$provide服務負責告訴Angular如何創造一個新的可注入的東西：即服務。服務會被叫作供應商的東西來定義，你可使用$provide來建立一個供應商。你須要使用$provide中的provider()方法來定義一個供應商，同時你也能夠經過要求$provide被注入到一個應用的config函數中來得到$provide服務。html

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

$provide是一個服務，在Auto模塊中git
這個服務下面有好多方法，是用來定義供應商angularjs
而供應商是用來提供服務的，被注入來注入去的東西就是供應商們提供的服務了github

下面是一個例子：app

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

這個例子能夠說是最終形態，先大概看下ide

定義供應商的方法們

AngularJS用$provide去定義一個供應商,這個$provide有5個用來建立供應商的方法：函數

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