AngularJs Creating Services詳解及示例代碼

更新時(shí)間：2016年09月02日 15:04:49 作者：Lcllao

本文主要介紹AngularJs Creating Services的知識(shí)資料，這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼，有需要的小伙伴可以參考下

雖然angular提供許多有用的service，在一些特別的應(yīng)用中，我們會(huì)發(fā)現(xiàn)編寫自定義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.dhdzp.com/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.dhdzp.com/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ì)本站的支持！

您可能感興趣的文章: