原文地址：http://www.cnblogs.com/lvdabao/p/3464015.html

?

　　今天學(xué)習(xí)了一下ng的service機(jī)制，作為ng的基本知識(shí)之一，有必要做一個(gè)了解，在此做個(gè)筆記記錄一下。

一、認(rèn)識(shí)服務(wù)（service）

　　服務(wù)這個(gè)概念其實(shí)并不陌生，在其他語(yǔ)言中如java便有這樣的概念，其作用就是對(duì)外提供某個(gè)特定的功能，如消息服務(wù)，文件壓縮服務(wù)等，是一個(gè)獨(dú)立的模塊。ng的服務(wù)是這樣定義的：

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

　　它是一個(gè)單例對(duì)象或函數(shù)，對(duì)外提供特定的功能。

• 首先是一個(gè)單例，即無(wú)論這個(gè)服務(wù)被注入到任何地方，對(duì)象始終只有一個(gè)實(shí)例。
• 其次這與我們自己定義一個(gè)function然后在其他地方調(diào)用不同，因?yàn)榉?wù)被定義在一個(gè)模塊中，所以其使用范圍是可以被我們管理的。ng的避免全局變量污染意識(shí)非常強(qiáng)。

　　ng提供了很多內(nèi)置的服務(wù)，可以到API中查看http://docs.angularjs.org/api/。知道了概念，我們來拉一個(gè)service出來溜溜，看看到底是個(gè)什么用法。（從這篇文章開始，我就使用jsfiddle來寫示例代碼了，再也不折騰博客園的變態(tài)編輯器了~）　　

　　我們?cè)赾ontroller中直接聲明$location服務(wù)，這依靠ng的依賴注入機(jī)制。$location提供地址欄相關(guān)的服務(wù)，我們?cè)诖酥皇呛?jiǎn)單的獲取當(dāng)前的地址。

　　服務(wù)的使用是如此簡(jiǎn)單，我們可以把服務(wù)注入到controller、指令或者是其他服務(wù)中。

二、自定義服務(wù)

　　如同指令一樣，系統(tǒng)內(nèi)置的服務(wù)以$開頭，我們也可以自己定義一個(gè)服務(wù)。定義服務(wù)的方式有如下幾種：

• 使用系統(tǒng)內(nèi)置的$provide服務(wù)
• 使用Module的factory方法
• 使用Module的service方法

　　下面通過一個(gè)小例子來分別試驗(yàn)一下。我們定義一個(gè)名為remoteData服務(wù)，它可以從遠(yuǎn)程獲取數(shù)據(jù)，這也是我們?cè)诔绦蛑薪?jīng)常使用的功能。不過我這里沒有遠(yuǎn)程服務(wù)器，就寫死一點(diǎn)數(shù)據(jù)模擬一下。

//使用$provide來定義 var app = angular.module('MyApp', [], function($provide) {$provide.factory('remoteData', function() {var data = {name:'n',value:'v'};return data;}); }); //使用factory方法 app.factory('remoteData',function(){var data = {name:'n',value:'v'};return data; }); //使用service方法 app.service('remoteData',function(){this.name = 'n';this.value = 'v'; });

　　Module的factory和$provide的factory方法是一模一樣的，從官網(wǎng)文檔看它們其實(shí)就是一回事。至于Module內(nèi)部是如何調(diào)用的，我此處并不打算深究，我只要知道怎么用就好了。

　　再看Module的service方法，它沒有return任何東西，是因?yàn)閟ervice方法本身返回一個(gè)構(gòu)造器，系統(tǒng)會(huì)自動(dòng)使用new關(guān)鍵字來創(chuàng)建出一個(gè)對(duì)象。所以我們看到在構(gòu)造器函數(shù)內(nèi)可以使用this，這樣調(diào)用該服務(wù)的地方便可以直接通過remoteData.name來訪問數(shù)據(jù)了。

　　下面我們來用一下自己定義好的服務(wù)：

三、管理服務(wù)的依賴關(guān)系

　　服務(wù)與服務(wù)中間可以有依賴關(guān)系，例如我們這里定義一個(gè)名為validate的服務(wù)，它的作用是驗(yàn)證數(shù)據(jù)是否合法，它需要依賴我們從遠(yuǎn)程獲取數(shù)據(jù)的服務(wù)remoteData。代碼如下：

?　　在factory的參數(shù)中，我們可以直接傳入服務(wù)remoteData，ng的依賴注入機(jī)制便幫我們做好了其他工作。不過一定要保證這個(gè)參數(shù)的名稱與服務(wù)名稱一致，ng是根據(jù)名稱來識(shí)別的。若參數(shù)的名次與服務(wù)名稱不一致，你就必須顯示的聲明一下，方式如下：

app.factory('validate',['remoteData',function(remoteDataService){return function(){if(remoteDataService.name=='n'){alert('驗(yàn)證通過');}}; }]);

　　我們?cè)赾ontroller中注入服務(wù)也是同樣的道理，使用的名稱需要與服務(wù)名稱一致才可以正確注入。否則，你必須使用$inject來手動(dòng)指定注入的服務(wù)。比如：

function testC(scope,rd){scope.getData = function(){alert('name：'+rd.name+' value：'+rd.value);} } testC.$inject = ['$scope','remoteData'];

?

　　ng服務(wù)的基本知識(shí)也就這些了。目前只是學(xué)些皮毛，或許以后用到項(xiàng)目中了才能體會(huì)到他的強(qiáng)大之處，以及在真實(shí)使用中的這樣那樣的問題。

轉(zhuǎn)載于:https://www.cnblogs.com/fcsh820/p/3464323.html

總結(jié)

以上是生活随笔為你收集整理的（转）走进AngularJs(六) 服务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。