AngularJS 讲解五, Factory ,Service , Provider

   一. 首先说一下，为什么要引入Factory,Service和Provider这三个Service层。

   1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据，controller层越轻薄越好，业务逻辑和持久化数据应该放在Service层。

   2.针对内存性能的考虑，controller会在需要的时候才初始化，不需要的话，就会被放弃。所以AngularJS会在刷新页面的时候，清空controller. 而永久保存的数据放在Service层，那么在不同的controller之间可以被调用。

 二.AngularJS 提供了三种方法创建并注册自己的Service.

    1). Factory

    2). Service

    3). Provider

 三.对Factory,Service,Provider的详解

   1).Factory 相当于创建对象，在对象里添加属性和方法，返回这个对象，然后在controller里便可直接用service对象的属性啦

    例如：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
    <div data-ng-controller="demoController">
        title:<span data-ng-bind="title"></span>
    </div>
</body>
</html>
 
(function () {
    angular.module('demoApp', []);
    angular.module('demoApp').controller("demoController", function ($scope,demoFactory) {
        $scope.title = demoFactory.getTitle();
    });
    angular.module('demoApp').factory("demoFactory", function () {
        var _title = "ruby's test";
        var service = {};
        service.getTitle = function () {
            return _title;
        }
        return service;
    })
})();

　2).Service 相当于是用new关键字来实例化的Service对象(相当于创建了一个构造器)，因此只需要给this添加属性，然后由service返回this. 在controller层通过该service获得这个属性。

?
1
2
3
4
5
6
7
8
9
angular.module('demoApp').controller("demoController", function ($scope,demoService) {
        $scope.title = demoService.getTitle();
    });
    angular.module('demoApp').service('demoService', function () {
        var _title = "Ruby Test service";
        this.getTitle = function () {
            return _title;
        }
    });

 3).Provider 是唯一一个能传到应用程序.config的服务。所以当想要在controller之前启用，先进行模块范围的配置(对provider的一部分属性值进行配置)，就用provider

　 如果想要在controller控制器里直接调用provider的属性和方法 要放到$get里

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
    <div data-ng-controller="demoController">
        title:<span data-ng-bind="title"></span>
        <br/>
        thingFromConfig:<span data-ng-bind="thingFromConfig"></span>
    </div>
</body>
</html>
 
angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoProvider) {
        demoProvider.setTitle("provider service test");
        $scope.title = demoProvider.getTitle();
        $scope.thingFromConfig = demoProvider.thingOnConfig;
    });
    angular.module('demoApp').provider('demoProvider', function () {
        var _title = "";
        this.thingFromConfig = "";
        this.$get = function () {
            return {
                setTitle: function (t) {
                    _title = t;
                },
                getTitle: function () {
                    return _title;
                },
                thingOnConfig: this.thingFromConfig
            }
        }
    });
    angular.module('demoApp').config(function (demoProviderProvider) {
        demoProviderProvider.thingFromConfig = "Hello, this is a thing from configuration.";
    });

四.深入解析 AngularJs的service

   首先了解一下$provide

  AngularJs有个叫$provide的服务，这个服务可以创建供应商，我们的service都是通过供应商来定义的。

 有六个个创建供应商的方法：

 1.Factory

 2.Service

 3.Constant

 4.value

 5.provider

 6.decorator(装饰器)

   

 

posted @   菠萝蜜小兔  阅读(284)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
· Ai满嘴顺口溜，想考研？浪费我几个小时
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
点击右上角即可分享
微信分享提示