AngularJs 学习笔记（四）服务

模型是指$scope上保存的包含瞬时状态数据的JavaScript对象。

服务是一个单例对象，只会被$injector实例化一次，并且是在需要的时候才会被创建，服务提供了把与特定功能相关联的方法集中在一起的接口。

共有5种方式来创建服务：

- factory(name,getFn):
  - name为注册的服务名，服务是单例对象在应用的生命周期内只会被调用一次，getFn可以是一个函数或者是一个包含可被注入对象的数组。
- service(name,constructor):
  - name为要注册的服务名，constructor为构造函数，用来生成服务对象，在创建实例的时候通过new关键字来实例化服务对象(也就是创建一个对象，然后将构造函数的this绑定到这个对象上)。
- provider(name,aProvider):
  - name参数为provideCache中注册的名字，也是服务实例的名字，name+Provider会成为服务的提供者。aProvider参数要求为一个提供者对象（包含$get函数）。所有的服务工厂都是由$provide提供的，$provide服务负责在运行时初始化这些提供者，提供者是一个具有$get()方法的对象。该方法负责在$providerCache中注册服务，所有创建服务的方法都是构建在provider方法之上，factory()方法是provider()方法的简略形式，将如传入的函数默认为服务提供者的$get函数，注入器注入服务的其实是服务提供者的$get返回的对象，也就是说$injector通过调用$get方法来创建服务实例。此外，AngularJS的config函数，可以对provider()方法返回的服务可以进行额外的配置，在config对其提供者（ServiceProvider）进行配置。

- constant(name,value)：
- value(name,value):
  - 与constant类似，只不过前者可以注入到配置函数中来配置数据，而value不行。
- decorator(name,decoratorFn):
  - $provide服务提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展或者完全用另外的内容来替代。name为要拦截的服务，decoratorFn为装饰器函数，在服务实例化的时候进行调用。在装饰器函数中，$delegate是进行装饰的最原始的服务（就是要被装饰的服务的引用）。

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.5.8/angular.min.js"></script>
    <script src="angular-1.5.8/angular-route.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController"></div>
    <script>
        var Person=function () {
            this.name='baishoujing'
        }
        var app=angular.module('MyApp',['ngRoute']);
        app.factory('UserService',['$log',function ($log) {
            $log.info('UserService is loaded!')
            return { name:'zhaoxiangjun '}
        }]);
        app.service('PersonService',Person)
        app.controller('MyController',function (UserService,PersonService) {
            alert(UserService.name)
            alert(PersonService.name)
        });
        var UserServiceDecorator=function ($delegate,$log,$injector) {
            $log.info($delegate)
            alert($delegate)
            return $delegate
        };
        app.config(function($provide){
            $provide.decorator('UserService',UserServiceDecorator)
        });
    </script>
</body>
</html>

运行结果:

posted @ 2017-07-27 16:13 白守敬阅读(154) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

白守敬

AngularJs 学习笔记（四）服务

公告