angularjs基本概念和用法之服务

Posted 2020-10-25 柴小智

一、服务

服务提供了一种能在应用的整改生命周期内保持数据的方法，它能够在控制器之间进行通信，并保持数据的一致性。

1.服务是一个单例对象，在每个应用中只会被实例化一次（被$injector）；

2.服务提供了把与特定功能相关连的方法集中在一起的接口，实际中用于封装通用方法，请求后台数据，处理数据返回给控制器；

3.服务被注册后就可以引用它，并在运行时把它当做依赖加载进来。

 

二、创建服务的5种方式

1.factory服务

factory()方法是创建和配置服务的最快捷方式。

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

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

serviceApp.factory(\'myConfig\',function(){
    var myname = \'code_bunny\';
    var age = 12;
    var id = 1;
    return {
        name: myname,
        age: age,
        getId: function(){
            return id
        }
    }
});

 

2.service服务

使用service()可以注册一个支持构造函数的服务

app.service(\'name\',constructor)

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

serviceApp.service(\'myConfig\',function(){
    var myname = \'code_bunny\';
    var age = 12;
    var id = 1;
    this.name = myname;
    this.age = age;
    this.getId = function(){
        return id
    }
});

 

3.provider服务

所以服务工厂都是由$provide服务创建的,所有创建服务的方法都是构建在provider方法之上。

name为服务的名字,第二个参数接受一个函数,函数返回一个对象,返回的对象比如要有$get方法,$get方法必须要返回一个对象obj,这个对象就是真正被注入的服务.

provider服务的第二个参数的返回值中必须要有$get方法(除了$get,还可以有其它方法,后面的例子会说到),$get方法就相当于factory服务的第二个参数,最后要返回一个对象,这个对象就是真正被注入的服务:

app.provider(\'name\',function(){
　　....
　　return {
　　　　...
　　　　$get:function(){
　　　　　　...
　　　　　　return obj
　　　　}
     }
})

 

serviceApp.provider(\'myConfig\',function(){
   return {
       $get:function(){
           var myname = \'code_bunny\';
           var age = 12;
           var id = 1;
           return {
               name: myname,
               age: age,
               getId: function(){
                   return id
               }
           }
       }
   }
});

 

这两种写法和之前是一样的，之前的可以看成是它的简略写法。

我们只有希望在config()函数中对服务进行配置时，那就必须使用provider()来定义服务了。

serviceApp.provider(\'myConfig\',function(){
    var id = 1;
    return {
        setID:function(newID){
            id = newID
        },
        $get:function(){
            var myname = \'code_bunny\';
            var age = 12;
            return {
                name: myname,
                age: age,
                getId: function(){
                    return id
                }
            }
        }
    }
});
serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

说明:

这里的provider服务不仅仅返回了$get方法,还返回了setID方法,然后id变量是写在函数里的,返回值的外面,形成一个闭包,可以被修改.

然后,在provider服务里定义的方法,可以在config函数里调用.注意调用的格式:

serviceApp.config(function(myConfigProvider){
    myConfigProvider.setID(2)
});

被注入的服务名不叫myConfig,而是myConfigProvider.然后在函数里面可以调用myConfigProvider的setID方法(也就是myConfig的setID方法).

通过这种方式,使得我们的服务可以被手动配置,比如这里可以配置id.

ng有很多内置的服务都有这样的功能,比如$route服务,$location服务,当我们通过$routeProvider和$locationProvider来配置的时候,其本质就是这些服务是通过provider创建的.

 

4.constant服务

constant()一般将常量保存下来

app.constant(\'name\',obj)

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

serviceApp.constant(\'myConfig\',{
    name:\'code_bunny\',
    age:12,
    getId:function(){
        return 1
    }
});

constant创建服务返回一个json对象(也就是第二个参数中传入的对象),这个对象里可以有参数,可以有方法,并且,属性和方法都可以在控制器中修改,新增,但是按照它的设计本意,一般constant创建的服务不会去修改它的内容,需要修改内容,最好用value来创建服务. 

 

5.value服务

app.value(\'name\',obj)

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

serviceApp.value(\'myConfig\',{
    name:\'code_bunny\',
    age:12,
    getId:function(){
        return 1
    }
});

value创建服务返回一个json对象(也就是第二个参数中传入的对象),这个对象里可以有参数,可以有方法,并且,属性和方法都可以在控制器中修改,新增,按照它的设计本意,如果属性和方法需要被修改内容,就用value来创建服务. 

constant和value主要就是用于存放一些数据或方法以供使用,区别是constant一般是存放固定内容,value存放可能会被修改的内容

 

6.装饰服务decorator

$provide服务提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展或者替代等。

serviceApp.value(\'myConfig\',{
    name:\'code_bunny\',
    age:12,
    getId:function(){
        return 1
    }
});

serviceApp.config(function($provide){
    $provide.decorator(\'myConfig\',function($delegate){
        $delegate.money = \'100w\';
        return $delegate
    })
});

同样是通过config,在参数函数中注入$provider服务,$provider服务有个decorator方法,它接受两个参数,第一个参数\'name\',是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例.

注意:

1.最后一定要return $delegate,这样服务才算被装饰完成了.

2.constant服务是不能被装饰的.

 

总结上面的内容:

1.服务的实例被注入到控制器以后,都是一个引用对象,无论被注入多少个控制器中,实际都指向同一个对象,所以,无论修改其中的哪一个,其它所有的服务都会被改变.

2.服务的实例被修改过后,ng不会自动同步,需要使用$scope.$watch()监测其变化并手动刷新视图.

3.constant服务不能通过decorator进行装饰.

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

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

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

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

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