AngularJs Creating Services詳解及示例代碼
雖然angular提供許多有用的service,在一些特別的應(yīng)用中,我們會(huì)發(fā)現(xiàn)編寫(xiě)自定義service是很有用的。如果我們想做這件事,我們首先要在module中注冊(cè)一個(gè)service工廠方法,可以通過(guò)Module.factory api(http://docs.angularjs.org/api/angular.module)或者在module配置方法中直接通過(guò)$provide api(http://docs.angularjs.org/api/AUTO.$provide)。
所有angular service都參與到DI(http://www.dbjr.com.cn/article/91775.htm)中,既可以通過(guò)angular DI系統(tǒng)(injector)中使用名稱(id)注冊(cè)自己,也可以通過(guò)在其他工廠方法中聲明對(duì)已存在的service的依賴。
一、Registering Services
為了注冊(cè)一個(gè)service,我們必須擁有一個(gè)module,并且使這個(gè)server成為這個(gè)module的一部分。然后,我們可以通過(guò)Module api或者在module配置函數(shù)中注冊(cè)service。下面的偽代碼將展示這兩種注冊(cè)方式。
使用angular.module api:
var myModule = angular.module(‘myModule',[]); myModule.factory(‘serviceId',function() { var someService; //工廠方法體,構(gòu)建someService return someService; });
使用$provide service:
angular.module(‘myModule',[],function($provide) { $provide.factory(‘serviceId',function() { var someService; //工廠方法體,構(gòu)建someService return someService; }); });
注意,我們無(wú)須注冊(cè)一個(gè)服務(wù)實(shí)例,相反地,工廠方法會(huì)在它被調(diào)用的時(shí)候被實(shí)例化。
二、Dependencies
service不僅僅可以被依賴,更可以擁有自己的依賴??梢栽诠S方法的參數(shù)中指定依賴。閱讀(http://www.dbjr.com.cn/article/91775.htm)更多關(guān)于angular中的DI、數(shù)組標(biāo)記的用途和$inject屬性,讓DI聲明更加簡(jiǎn)潔。(Read more about the DI in Angular and the use of array notation and $inject property to make DI annotation minification-proof……)
下面是一個(gè)非常簡(jiǎn)單的service例子。這個(gè)服務(wù)依賴$window service(通過(guò)工廠方法參數(shù)傳遞),而且只有一個(gè)方法。這個(gè)service簡(jiǎn)單地儲(chǔ)存所有通知,在第三個(gè)之后,這個(gè)service會(huì)通過(guò)window.alert顯示所有通知。
<!DOCTYPE HTML> <html lang="zh-cn" ng-app="MainApp"> <head> <meta charset="UTF-8"> <title>services</title> </head> <body> <div ng-controller="MyController"> <input type="text" ng-model="msg"/> <button ng-click="saveMsg()">save msg</button> <ul> <li ng-repeat="msg in msgs">{{msg}}</li> </ul> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("MainApp",[],function($provide) { $provide.factory("notify",["$window","$timeout",function(win,timeout) { var msgs = []; return function(msg) { msgs.push(msg); if(msgs.length==3) { timeout(function() { win.alert(msgs.join("\n")); msgs = []; },10); } } }]) }); app.controller("MyController",function($scope,notify) { $scope.msgs = []; $scope.saveMsg = function() { this.msgs.push(this.msg); notify(this.msg); this.msg = ""; }; }); </script> </body> </html>
三、Instantiating Angular Services
所有在angular中的service都是延遲實(shí)例化的(lazily)。這意味著service僅僅在其他依賴它的已實(shí)例化的service或者應(yīng)用組件中被依賴時(shí),才會(huì)創(chuàng)建。換句話說(shuō),angular直到服務(wù)被直接或者間接請(qǐng)求時(shí)候,才會(huì)實(shí)例化service。
四、Services as singletons
最后,我們必須意識(shí)到所有angular service都是一個(gè)單例應(yīng)用。這意味著每一個(gè)injector中有且只有一個(gè)給定service的實(shí)例。由于angular是極其討厭破壞global state的,所以創(chuàng)建多個(gè)injector,使每一個(gè)都有指定service的實(shí)例是可行的,除了在測(cè)試中有強(qiáng)烈的需求外,一般很少有這樣的需要。
以上就是關(guān)于Angular Services 的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對(duì)本站的支持!
- AngularJS入門教程之服務(wù)(Service)
- angularJS Provider、factory、service詳解及實(shí)例代碼
- 簡(jiǎn)介AngularJS中使用factory和service的方法
- 簡(jiǎn)介AngularJS中$http服務(wù)的用法
- AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
- Angularjs 自定義服務(wù)的三種方式(推薦)
- AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密
- AngularJS 服務(wù)詳細(xì)講解及示例代碼
- AngularJS入門教程之REST和定制服務(wù)詳解
- AngularJS通過(guò)$http和服務(wù)器通信詳解
- AngularJS服務(wù)service用法總結(jié)
相關(guān)文章
angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn)
這篇文章主要介紹了angular4自定義表單控件[(ngModel)]的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11Angular2使用SVG自定義圖表(條形圖、折線圖)組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表(條形圖、折線圖)組件,涉及Angular結(jié)合svg進(jìn)行圖表繪制的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程
這篇文章主要給大家介紹了關(guān)于Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-05-05AngularJS ui-router刷新子頁(yè)面路由的方法
這篇文章主要介紹了AngularJS ui-router刷新子頁(yè)面路由的方法,網(wǎng)上雖然有很多種方法,但是都不適合小編,今天小編給大家分享一個(gè)還不錯(cuò)的方法,需要的朋友可以參考下2018-07-07AngularJS基礎(chǔ) ng-keypress 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keypress 指令,這里對(duì)ng-keypress指令的基礎(chǔ)資料整理,并附有實(shí)例代碼,需要的小伙伴參考下2016-08-08淺談angularJS的$watch失效問(wèn)題的解決方案
本篇文章主要介紹了淺談angularJS的$watch失效問(wèn)題的解決方案,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-08-08