天天看點

走進AngularJs(六) 服務

天學習了一下ng的service機制,作為ng的基本知識之一,有必要做一個了解,在此做個筆記記錄一下。

  服務這個概念其實并不陌生,在其他語言中如java便有這樣的概念,其作用就是對外提供某個特定的功能,如消息服務,檔案壓縮服務等,是一個獨立的子產品。ng的服務是這樣定義的:

Angular services are singletons objects or functions that carry out specific tasks common to web apps.

  它是一個單例對象或函數,對外提供特定的功能。

首先是一個單例,即無論這個服務被注入到任何地方,對象始終隻有一個執行個體。

其次這與我們自己定義一個function然後在其他地方調用不同,因為服務被定義在一個子產品中,是以其使用範圍是可以被我們管理的。ng的避免全局變量污染意識非常強。

  我們在controller中直接聲明$location服務,這依靠ng的依賴注入機制。$location提供位址欄相關的服務,我們在此隻是簡單的擷取目前的位址。

  服務的使用是如此簡單,我們可以把服務注入到controller、指令或者是其他服務中。

  如同指令一樣,系統内置的服務以$開頭,我們也可以自己定義一個服務。定義服務的方式有如下幾種:

使用系統内置的$provide服務

使用Module的factory方法

使用Module的service方法

  下面通過一個小例子來分别試驗一下。我們定義一個名為remoteData服務,它可以從遠端擷取資料,這也是我們在程式中經常使用的功能。不過我這裡沒有遠端伺服器,就寫死一點資料模拟一下。

走進AngularJs(六) 服務
走進AngularJs(六) 服務
走進AngularJs(六) 服務
走進AngularJs(六) 服務
走進AngularJs(六) 服務
走進AngularJs(六) 服務

  Module的factory和$provide的factory方法是一模一樣的,從官網文檔看它們其實就是一回事。至于Module内部是如何調用的,我此處并不打算深究,我隻要知道怎麼用就好了。

  再看Module的service方法,它沒有return任何東西,是因為service方法本身傳回一個構造器,系統會自動使用new關鍵字來建立出一個對象。是以我們看到在構造器函數内可以使用this,這樣調用該服務的地友善可以直接通過remoteData.name來通路資料了。

  下面我們來用一下自己定義好的服務:

  服務與服務中間可以有依賴關系,例如我們這裡定義一個名為validate的服務,它的作用是驗證資料是否合法,它需要依賴我們從遠端擷取資料的服務remoteData。代碼如下:

   在factory的參數中,我們可以直接傳入服務remoteData,ng的依賴注入機制便幫我們做好了其他工作。不過一定要保證這個參數的名稱與服務名稱一緻,ng是根據名稱來識别的。若參數的名次與服務名稱不一緻,你就必須顯示的聲明一下,方式如下:

走進AngularJs(六) 服務
走進AngularJs(六) 服務

  我們在controller中注入服務也是同樣的道理,使用的名稱需要與服務名稱一緻才可以正确注入。否則,你必須使用$inject來手動指定注入的服務。比如:

走進AngularJs(六) 服務
走進AngularJs(六) 服務

 -------------------補充于2014.01.11-------------------------

  感謝@Terry Sun指出,在controller中注入服務,也可以在定義controller時使用數組作為第二個參數,在此處把服務注入進去,這樣在函數體中使用不一緻的服務名稱也是可以的,不過要確定注入的順序是一緻的,如:

走進AngularJs(六) 服務
走進AngularJs(六) 服務

  ng服務的基本知識也就這些了。目前隻是學些皮毛,或許以後用到項目中了才能體會到他的強大之處,以及在真實使用中的這樣那樣的問題。

本文轉自呂大豹部落格園部落格,原文連結:http://www.cnblogs.com/lvdabao/p/3464015.html,如需轉載請自行聯系原作者

繼續閱讀