原文地址:http://www.cnblogs.com/lvdabao/p/3464015.html

  今天学习了一下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'];

  ng服务的基本知识也就这些了。目前只是学些皮毛,或许以后用到项目中了才能体会到他的强大之处,以及在真实使用中的这样那样的问题。

(转)走进AngularJs(六) 服务的更多相关文章

  1. 走进AngularJs(六) 服务

    今天学习了一下ng的service机制,作为ng的基本知识之一,有必要做一个了解,在此做个笔记记录一下. 一.认识服务(service) 服务这个概念其实并不陌生,在其他语言中如java便有这样的概念 ...

  2. 走进AngularJs(一)angular基本概念的认识与实战

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  3. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  4. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  5. angularJs自定义服务(实现签名和加密)

    写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...

  6. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  7. 走进AngularJs(五)自定义指令----(下)

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  8. 走进AngularJs(三)自定义指令-----(上)

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  9. angularJs自定义服务

    在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法 使用Module的factory方法 使 ...

随机推荐

  1. Spring表单标签

    虽然我们可以使用HTML原生的form表单标签来轻松的写出一个表单,其实我一直都是这样做的,但是使用Spring表单标签可以更方便我们完成例如:验证失败后表单数据的回填功能(虽然你可以使用EL+JST ...

  2. 优化笔记:jsyhjkzqxx_D_20140916.gz

    有几张表没有权限,所以跑不起来. 目测黄色部分比较坑爹,死了n多脑细胞才看懂,又死了n多脑细胞才改出来.对5034进行了2次扫描,并多次分组排序求和.(分组和排序算法相对来说比较耗性能) 改为只扫描一 ...

  3. [转] Mac系统终端命令行不执行命令 总出现command not found解决方法

    配置过安卓开发环境,改过bash_profile这个文件,最后不知怎么的只有cd命令能执行,我猜测可能修改bash_profile文件后没有保存 导致的     保存命令是: source .bash ...

  4. django之设置缓存

    缓存 一句话总结:缓存可以对view.模板.数据进行缓存可以设置缓存在不同的地方(本地内存.redis.系统文档)可以为服务器节省性能.减少用户等待时间. 对于中等流量的网站来说,尽可能地减少开销是必 ...

  5. Tomcat实践

    1.1Java环境介绍 jdk  java 开发工具包 jre sdk J2EE 企业版 J2SE 标准版 J2ME 手机开发 1.2Tomcat自动部署 通过saltstack来批量安装tomcat ...

  6. congst与指针

    指向const的指针 //a pointer to const int;指针指向常量对象,相对本指针而言,不能指针指向的对象的常量,不能通过本指针修改常量对象指针,实际的对象不一定的常量 const指 ...

  7. JVM常用参数设置

    堆内存设置 示例: java -Xmx4550m -Xms4550m -Xss128k -XX:NewRatio=5 -XX:SurvivorRatio=5 -Xmx4550m:设置JVM最大可用内存 ...

  8. ListBox和ComboBox绑定数据简单例子

    1. 将集合数据绑定到ListBox和ComboBox控件,界面上显示某个属性的内容 //自定义了Person类(有Name,Age,Heigth等属性) List<Person> per ...

  9. php yii 学习笔记

    yii 归档安装 1,下载 yii  Yii2的高级应用程序模板 2,解压模板到目录,进入控制台进入目录 运行 php init 安装YII 3,进入 http://localhost/phpmyad ...

  10. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络

    课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...