摘要:引言看了很多文章可能還是不太說得出中的幾個創建供應商的方法到底有啥區別,啥時候該用啥,之前一直傻傻分不清楚,現在來總結一下。
引言
看了很多文章可能還是不太說得出AngularJS中的幾個創建供應商(provider)的方法(factory(),service(),provider())到底有啥區別,啥時候該用啥,之前一直傻傻分不清楚,現在來總結一下。
下文中泛指統一用中文,英文即為特指$provide方法中對應方法創建出的東東
供應商==>泛指provider 服務==>泛指service provider==>provider()方法創建的東東 service==>service()方法創建的東東先說說供應商($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有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
Providerprovider是他們的老大,上面的幾乎(除了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們
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85898.html
摘要:代碼代碼功夫瑜伽語法糖功夫瑜伽它是一個可注入的構造器在中它是單例的用它在中通信或者共享數據都合適功夫瑜伽語法糖功夫瑜伽注意在里面可以不用返回東西因為會調用關鍵字來創建對象。 AngularJS 的供應商($provide) $provide 服務負責告訴 AngularJS 如何創建一個新的可注入的東西: 即服務。 服務會被叫做供應商的東西來定義, 可以使用 $provide 來創建...
摘要:首先創建我們的構造函數這是一個典型的構造函數。所以,我們首先知道的就是無論我們是否能夠在代碼里面看見,構造函數是會返回一個對象的。 翻譯自 http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ 當你開始使用Angular的時候,你會發現,你總是會讓你的控制器和作用域充滿各種不必要的邏輯。你應該早點意識到一個...
摘要:同名模塊已經初始化的模塊保存在一個叫的緩存對象中,是模塊名,是模塊對象。調用注入器的方法執行模塊的所有方法。檢查該注入器中是否存在指定的服務。如果是數組,最后一個必須是的構造函數,前面的就是構造函數的參數名。 模塊 模塊是指寫Angular應用的代碼片段,這樣可以使代碼分離開來,因此代碼會更好維護,可讀和測試。還可以在module里定義代碼依賴關系,可以調用一個模塊,再在代碼中定義這個...
閱讀 1906·2021-11-22 14:44
閱讀 1672·2021-11-02 14:46
閱讀 3657·2021-10-13 09:40
閱讀 2600·2021-09-07 09:58
閱讀 1586·2021-09-03 10:28
閱讀 1658·2019-08-29 15:30
閱讀 976·2019-08-29 15:28
閱讀 1469·2019-08-26 12:20