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
angularjs 服务详解的更多相关文章
- winxp计算机管理中服务详解
winxp计算机管理中服务详解01 http://blog.sina.com.cn/s/blog_60f923b50100efy9.html http://blog.sina.com.cn/s/blo ...
- Android中Service(服务)详解
http://blog.csdn.net/ryantang03/article/details/7770939 Android中Service(服务)详解 标签: serviceandroidappl ...
- WCF中队列服务详解
WCF中队列服务详解 一.引言 在前面的WCF服务中,它都要求服务与客户端两端都必须启动并且运行,从而实现彼此间的交互.然而,还有相当多的情况希望一个面向服务的应用中拥有离线交互的能力.WCF通过服务 ...
- 【转】SSH服务详解
[转]SSH服务详解 第1章 SSH服务 1.1 SSH服务协议说明 SSH 是 Secure Shell Protocol 的简写,由 IETF 网络工作小组(Network Working Gro ...
- (转)SSH服务详解
SSH服务详解 原文:http://www.cnblogs.com/clsn/p/7711494.html 第1章 SSH服务1.1 SSH服务协议说明SSH 是 Secure Shell Proto ...
- HTTPD之二————HTTPD服务详解————httpd的配置文件常见设置
HTTPD之二----HTTPD服务详解----httpd的配置文件常见设置 HTTP服务器应用 http服务器程序 httpd apache nginx lighttpd 应用程序服务器 IIS,a ...
- angular-ngSanitize模块-$sanitize服务详解
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...
- Java从入门到精通——数据库篇Oracle 11g服务详解
装上Oracle之后大家都会感觉到我们的电脑慢了下来,如何提高计算机的速度呢?我们应该打开必要的服务,关闭没有用的服务.下面是Oracle服务的详解: Oracle ORCL VSS Writer S ...
- windows 7 系统进程服务详解
windows 7已经发布有段时间了,相信很多网友都已经换上了传说中非常完美的win7系统.win7不仅继承而且还超越了vista的美观界面,性能优化方面也下足了功力.还拥有强大的win xp兼容性, ...
随机推荐
- 基于Vue的页面切换左右滑动效果
HTML文本页面: <template> <div id="app> <transition :name="direction" mode= ...
- DEDECMS 留言薄模块的使用方法
一.留言薄的安装 留言薄的安装过程和其他插件一样,首先我们进入后台模块管理列表,点击其对应的"安装": 以上步骤,我们完成了留言薄插件的安装. 二.留言薄的卸载 留言薄的卸载,同样 ...
- asp.net -mvc框架复习(5)-ASP.NET MVC中的视图简单使用
1.视图分类 ASPX视图(现在讲解) Razor视图(后面讲解) ASPX 视图: 2.@page指令 作用:页面的声明 要求:必须放在第一行,常用指令属性如下: 3.服务器端内嵌语法 小脚本:在A ...
- 真正从零开始,TensorFlow详细安装入门图文教程!
本文转载地址:https://www.leiphone.com/news/201606/ORlQ7uK3TIW8xVGF.html AI这个概念好像突然就火起来了,年初大比分战胜李世石的AlphaGo ...
- springmvc +mybatis 配置多数据源
1.数据源配置: jdbc_multiple.properties: # MySQL #======================================================== ...
- matlab判断文件或文件夹是否存在
当前目录中包含以下文件及文件夹: startup.m win64/ … 判断当前目录中是否存在startup.m文件 if ~exist('startup.m','file')==0 error ...
- 2017noip普及组赛前注意事项总结
petr 大神镇场 距人生第一场noip只差4天半了(好紧张) 总结几下四道题的做题策略 NO1 第一题一般是送分的,认真读题,别太草率,多想几遍再动手,把重要的地方圈一圈.画一画,自己找几个数据多试 ...
- 关键字voltale
***volatile在多线程用的最多.*** #include<stdio.h> #include<stdlib.h> int main() { ; i < ; i++ ...
- Jmeter3.1 使用技巧
一.JMeter官网 下载地址 http://jmeter.apache.org/download_jmeter.cgi Jmeter wiki https://wiki.apache.org/jme ...
- Ubuntu14.04 命令行下安装teamviewer
下载teamviewer 链接:https://pan.baidu.com/s/1hs0BppM 密码:sdmk 上传到 /home/[user] cd /home/[user] 移动安装包到 /o ...