Angular $provide

使用Angular開發項目已經有了不短的時間,在最近搭建一個項目的前端時遇到了問題

隨著項目的增大,通過angular-ui處理的路由配置的不斷增加,使得module.config的內容不斷膨脹,這時通常的做法是將所有的router配置抽出到一個文件中去統一配置,而module.config中只需做一個簡單的路由mapping,這樣既方便代碼的維護,又增加了代碼的易讀性。每當想建這樣一個跨scope的單例數據源或者一個服務時同城就會很直接想到建一個factoryservice去處理,于是我也建立了一個這樣的factory來作為單例數據源通過angular注入的方式注入到module.config中,然而問題出現了,頁面直接出現如下錯誤。

頁面錯誤

我再三仔細查看代碼,發現語法上沒有任何錯誤,最后從錯誤提示上的Unknown provider想起——在module.config中只能注入provider,而不能注入service或factory

在重新查閱API文檔和一些其他資料之后,我對Angular $provide有了全新的認識,糾正了我一些原有的錯誤想法。
首先,所有Angular的服務都是單例,這里的服務不單單指我前面提到的provider, servicefactory,還包括另外3個以前我并不知道的constant, value和decorator。
然后再分別看看這6個方法的不同之處:

  1. providerprovider是一個構造器用來返回一個服務實例。需要注意的是,provider的參數可以是一個構造函數也可以是對象,如果是一個對象,那這個對象必須提供$get屬性,當provider被注入時調用$get屬性返回所需要的實例;還有一點是,在使用provider注入時,需在你定義的provider名后添加Provider后綴,即module.provider('listen', function(){}),在注入時就需要使用xxService.$inject = ['listenProvider'];
  2. factory: factory就是通過provider第二個參數為對象的方法實現,factory底層通過調用$provide.provider(name, {$get: $getFn}),而$getFn就是自定義factory的參數,即factory所傳的方法需返回一個對象,這個對象會綁定到provider$get屬性上。
  3. service: service也是對provider的一種封裝,service的第二個參數是一個構造函數,當service被注入時,會通過provider來返回一個服務實例。
  4. value & constantvalueconstant兩個方法的參數可以是任意的類型,當它被注入時返回一個包裹了這個值的服務。兩者的不同之處在于,constant可以在module.config里被注入,而value不能,與此同時,constant的值是常量不能修改也無法被decorator裝飾
  5. decorator:即裝飾器,用于在service創建時對service進行重寫或修改。

顯然,使用constant服務來建立這個配置信息來解決之前提到的問題是最恰當的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、angularjs的幾大特性是什么? 雙向數據綁定、依賴注入、模板、指令、MVC/MVVM 2、列舉幾種常見的...
    2e9a10d418ab閱讀 1,398評論 0 10
  • 1、angularjs的幾大特性是什么? 雙向數據綁定、依賴注入、模板、指令、MVC/MVVM 2、列舉幾種常見的...
    秀才JaneBook閱讀 1,558評論 0 22
  • 一.constant服務: app.constant("name",obj) name為服務的名字,obj為一個j...
    A你叫阿鈞閱讀 442評論 0 1
  • Angular面試題 一、ng-show/ng-hide與ng-if的區別? 第一點區別是,ng-if在后面表達式...
    w_zhuan閱讀 5,590評論 0 26
  • 最近和一女性朋友聊天,她心情很不好,和先森冷戰,還很嚴重,男方離家出走了。 沒有緊張的婆媳關系,也沒有狗血的小三上...
    紅拂叨叨閱讀 755評論 0 1