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的实例是可行的，除了在测试中有强烈的需求外，通常不多有这样的须要。