专栏首页菜鸟计划angularjs 服务详解

angularjs 服务详解

一、服务

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript 面向对象(多种创建对象的方式)

    创建对象 第一种:基于Object对象 var person = new Object(); person.name = 'My Name'; person.a...

    柴小智
  • react入门(四):组件生命周期

    componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDid...

    柴小智
  • redux工程化结构

    柴小智
  • 【机器学习】特征工程

    作者:JasonDing1354 引言 在之前学习机器学习技术中,很少关注特征工程(Feature Engineering),然而,单纯学习机器学习的算法流程,...

    陆勤_数据人网
  • (cljs/run-at (->JSVM :browser) "语言基础")

    前言  两年多前知道cljs的存在时十分兴奋,但因为工作中根本用不上,国内也没有专门的职位于是搁置了对其的探索。而近一两年来又刮起了函数式编程的风潮,恰逢有幸主...

    ^_^肥仔John
  • vue.js笔记——指令

    vue.js笔记——指令 跟ng的指令系统类似,vue也拥有一套指令系统。 所谓指令,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 D...

    IMWeb前端团队
  • 一文聊透 Dubbo 元数据中心

    如果让你在本地构建一个 Dubbo 应用,你会需要额外搭建哪些中间件呢?如果没猜错的话,你的第一反应应该是注册中心,类 Dubbo 的大多数服务治理框架都有注册...

    kirito-moe
  • 云安全评估

    云安全既是一场冲刺赛,又是一场耐力赛。像冲刺赛的地方在于,安全团队必须迅速建立适当的防御措施,以应对短时间内的零日攻击和持续性威胁。像耐力赛的地方在于,安全团队...

    yojay
  • vue.js笔记——指令

    所谓指令,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。

    IMWeb前端团队
  • 机器学习法则:(谷歌)机器学习工程最佳实践

    机器学习(ML)最优实践方法,浓缩了其多年技术积累与经验,尤其是YouTube、Google Play和Google+ 等平台背后的ML算法开发、维护经历。谷歌...

    机器学习AI算法工程

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动