AngularJS之使用服务封装
AngularJS之使用服务封装可复用代码
创建服务组件
在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记:
- //定义构造函数
- var myServiceProvider = function(){
- this.$get = function(){
- return ....
- };
- };
- //在模块中登记
- angular.module("myModule",[])
- .provider("myService",myServiceProvider);
示例(http://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第一页)定义了一个支持四则运算的服务:ezCalculator。
可配置的服务
有时我们希望服务在不同的场景下可以有不同的行为,这意味着服务可以进行配置。
比如,我们希望小计算器可以根据不同的本地化区域,给计算结果追加货币符号前缀, 那么需要在这个服务创建之前,首先配置本地化区域的值,然后在具体的计算中, 根据这个值选择合适的货币符号。
AngularJS使用模块的config()方法对服务进行配置,需要将实例化的服务提供者 (而不是服务实例)注入到配置函数中:
- angular.module("myModule",[])
- .config(["myServiceProvider",function(myServiceProvider){
- //do some configuration.
- }]);
注意:服务提供者provider对象在注入器中的登记名称是:服务名+Provider。 例如: $http的服务提供者实例名称是"$httpProvider"。
服务定义语法糖
使用模块的provider方法定义服务组件,在有些场景下显得有些笨重。AngularJS友好 地提供了一些简化的定义方法,这些方法通常只是对provider方法的封装, 分别适用于不同的应用场景:
- factory
使用一个对象工厂函数定义服务,调用该工厂函数将返回服务实例。
- service
使用一个类构造函数定义服务,通过new操作符将创建服务实例。
- value
使用一个值定义服务,这个值就是服务实例。
- constant
使用一个常量定义服务,这个常量就是服务实例。
factory方法
factory方法要求提供一个对象工厂,调用该类工厂将返回服务实例。
- var myServiceFactory = function(){
- return ...
- };
- angular.module("myModule",[])
- .factory("myService",myServiceFactory);
INSIDE:AngularJS会将factory方法封装为provider,上面的示例 等同于:
- var myServiceFactory = function(){
- return ...
- };
- angular.module("myModule",[])
- .provider("myService",function(){
- this.$get = myServiceFactory;
- });
(http://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第四页)预置了使用factory方法改写的ezCalculator示例,感受下和provider方法的区别!
service方法
service方法要求提供一个构造函数,AngularJS使用这个构造函数创建服务实例:
- var myServiceClass = function(){
- this.method1 = function(){...}
- };
- angular.module("myModule",[])
- .service("myService",myServiceClass);
INSIDE:AngularJS会将service方法封装为provider,上面的示例 等同于:
- var myServiceClass = function(){
- //class definition.
- };
- angular.module("myModule",[])
- .provider("myService",function(){
- this.$get = function(){
- return new myServiceClass();
- };
- });
(http://***/course/54f3ba65e564e50cfccbad4b/中“使用服务封装可复用代码”第五页)预置了使用service方法改写的ezCalculator示例,感受下和factory方法的区别!
value方法
有时我们需要在不同的组件之间共享一个变量,可以将这种情况视为一种服务: provider返回的总是变量的值。
value方法提供了对这种情况的简化封装:
- angular.module("myModule",[])
- .value("myValueService","cx129800123");
INSIDE:AngularJS会将value方法封装为provider,上面的示例 等同于:
- angular.module("myModule",[])
- .provider("myService",function(){
- this.$get = function(){
- return "cx129800123";
- };
- });
constant方法
有时我们需要在不同的组件之间共享一个常量,可以将这种情况视为一种服务: provider返回的总是常量的值。
constant方法提供了对这种情况的简化封装:
- angular.module("myModule",[])
- .constant("myConstantService","Great Wall");
和value方法不同,AngularJS并没有将constant方法封装成一个provider,而仅仅 是在内部登记这个值。这使得常量在AngularJS的启动配置阶段就可以使用(创建任何 服务之前):你可以将常量注入到模块的config()方法中。
AngularJS之使用服务封装的更多相关文章
- AngularJS之使用服务封装可复用代码
创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: //定义构造函数 var myServicePro ...
- angularJS之使用指令封装DOM操作
angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...
- AngularJS之使用控制器封装业务逻辑
AngularJS之使用控制器封装业务逻辑 控制器的作用 我们知道,在AngularJS中,实现数据绑定的核心是scope对象.那么控制器又有什么用呢? 简单地说,没有控制器/controller,我 ...
- AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
- AngularJS订阅API服务
本篇使用AngularJS实现订阅某个API服务. 首页大致是: 其中,what's on显示首页内容,Search通过输入关键词调用API服务显示到页面,MyShows显示订阅的内容. Sarch页 ...
- 【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
- AngularJs之六(服务)
服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location 服务, $http 服务 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
随机推荐
- mysql出现Data truncated for column
1.首先叙述,描述你自己的问题. 假设你想把同意为空值的勾去掉.. .恰巧数据库中的数据 processed_f 为空没有值. . . .这时候你对数据表结构做更改的时候就会出现Data trunca ...
- 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 ...
- apache本地多域配置(wampserver本地多域配置)
当我们在当地发展.通常在浏览器中输入 http://localhost/项目目录名 测试Web文件,你有没有想过在本地浏览器中,输入自己设定的名字进入项目目录,名相关的问题. 比方我想配置一个主域名w ...
- Unity GUI选择与评价
因为Unity内建的GUI不管是不是从开发效率或效率强制,因此,许多派生GUI插入,什么插件的选择,是一个非常值它被认为是. 既然是评价,就会有非常多的主观意识,这不一定成为选择的根据. 再比方.我已 ...
- ASP.NET MVC4实现URL伪静态
1.在Web.config添加节点配置: <system.webServer> <modules runAllManagedModulesForAllRequests="t ...
- Ad Hoc
Ad Hoc源自于拉丁语,意思是"for this"引申为"for this purpose only",即"为某种目的设置的,特别的"意思 ...
- Java多线程总结之由synchronized说开去(转)
这几天不断添加新内容,给个大概的提纲吧,方面朋友们阅读,各部分是用分割线隔开了的: synchronized与wait()/notify() JMM与synchronized ThreadLocal与 ...
- JQUERY省、市、县城市联动选择
JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...
- 使用HttpURLConnection向服务器发送post和get请求(转)
一.使用HttpURLConnection向服务器发送get请求 1.向服务器发送get请求 @Test publicvoid sendSms() throws Exception{ String m ...
- C++它 typedef void *HANDLE
阅读时编写代码的代码,经常看到一个代码: typedef void *HANDLE ,这是它背后的故事?怎么理解呢? 不明白的时候.这是非常美妙的感觉,后来我才知道这,这是typedef定义,就在vo ...