1.服務(Service)介紹

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Angular服務的兩大特點：

• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

懶實例化-一個服務只有當程序的組件用到它的時候才進行實例化；
單例模式-每個依賴服務的組件，都是獲得服務工廠生成單個實例的引用。服務是一個單例對象或函數，對外提供特定的功能。

官方提供的示例demo: Using a Service

2.內置(built-in)服務

Angular本身提供了非常多的內置服務，方便用戶進行開發。和后端打交道用到的$http,URL跳轉用到的$location；動畫相關的$animate服務等等。

Angular內置服務

3.自定義(custom)服務的五種方式

3.1 value()

定義一個服務，服務可以是字符串，數字或者函數，對象等。它和constant不相同的地方是，它可以在其他
的地方修改，但是不能注入到config中，但是它可以被裝飾器decorator修飾。

var app = angular.module('app', []); app.value('appVersion',"v.1.0.1");

3.2 constant()

定義常量時候使用，定義的值不能進行修改。可以注入到任何需要它的組件中，但是不能被裝飾器decorator修飾。
前后端分類的項目中，定義后端服務器URL地址。代碼如下:

var app = angular.module('app', []); app.constant('AppConfig', {serverBaseUrl: 'http://192.168.1.1/api/', });

3.3 factory()

注入的一個function，是在開發過程，自定義服務方法使用做多的一種方式。它和service的區別是，factory注入的是普通的function，而service注入的是一個構造函數constructor。因為它可以返回任何東西，所以在實際開發中使用的最多。它實際上是一個只有$get方法的provider。

var app = angular.module('app', []); app.factory('myService',function(){var appVersion="v.1.0.1";return appVersion; });

3.4 service()

注入的是一個構造器，可以在控制器之間共享數據。

var app = angular.module('app' ,[]);app.config(function ($provide) {$provide.service('customData', function () {this.data = 'Angular Service Here';}); });

3.5 provider()

provider可以說是一個可以配置的factory。Angular規定provider必須返回一個$get方法。provider是value,service和factory的封裝。value,service和factory三種方式定義的服務，底層還是調用provider方法。

var app = angular.module('app', []); app.config(function($provide) {$provide.provider('registration', function() {var type;return {setType: function(value) {type = value;},$get: function() {return {title: 'Service from Provider ' + type}}}}) }); //對registrationProvider進行配置 app.config(function(registrationProvider) {registrationProvider.setType('Angular'); });

說明:在配置這里，我們注入的registrationProvider而不是在provider方法里面定義的registration服務名稱，這里其實是Angular本身通過做的一件事情。config里面要注入供應商，所以寫成駝峰命名格式registrationProvider,Angular會幫我們注入這個provider。

3.6 Decorator

在說明value和constant方法時，提到了裝飾器decorator。它本身不是Provider,而是來裝飾其他的provider的。而上面說過provider是value,service和factory的封裝。但是constant不是，所有decorator不能裝飾constant。裝飾這個概念，個人理解類似C#里面的委托，可以改變已經定義服務里面的方法實現。

對value裝飾

var app = angular.module('app', []); app.value('appVersion',"v.1.0.1");app.config(function($provide){$provide.decorator('appVersion',function($delegate){return $delegate+"- @cmsoft"}); });

參考

Angular Service
AngularJS中的Provider們：Service和Factory等的區別
走進AngularJs(六) 服務
http://www.html-js.com/article/1825

總結

以上是生活随笔為你收集整理的Angular定义服务-Learn By Doing的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。