AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解

首先，provider,value,constant,service,factory他们都是provider！（decorator小朋友先搬个小板凳坐在边上等会儿，现在还没轮到你出场哈~）

provider是干啥的？

provider可以为应用提供通用的服务，形式可以是常量，也可以是对象。

比如我们在controller里常用的$http就是AngularJS框架提供的provider～

 
      1 
      myApp.controller(‘MainController', function($scope,$http) { 
     
      2 
      $http.get(…) 
     
      3 
      }

在上面的代码里，就可以直接使用$http包好的各种功能了～

provider

那我们自己想定制一个provider，怎么写呢～

 
      01 
      //定义: 
     
      02 
      $provide.provider('age',{ 
     
      03 
       start: 10, 
     
      04 
       $get:  function() { 
     
      05 
         return this.start + 2; 
     
      06 
       } 
     
      07 
      }); 
     
      08 
      //或 
     
      09 
      $provide.provider('age',function($filterProvider){ 
     
      10 
       this.start = 10; 
     
      11 
       this.$get = function() { 
     
      12 
         return this.start + 2; 
     
      13 
       }; 
     
      14 
      }); 
     
      15 
      //调用: 
     
      16 
      app.controller('MainCtrl',function($scope,age) { 
     
      17 
       $scope.age = age; //12 
     
      18 
      });

provider的基本原则就是通过实现$get方法来在应用中注入单例，使用的时候拿到的age就是$get执行后的结果。上面例子中的两种定义方法都可以～

factory

大哥provider每次出场太繁琐了，如果我就想定义个$get，没别的乱七八糟的呢？这时候该二哥factory出场了～

 
      01 
      $provide.provider('myDate',{ 
     
      02 
       $get:  function() { 
     
      03 
         return new Date(); 
     
      04 
       } 
     
      05 
      }); 
     
      06 
      //可以写成 
     
      07 
      $provide.factory('myDate',function(){ 
     
      08 
       return new Date(); 
     
      09 
      }); 
     
      10 
      //调用: 
     
      11 
      app.controller('MainCtrl',myDate) { 
     
      12 
       $scope.myDate = myDate; //current date 
     
      13 
      });

直接第二个参数就是$get要对应的函数实现，代码简单了很多有没有？！

service

这时候我又来劲儿了，我不仅就想定义个$get，里面我还就返回个new出来的已有js类，三哥service闪亮登场～

 
      01 
      $provide.provider('myDate',function(){ 
     
      08 
       return new Date(); 
     
      09 
      }); 
     
      10 
      //可以写成 
     
      11 
      $provide.service('myDate',Date);

对于这种需求，代码更简洁了是不是～～

value vs. constant

更直接的需求来了，我只想定义个$get，而且就返回个常量～

这时候value和constant都可以做到～

 
      1 
      $provide.value('pageCount',7); 
     
      2 
      $provide.constant('pageCount',7);

兄弟俩功能一样？双胞胎？那怎么可能～

介绍区别前，先得把之前坐小板凳等着的decorator叫出来～终于该出场了～

区别一：`value`可以被修改，`constant`一旦声明无法被修改

 
      1 
      $provide.decorator('pageCount',function($delegate) { 
     
      2 
       return $delegate + 1; 
     
      3 
      });

decorator可以用来修改（修饰）已定义的provider们，除了constant～

区别二：`value`不可在`config`里注入，`constant`可以

 
      1 
      myApp.config(function(pageCount){ 
     
      2 
       //可以得到constant定义的'pageCount' 
     
      3 
      });

关于config，之后会专门介绍～

通过底层实现代码看关系～

 
      01 
      function provider(name,provider_) { 
     
      02 
       if (isFunction(provider_)) { 
     
      03 
         provider_ = providerInjector.instantiate(provider_); 
     
      04 
       } 
     
      05 
       if (!provider_.$get) { 
     
      06 
         throw Error('Provider '  + name + ' must define $get factory method.'); 
     
      07 
       } 
     
      08 
       return providerCache[name + providerSuffix] = provider_; 
     
      09 
      } 
     
      10 
      function factory(name,factoryFn) { return provider(name,{ $get: factoryFn }); } 
     
      11 
      function service(name,constructor) { 
     
      12 
       return factory(name,['$injector',function($injector) { 
     
      13 
         return $injector.instantiate(constructor); 
     
      14 
       }]); 
     
      15 
      } 
     
      16 
      function value(name,value) { return factory(name,valueFn(value)); } 
     
      17 
      function constant(name,value) { 
     
      18 
       providerCache[name] = value; 
     
      19 
       instanceCache[name] = value; 
     
      20 
      } 
     
      21 
      function decorator(serviceName,decorFn) { 
     
      22 
       var origProvider = providerInjector.get(serviceName + providerSuffix), 
     
      23 
       orig$get = origProvider.$get; 
     
      24 
       origProvider.$get = function() { 
     
      25 
         var origInstance = instanceInjector.invoke(orig$get,origProvider); 
     
      26 
         return instanceInjector.invoke(decorFn,null,{$delegate: origInstance}); 
     
      27 
       }; 
     
      28 
      }

从上面的代码可以看出之前介绍的每种provider的特点，decorator比较特殊，不算，除了constant，另外几个最终调用的都是provider～

AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解

provider

factory

service

value vs. constant

区别一：`value`可以被修改，`constant`一旦声明无法被修改

区别二：`value`不可在`config`里注入，`constant`可以

通过底层实现代码看关系～

最后再总结一下provider哥儿几个的优点～

1. 为应用提供通用的服务，形式可以是常量或对象

2. 便于模块化

3. 便于单元测试

猜你在找的Angularjs相关文章

AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解

provider

factory

service

value vs. constant

区别一：value可以被修改，constant一旦声明无法被修改

区别二：value不可在config里注入，constant可以

通过底层实现代码看关系～

最后再总结一下provider哥儿几个的优点～

1. 为应用提供通用的服务，形式可以是常量或对象

2. 便于模块化

3. 便于单元测试

猜你在找的Angularjs相关文章

区别一：`value`可以被修改，`constant`一旦声明无法被修改

区别二：`value`不可在`config`里注入，`constant`可以