AngularJS之使用服务封装
来源:互联网 发布:css布局 书籍 知乎 编辑:程序博客网 时间:2024/06/05 10:23
创建服务组件
在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记:
//定义构造函数
var myServiceProvider = function(){
this.$get = function(){
return ….
};
};
//在模块中登记
angular.module(“myModule”,[])
.provider(“myService”,myServiceProvider);
可配置的服务
有时我们希望服务在不同的场景下可以有不同的行为,这意味着服务可以进行配置。
比如,我们希望小计算器可以根据不同的本地化区域,给计算结果追加货币符号前缀, 那么需要在这个服务创建之前,首先配置本地化区域的值,然后在具体的计算中, 根据这个值选择合适的货币符号。
AngularJS使用模块的config()方法对服务进行配置,需要将实例化的服务提供者 (而不是服务实例)注入到配置函数中:
angular.module(“myModule”,[])
.config([“myServiceProvider”,function(myServiceProvider){
//do some configuration.
}]);
注意:服务提供者provider对象在注入器中的登记名称是:服务名+Provider。 例如:
服务定义语法糖
使用模块的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;
});
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之http服务
- AngularJs 服务之$filter
- angularJS之自定义服务与fliter的混合使用
- AngularJS初学之:服务(Service)
- AngularJS使用之过滤器
- 【AngularJS】——核心特性之服务
- [java学习10]angularJS之服务练习
- AngularJS内置的一些服务之$http
- AngularJS学习笔记之--注册服务
- angularJS中$q服务之promise
- 五、AngularJS 之服务(Service)
- angularjs 服务
- AngularJs服务
- AngularJS 服务
- AngularJS服务
- AngularJs服务
- 原生JS添加鼠标事件
- 数字的大写字母的乱序整理
- Android Native嵌入React Native模块
- uva401Palindromes(回文串和镜像串的判断)
- 图片处理,圆形圆角描边
- AngularJS之使用服务封装
- Vim快速选中、删除、复制引号或括号中的内容
- flume+kafka+hdfs日志系统
- 七.Scala 运算符
- Android 动画-Interpolator和TypeEvaluator
- kubenetes中指定web服务器使用的数据库(集群配置管理方案--ConfigMap)
- Android异步消息处理 (Handler)
- vijos——1214伤心的AsukaNoKaze
- Ajax状态值及状态码