AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
来源:互联网 发布:淘宝支付密码怎么改换 编辑:程序博客网 时间:2024/06/05 18:22
首先,provider
, value
, constant
, service
, factory
他们都是provider!(decorator
小朋友先搬个小板凳坐在边上等会儿,现在还没轮到你出场哈~)
provider是干啥的?
provider可以为应用提供通用的服务,形式可以是常量,也可以是对象。
比如我们在controller里常用的$http
就是AngularJS框架提供的provider~
myApp.controller(‘MainController', function($scope, $http) { $http.get(…)}
在上面的代码里,就可以直接使用$http
包好的各种功能了~
provider
那我们自己想定制一个provider,怎么写呢~
//定义:$provide.provider('age', { start: 10, $get: function() { return this.start + 2; }});//或$provide.provider('age', function($filterProvider){ this.start = 10; this.$get = function() { return this.start + 2; };});//调用:app.controller('MainCtrl', function($scope, age) { $scope.age = age; //12});
provider的基本原则就是通过实现$get
方法来在应用中注入单例,使用的时候拿到的age
就是$get
执行后的结果。 上面例子中的两种定义方法都可以~
factory
大哥provider
每次出场太繁琐了,如果我就想定义个$get
,没别的乱七八糟的呢?这时候该二哥factory
出场了~
$provide.provider('myDate', { $get: function() { return new Date(); }});//可以写成$provide.factory('myDate', function(){ return new Date();});//调用:app.controller('MainCtrl', function($scope, myDate) { $scope.myDate = myDate; //current date});
直接第二个参数就是$get要对应的函数实现,代码简单了很多有没有?!
它是一个可注入的function
,它和service
的区别就是:factory
是普通function
,而service
是一个构造器(constructor
),这样Angular
在调用service
时会用new
关键字,而调用factory
时只是调用普通的function
,所以factory
可以返回任何东西,而service
可以不返回(可查阅new关键字的作用)
var app = angular.module('app', []); app.config(function ($provide) { $provide.factory('movie', function () { return { title: 'The Matrix'; } });}); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix');});
语法糖:
app.factory('movie', function () { return { title: 'The Matrix'; }});
factory
可以返回任何东西,它实际上是一个只有$get
方法的provider
service
这时候我又来劲儿了,我不仅就想定义个$get
,里面我还就返回个new出来的已有js类,三哥service
闪亮登场~
$provide.provider('myDate', { $get: function() { return new Date(); }});//可以写成$provide.factory('myDate', function(){ return new Date();});//可以写成$provide.service('myDate', Date);
对于这种需求,代码更简洁了是不是~~
它是一个可注入的构造器,在AngularJS
中它是单例的,用它在Controller
中通信或者共享数据都很合适
var app = angular.module('app' ,[]); app.config(function ($provide) { $provide.service('movie', function () { this.title = 'The Matrix'; });}); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix');});
语法糖:
app.service('movie', function () { this.title = 'The Matrix';});
在service
里面可以不用返回东西,因为AngularJS
会调用new
关键字来创建对象。但是返回一个自定义对象好像也不会出错。
value vs. constant
更直接的需求来了,我只想定义个$get
,而且就返回个常量~
这时候value
和constant
都可以做到~
$provide.value('pageCount', 7);$provide.constant('pageCount', 7);
兄弟俩功能一样?双胞胎?那怎么可能~
介绍区别前,先得把之前坐小板凳等着的decorator
叫出来~终于该出场了~
区别一:value
可以被修改,constant
一旦声明无法被修改
$provide.decorator('pageCount', function($delegate) { return $delegate + 1;});
decorator
可以用来修改(修饰)已定义的provider们,除了constant
~
通过底层实现代码看关系~
function provider(name, provider_) { if (isFunction(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (!provider_.$get) { throw Error('Provider ' + name + ' must define $get factory method.'); } return providerCache[name + providerSuffix] = provider_;} function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]);} function value(name, value) { return factory(name, valueFn(value)); } function constant(name, value) { providerCache[name] = value; instanceCache[name] = value;} function decorator(serviceName, decorFn) { var origProvider = providerInjector.get(serviceName + providerSuffix), orig$get = origProvider.$get; origProvider.$get = function() { var origInstance = instanceInjector.invoke(orig$get, origProvider); return instanceInjector.invoke(decorFn, null, {$delegate: origInstance}); };}
从上面的代码可以看出之前介绍的每种provider的特点,decorator
比较特殊,不算,除了constant
,另外几个最终调用的都是provider
~
总结
所有的供应商都只被实例化一次,也就说他们都是单例的
除了
constant
,所有的供应商都可以被装饰器(decorator
)装饰value
就是一个简单的可注入的值service
是一个可注入的构造器factory
是一个可注入的方法decorator
可以修改或封装其他的供应商,当然除了constant
provider
是一个可配置的factory
最后再总结一下provider哥儿几个的优点~
1. 为应用提供通用的服务,形式可以是常量或对象
2. 便于模块化
3. 便于单元测试
- AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)
- [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)
- AngularJS的自定义服务,factory、provider、service、constant、value等方法的区别
- AngularJS Service、Factory、Provider 的理解与使用区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- angularjs中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- angularjs中service、factory和provider的区别
- AngularJS中的Provider们:Service和Factory等的区别
- AngularJS中的Provider们:Service和Factory等的区别
- AngularJS中的Provider们:Service和Factory等的区别
- linux 操作系统版本 与 内核版本 对照表
- controller是否有线程保护措施
- Java数组/集合性能优化
- 网页存储web storage---购物车(会员登录)
- SODBASE CEP学习进阶篇(七)续:SODBASE CEP与Spark streaming集成-低延迟规则管理
- AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- hdu 5570 期望 概率详解
- iOS开发之多媒体API
- android SurfaceView绘制实现原理解析
- iPhone中使用NSLocalizedString实现国际化
- System.out.println和System.err.println区别
- 九度oj-1467-二叉排序树
- Android-DialogFragment对话框之登录
- android 加载等待Dialog