走进AngularJs(六) 服务
今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下。
一、认识服务(service)
服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块。ng的服务是这样定义的:
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
它是一个单例对象或函数,对外提供特定的功能。
- 首先是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。
- 其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。
ng提供了很多内置的服务,可以到API中查看http://docs.angularjs.org/api/。知道了概念,我们来拉一个service出来溜溜,看看到底是个什么用法。(从这篇文章开始,我就使用jsfiddle来写示例代码了,再也不折腾博客园的变态编辑器了~)
我们在controller中直接声明$location服务,这依靠ng的依赖注入机制。$location提供地址栏相关的服务,我们在此只是简单的获取当前的地址。
服务的使用是如此简单,我们可以把服务注入到controller、指令或者是其他服务中。
二、自定义服务
如同指令一样,系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:
- 使用系统内置的$provide服务
- 使用Module的factory方法
- 使用Module的service方法
下面通过一个小例子来分别试验一下。我们定义一个名为remoteData服务,它可以从远程获取数据,这也是我们在程序中经常使用的功能。不过我这里没有远程服务器,就写死一点数据模拟一下。
//使用$provide来定义var app = angular.module('MyApp', [], function($provide) {$provide.factory('remoteData', function() {var data = {name:'n',value:'v'};return data;}); });
//使用factory方法 app.factory('remoteData',function(){var data = {name:'n',value:'v'};return data; });
//使用service方法 app.service('remoteData',function(){this.name = 'n';this.value = 'v'; });
Module的factory和$provide的factory方法是一模一样的,从官网文档看它们其实就是一回事。至于Module内部是如何调用的,我此处并不打算深究,我只要知道怎么用就好了。
再看Module的service方法,它没有return任何东西,是因为service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。所以我们看到在构造器函数内可以使用this,这样调用该服务的地方便可以直接通过remoteData.name来访问数据了。
下面我们来用一下自己定义好的服务:
三、管理服务的依赖关系
服务与服务中间可以有依赖关系,例如我们这里定义一个名为validate的服务,它的作用是验证数据是否合法,它需要依赖我们从远程获取数据的服务remoteData。代码如下:
在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:
app.factory('validate',['remoteData',function(remoteDataService){return function(){if(remoteDataService.name=='n'){alert('验证通过');}}; }]);
我们在controller中注入服务也是同样的道理,使用的名称需要与服务名称一致才可以正确注入。否则,你必须使用$inject来手动指定注入的服务。比如:
function testC(scope,rd){scope.getData = function(){alert('name:'+rd.name+' value:'+rd.value);} } testC.$inject = ['$scope','remoteData'];
-------------------补充于2014.01.11-------------------------
感谢@Terry Sun指出,在controller中注入服务,也可以在定义controller时使用数组作为第二个参数,在此处把服务注入进去,这样在函数体中使用不一致的服务名称也是可以的,不过要确保注入的顺序是一致的,如:
app.controller('testC',['$scope','remoteData',function($scope,rd){$scope.getData = function(){alert('name:'+rd.name+' value:'+rd.value);} }]);
ng服务的基本知识也就这些了。目前只是学些皮毛,或许以后用到项目中了才能体会到他的强大之处,以及在真实使用中的这样那样的问题。
来源:http://www.cnblogs.com/lvdabao/p/3464015.html
走进AngularJs(六) 服务相关推荐
- (转)走进AngularJs(六) 服务
原文地址:http://www.cnblogs.com/lvdabao/p/3464015.html 今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJS开发指南14:AngularJS的服务详解
服务是一种由服务器端带到客户端的特性,它由来已久.AngularJS应用中的服务是一些用依赖注入捆绑在一起的可替换的对象.服务是最常和依赖注入一起用的,它也是AngularJS中的关键特性. 接下来, ...
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区 原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
- Spring Cloud(六) 服务网关GateWay 入门
前文回顾: Spring Cloud(一)Eureka Server-单体及集群搭建 Spring Cloud(二) 配置Eureka Client Spring Cloud(三) 熔断器Hystri ...
- 42.angularJS自定义服务
转自:https://www.cnblogs.com/best/tag/Angular/ 1. 你可以创建自定义服务,链接到你的模块中: 1 <!DOCTYPE html> 2 <h ...
- ETCD 十六 服务注册与发现
微服务架构中的服务注册与发现 在微服务架构中,多个微服务间的通信需要依赖服务注册与发现组件获取指定服务实例的地址信息,才能正确地发起 RPC 调用,保证分布式系统的高可用.高并发.服务注册与发现主要包 ...
- Dubbo学习记录(十六)--服务调用【二】 - Invoker的调用、ProxyFactory、Protocol、Filter,Exchanger, Transporter扩展点
服务调用的前置学习[二] 服务调用涉及到的东西比较多, 需要一个个的理解透彻, 最终才能串起来: 服务端DubboInvoker的包装 DubboInvoker的生成是在服务导出的过程中创建的:由于D ...
- Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
最新文章
- mysql 存储过程 数组参数_问个小问题,关于存储过程传递数组参数
- (cljs/run-at (JSVM. :all) 细说函数)
- 使用SQL Server存储ASP.NET Session变量
- 台式计算机装系统,教你台式电脑重装系统方法
- (转)Spring Boot(三):Spring Boot 中 Redis 的使用
- Windows下修改Git bash的HOME路径
- Pytest报告添加描述时报错:AttributeError: ‘TestReport‘ object has no attribute ‘description‘
- 从微软中国下载Windows系统并安装
- 为数字添加千分位符号(金额千分位)
- 文本域中只允许输入特定长度的字符
- 无刷直流电机四象限matlab pudn,一种无刷直流电机四象限运行的PWM控制方法与流程...
- 开源小程序CMS网站,JeeWx-App-CMS 持续更新ing~
- Verilog中的parameter
- 瑞吉外卖(1)环境搭建
- linux 的手机操作系统下载地址,Linux系统运维之下载Linux操作系统地址
- gitlab推送企业微信机器人项目代码
- windows 下 c++ 快速截屏
- [源码和文档分享]基于QT实现的旅游路线查询系统
- 计算机网络实验报告(Wireshark 实验)
- C语言复数代数式转化成极坐标式,问题:正弦量的相量是复数。 复数有四种表示形式,四种形式可以相互转换。其中代数式和极坐标形式应用得最为广泛。...
热门文章
- Eclipse新建SpringBoot后pom.xml代码
- python3 No module named 'PIL'
- 软考-信息系统项目管理师-项目整体管理
- goj基础环境的配置
- JDBC连接时所犯错误1.字符集设置不合适2.连接MySQL8.0社区版时时区不一致3..包名不能以Java.命名4.驱动被弃用
- 网络通道联调及SSH服务启动
- java 进程描述_java 进程和线程
- 视频 + PPT 下载 | 《财富管理数字化转型现状与趋势洞察报告》解读第一讲
- 车品觉 | 大数据的价值:找到别人的“集体智慧”
- 人们对大数据的几点误解