AngularJS之使用服务封装可复用代码

 

创建服务组件

在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://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第一页)定义了一个支持四则运算的服务: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://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第四页)预置了使用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://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第五页)预置了使用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://***/course/54f3ba65e564e50cfccbad4b/

 
 
标签: angularjsangularnodejs

AngularJS之使用服务封装的更多相关文章

  1. AngularJS之使用服务封装可复用代码

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

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

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

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

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

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

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

  5. AngularJS订阅API服务

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

  6. 【angularJS】Service服务

    AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1.  $location 服务,它可以返回当前页面的 URL ...

  7. AngularJs之六(服务)

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

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

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

  9. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

随机推荐

  1. mysql出现Data truncated for column

    1.首先叙述,描述你自己的问题. 假设你想把同意为空值的勾去掉.. .恰巧数据库中的数据 processed_f 为空没有值. . . .这时候你对数据表结构做更改的时候就会出现Data trunca ...

  2. Lua 环境结构 --Linux

    curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz tar zxf lua-5.2.3.tar.gz cd lua-5.2.3 make linux ...

  3. apache本地多域配置(wampserver本地多域配置)

    当我们在当地发展.通常在浏览器中输入 http://localhost/项目目录名 测试Web文件,你有没有想过在本地浏览器中,输入自己设定的名字进入项目目录,名相关的问题. 比方我想配置一个主域名w ...

  4. Unity GUI选择与评价

    因为Unity内建的GUI不管是不是从开发效率或效率强制,因此,许多派生GUI插入,什么插件的选择,是一个非常值它被认为是. 既然是评价,就会有非常多的主观意识,这不一定成为选择的根据. 再比方.我已 ...

  5. ASP.NET MVC4实现URL伪静态

    1.在Web.config添加节点配置: <system.webServer> <modules runAllManagedModulesForAllRequests="t ...

  6. Ad Hoc

    Ad Hoc源自于拉丁语,意思是"for this"引申为"for this purpose only",即"为某种目的设置的,特别的"意思 ...

  7. Java多线程总结之由synchronized说开去(转)

    这几天不断添加新内容,给个大概的提纲吧,方面朋友们阅读,各部分是用分割线隔开了的: synchronized与wait()/notify() JMM与synchronized ThreadLocal与 ...

  8. JQUERY省、市、县城市联动选择

    JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...

  9. 使用HttpURLConnection向服务器发送post和get请求(转)

    一.使用HttpURLConnection向服务器发送get请求 1.向服务器发送get请求 @Test publicvoid sendSms() throws Exception{ String m ...

  10. C++它 typedef void *HANDLE

    阅读时编写代码的代码,经常看到一个代码: typedef void *HANDLE ,这是它背后的故事?怎么理解呢? 不明白的时候.这是非常美妙的感觉,后来我才知道这,这是typedef定义,就在vo ...