创建服务组件

在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记:

  1. //定义构造函数
  2. var myServiceProvider = function(){
  3. this.$get = function(){
  4. return ....
  5. };
  6. };
  7. //在模块中登记
  8. angular.module("myModule",[])
  9. .provider("myService",myServiceProvider);

示例(http://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第一页)定义了一个支持四则运算的服务:ezCalculator。

可配置的服务

有时我们希望服务在不同的场景下可以有不同的行为,这意味着服务可以进行配置。

比如,我们希望小计算器可以根据不同的本地化区域,给计算结果追加货币符号前缀, 那么需要在这个服务创建之前,首先配置本地化区域的值,然后在具体的计算中, 根据这个值选择合适的货币符号。

AngularJS使用模块的config()方法对服务进行配置,需要将实例化的服务提供者 (而不是服务实例)注入到配置函数中:

  1. angular.module("myModule",[])
  2. .config(["myServiceProvider",function(myServiceProvider){
  3. //do some configuration.
  4. }]);

注意:服务提供者provider对象在注入器中的登记名称是:服务名+Provider。 例如: $http的服务提供者实例名称是"$httpProvider"。

服务定义语法糖

使用模块的provider方法定义服务组件,在有些场景下显得有些笨重。AngularJS友好 地提供了一些简化的定义方法,这些方法通常只是对provider方法的封装, 分别适用于不同的应用场景:

  • factory

使用一个对象工厂函数定义服务,调用该工厂函数将返回服务实例。

  • service

使用一个类构造函数定义服务,通过new操作符将创建服务实例。

  • value

使用一个值定义服务,这个值就是服务实例。

  • constant

使用一个常量定义服务,这个常量就是服务实例。

factory方法

factory方法要求提供一个对象工厂,调用该类工厂将返回服务实例。

  1. var myServiceFactory = function(){
  2. return ...
  3. };
  4. angular.module("myModule",[])
  5. .factory("myService",myServiceFactory);

INSIDE:AngularJS会将factory方法封装为provider,上面的示例 等同于:

  1. var myServiceFactory = function(){
  2. return ...
  3. };
  4. angular.module("myModule",[])
  5. .provider("myService",function(){
  6. this.$get = myServiceFactory;
  7. });

(http://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第四页)预置了使用factory方法改写的ezCalculator示例,感受下和provider方法的区别!

service方法

service方法要求提供一个构造函数,AngularJS使用这个构造函数创建服务实例:

  1. var myServiceClass = function(){
  2. this.method1 = function(){...}
  3. };
  4. angular.module("myModule",[])
  5. .service("myService",myServiceClass);

INSIDE:AngularJS会将service方法封装为provider,上面的示例 等同于:

  1. var myServiceClass = function(){
  2. //class definition.
  3. };
  4. angular.module("myModule",[])
  5. .provider("myService",function(){
  6. this.$get = function(){
  7. return new myServiceClass();
  8. };
  9. });

(http://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第五页)预置了使用service方法改写的ezCalculator示例,感受下和factory方法的区别!

value方法

有时我们需要在不同的组件之间共享一个变量,可以将这种情况视为一种服务: provider返回的总是变量的值。

value方法提供了对这种情况的简化封装:

  1. angular.module("myModule",[])
  2. .value("myValueService","cx129800123");

INSIDE:AngularJS会将value方法封装为provider,上面的示例 等同于:

  1. angular.module("myModule",[])
  2. .provider("myService",function(){
  3. this.$get = function(){
  4. return "cx129800123";
  5. };
  6. });

constant方法

有时我们需要在不同的组件之间共享一个常量,可以将这种情况视为一种服务: provider返回的总是常量的值。

constant方法提供了对这种情况的简化封装:

  1. angular.module("myModule",[])
  2. .constant("myConstantService","Great Wall");

和value方法不同,AngularJS并没有将constant方法封装成一个provider,而仅仅 是在内部登记这个值。这使得常量在AngularJS的启动配置阶段就可以使用(创建任何 服务之前):你可以将常量注入到模块的config()方法中。

参考资料:http://www.dwz.cn/26R4S5

AngularJS之使用服务封装可复用代码的更多相关文章

  1. AngularJS之使用服务封装

    AngularJS之使用服务封装可复用代码   创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...

  2. angularJS之使用指令封装DOM操作

    angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...

  3. AngularJS之使用控制器封装业务逻辑

    AngularJS之使用控制器封装业务逻辑 控制器的作用 我们知道,在AngularJS中,实现数据绑定的核心是scope对象.那么控制器又有什么用呢? 简单地说,没有控制器/controller,我 ...

  4. AngularJS 的异步服务测试与Mocking

    测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...

  5. AngularJs之六(服务)

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  6. 让AngularJS的$http 服务像jQuery.ajax()一样工作

    让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...

  7. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  8. AngularJS订阅API服务

    本篇使用AngularJS实现订阅某个API服务. 首页大致是: 其中,what's on显示首页内容,Search通过输入关键词调用API服务显示到页面,MyShows显示订阅的内容. Sarch页 ...

  9. AngularJS内建服务以及自定义服务的用法

    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...

随机推荐

  1. IOS基金会_ UICollectionView简单易用

    和表格视图类似 UICollectionView的使用有两种方法 一种是继承UICollectionViewController,这个Controller会自带一个UICollectionView. ...

  2. dapper支持oracle游标

    dapper支持oracle游标 Dapper是一个轻型的ORM类.它有啥优点.缺点相信很多朋友都知道了,园里也有很多朋友都有相关介绍,这里就不多废话. 如果玩过Oracle都知道,存储过程基本都是通 ...

  3. AutoMapper在ABP框架

    AutoMapper在ABP框架中的使用说明 为了说明AutoMapper如何使用,我专门开设了一个专题来讲,如果您还没有查看该专题,请点击这里.既然系统地学习了AutoMapper,那么接下来就是该 ...

  4. 2C 产品的本质是人性,2B 产品的背后是业务(转)

    本文作者李源是 BLUES 原来做 YY 语音客户端产品时候的同事,原来针对 YY 语音的游戏用户做 2C 的 PC 客户端产品和 APP,后来到某品牌手机做 2B 的后台系统.以下文章,是作者经历了 ...

  5. HDU 4946 Area of Mushroom 凸包

    链接:pid=4946">http://acm.hdu.edu.cn/showproblem.php?pid=4946 题意:有n个人.在位置(xi,yi),速度是vi,假设对于某个点 ...

  6. COM Interop

    1.MSDN上的文章:COM Interop教程 2.接口的三种类型:IDispatch.IUnknown和Dual 3.使用TlbImp来更灵活地自动生成RCW 4.托管事件基于委托,而非托管事件( ...

  7. Android有关JNI 学习(两)为JNI方法名称,数据类型和方法签名的一些知识

    我们知道,使用javah产生c/c++当在头文件,将java定义 native 功能,以产生相应jni层功能,如下面: /* * Class: com_lms_jni_JniTest * Method ...

  8. SQLServer 2012异常问题(一)--故障转移群集+镜像环境导致作业执行失败

    原文:SQLServer 2012异常问题(一)--故障转移群集+镜像环境导致作业执行失败 先感谢一下我的同事们最先发现此问题,鸣谢:向飞.志刚.海云 最近在生产环境发现一个诡异的问题: 环境:WIN ...

  9. 【git学习五】git基础之git分支

    1.背景                最早用github的时候,我傻傻的问舍友大神,git里面的branch是干什么的,他用了非常直白的解释,我至今还记得."branch就是你能够自己建立 ...

  10. SyntaxHighlighter代码高亮插件

    SyntaxHighlighter它是Google Code在一个开源项目,主要用于对代码着色页, 使用十分方便,效果也不错,并且差点儿支持常见的全部语言. 使用步骤: 一.下载并解压缩SyntaxH ...