AngularJs學習筆記--Creating Services

時間 2019-11-12

標籤 angularjs 學習筆記 creating services 欄目 AngularJS 简体版

原文原文鏈接

原版地址：http://docs.angularjs.org/guide/dev_guide.services.creating_servicesjavascript

　　雖然angular提供許多有用的service，在一些特別的應用中，咱們會發現編寫自定義service是頗有用的。若是咱們想作這件事，咱們首先要在module中註冊一個service工廠方法，能夠經過Module.factory api（http://docs.angularjs.org/api/angular.module）或者在module配置方法中直接經過$provide api（http://docs.angularjs.org/api/AUTO.$provide）。html

　　全部angular service都參與到DI（http://www.cnblogs.com/lcllao/archive/2012/09/23/2699401.html）中，既能夠經過angular DI系統（injector）中使用名稱（id）註冊本身，也能夠經過在其餘工廠方法中聲明對已存在的service的依賴。java

1、Registering Servicesangularjs

　　爲了註冊一個service，咱們必須擁有一個module，而且使這個server成爲這個module的一部分。而後，咱們能夠經過Module api或者在module配置函數中註冊service。下面的僞代碼將展現這兩種註冊方式。express

　　使用angular.module api:bootstrap

var myModule = angular.module(‘myModule’,[]);
myModule.factory(‘serviceId’,function() {
       var someService;
       //工廠方法體，構建someService
       return someService;

});

　　使用$provide service：api

angular.module(‘myModule’,[],function($provide) {
       $provide.factory(‘serviceId’,function() {
              var someService;
              //工廠方法體，構建someService
              return someService;
        });
});

　　注意，咱們無須註冊一個服務實例，相反地，工廠方法會在它被調用的時候被實例化。數組

2、Dependenciesapp

　　service不單單能夠被依賴，更能夠擁有本身的依賴。能夠在工廠方法的參數中指定依賴。閱讀（http://www.cnblogs.com/lcllao/archive/2012/09/23/2699401.html）更多關於angular中的DI、數組標記的用途和$inject屬性，讓DI聲明更加簡潔。(Read more about the DI in Angular and the use of array notation and $inject property to make DI annotation minification-proof……)ide

　　下面是一個很是簡單的service例子。這個服務依賴$window service（經過工廠方法參數傳遞），並且只有一個方法。這個service簡單地儲存全部通知，在第三個以後，這個service會經過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>

3、Instantiating Angular Services

　　全部在angular中的service都是延遲實例化的（lazily）。這意味着service僅僅在其餘依賴它的已實例化的service或者應用組件中被依賴時，纔會建立。換句話說，angular直到服務被直接或者間接請求時候，纔會實例化service。

4、Services as singletons

　　最後，咱們必須意識到全部angular service都是一個單例應用。這意味着每個injector中有且只有一個給定service的實例。因爲angular是極其討厭破壞global state的，因此建立多個injector，使每個都有指定service的實例是可行的，除了在測試中有強烈的需求外，通常不多有這樣的須要。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。