使用Angular
開發項目已經有了不短的時間,在最近搭建一個項目的前端時遇到了問題。
隨著項目的增大,通過angular-ui
處理的路由配置的不斷增加,使得module.config的內容不斷膨脹,這時通常的做法是將所有的router配置抽出到一個文件中去統一配置,而module.config中只需做一個簡單的路由mapping,這樣既方便代碼的維護,又增加了代碼的易讀性。每當想建這樣一個跨scope
的單例數據源或者一個服務時同城就會很直接想到建一個factory
或service
去處理,于是我也建立了一個這樣的factory來作為單例數據源通過angular注入的方式注入到module.config中,然而問題出現了,頁面直接出現如下錯誤。
頁面錯誤
我再三仔細查看代碼,發現語法上沒有任何錯誤,最后從錯誤提示上的Unknown provider想起——在module.config中只能注入provider,而不能注入service或factory。
在重新查閱API文檔和一些其他資料之后,我對Angular $provide有了全新的認識,糾正了我一些原有的錯誤想法。
首先,所有Angular的服務都是單例,這里的服務不單單指我前面提到的provider
, service
和factory
,還包括另外3個以前我并不知道的constant, value和decorator。
然后再分別看看這6個方法的不同之處:
-
provider
:provider
是一個構造器用來返回一個服務實例。需要注意的是,provider
的參數可以是一個構造函數也可以是對象,如果是一個對象,那這個對象必須提供$get
屬性,當provider
被注入時調用$get
屬性返回所需要的實例;還有一點是,在使用provider
注入時,需在你定義的provider
名后添加Provider后綴,即module.provider('listen', function(){}),在注入時就需要使用xxService.$inject = ['listenProvider']; -
factory
:factory
就是通過provider
第二個參數為對象的方法實現,factory
底層通過調用$provide.provider(name, {$get: $getFn}),而$getFn就是自定義factory
的參數,即factory
所傳的方法需返回一個對象,這個對象會綁定到provider
的$get
屬性上。 -
service
:service
也是對provider
的一種封裝,service
的第二個參數是一個構造函數,當service被注入時,會通過provider
來返回一個服務實例。 -
value
&constant
:value
和constant
兩個方法的參數可以是任意的類型,當它被注入時返回一個包裹了這個值的服務。兩者的不同之處在于,constant
可以在module.config里被注入,而value
不能,與此同時,constant
的值是常量不能修改也無法被decorator
裝飾。 -
decorator
:即裝飾器,用于在service
創建時對service
進行重寫或修改。
顯然,使用constant
服務來建立這個配置信息來解決之前提到的問題是最恰當的。