【JS-task06】AngularJS服务详解

小课堂【武汉-283期】

分享人:熊凡

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用。

dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的。

service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以供不同的controller使用。

controller层:即控制层,在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑,尽量写在service层里。

所以,就有了创建自定义服务的几种方式。

2.知识剖析

一、constant服务:

app.constant('name',obj)

name为服务的名字,obj为一个对象。


app.constant('APP_KEY', 'a1s2d3f4')
                        

constant 用于定义常量,一旦定义就不能被改变。可以被注入到任何地方,但是不能被装饰器(decorator)装饰。

二、value服务:

app.value('name',obj)

name为服务的名字,obj为一个对象。


app.value('version', '1.0')
                        

与 constant 一样,可以用来定义值。但与 constant 的区别是:可以被修改,可以被 decorator 装饰,不能被注入到 config 中。

三、factory服务:

app.factory('name',function(){return obj})

name为服务的名字,第二个参数传入一个函数,函数需要有一个返回值obj,返回一个对象。实际被注入的服务就是这个对象。


app.factory('myFactory', function(){
    var fac = {};
    fac.a = 'hello world';
    fac.foo = function(){};
    return fac;
})
                        

factory服务是最常见最常用的服务类型,几乎可以满足90%的自己开发的需求,使用它可以编写一些逻辑,通过这些逻辑最后返回所需要的对象. 它和constant,value最大的区别是,factory服务是有一个处理过程,经过这个过程,才返回结果的.

四、service服务

app.service('name',constructor)

name为服务的名字,constructor是一个构造函数。


app.service('myService', function(){
    var a = '';
    this.setA = function(){};
    this.getA = function(){};
    this.foo = function(){};
})
                        

service和factory的区别在于,它第二个参数传入的是一个构造函数,最后被注入的服务是这个构造函数实例化以后的结果.所以基本上使用service创建的服务的,也都可以使用factory来创建。

五、provider服务

app.factory('name',function(){})

name为服务的名字,第二个参数接受一个函数,函数由两部分组成。第一部分的变量和函数是可以在 app.config 函数中访问的。第二部分的变量和函数是通过 $get() 函数返回的


app.provider('myProvider', function(){
    var a = '';
    var func = function(){};

                        

    return{ 
        $get:function(){
            foo: function(){},
            a: a
        }
    }
})                   

$get方法就相当于factory服务的第二个参数,最后要返回一个对象,这个对象就是真正被注入的服务。

3.常见问题

怎么选择这些服务的使用?

4.解决办法

一些固定的参数和方法,使用constant

可能被修改的参数和方法,使用value

通过逻辑处理后得到的参数或方法,使用factory

可以使用factory的也可以使用service,反之亦然(一般就是用factory)

可以手动配置参数的服务,使用provider

5、编码实战

6、扩展思考

decorator是什么?

decorator比较特殊,它不是 provider 。它是$provider服务的一种方法,它是用来装饰其他 provider 的,不过 constant 除外,因为constant 不是通过 provider() 方法创建的。


app.value('version', '1.0');
app.decorator('version', function ($delegate) {
    return $delegate + '.1';
})                

它接受两个参数,第一个参数'name',是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例.


app.config(function($provide){
    $provide.decorator('myFactory',function($delegate){  
        $delegate.b = 'thank you';   
        return $delegate
    })
});            

7、参考文献:

参考一: angularjs中的几种服务的详细分析

参考二: angular五种服务详解

8、更多讨论

谢谢大家

制作人:熊凡