判官007 发表于 2017-2-23 12:30:36

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

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

[*]//定义构造函数
[*]var myServiceProvider = function(){
[*] this.$get = function(){
[*] return ....
[*] };
[*]};
[*]//在模块中登记
[*]angular.module("myModule",[])
[*].provider("myService",myServiceProvider);
  示例(http://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第一页)定义了一个支持四则运算的服务: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://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第四页)预置了使用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://www.dwz.cn/26R4S5中“使用服务封装可复用代码”第五页)预置了使用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()方法中。
  参考资料:http://www.dwz.cn/26R4S5
页: [1]
查看完整版本: AngularJS之使用服务封装可复用代码