原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/
什么是Provider?
AngularJS docs 是这样定义provider的:
provider是一个对象, 它有一个$get()方法. injector 调用$get方法以此来创建一个service的实例. Provider还有一些其他的方法用来配置provider.
AngularJS 使用 $provide 注册新的provider. providers 基本上都会创建一个新的实例, 但是每一个provider只有一个实例. $provide 有6种创建自定义provider的方法, 下面我会分别解释这6种方法的用法. 6种方法如下:
Constant
constant能被injected到任何地方. constant不会被decorator拦截, 这一位这constant的值是永远不变的.
var app = angular.module(‘app‘, []); app.config(function ($provide) { $provide.constant(‘movieTitle‘, ‘The Matrix‘); }); app.controller(‘ctrl‘, function (movieTitle) { expect(movieTitle).toEqual(‘The Matrix‘); });
AngularJS提供了一种更简便的方便用来创建constant. 你可以将上面3至5行的代码重写为:
app.constant(‘movieTitle‘, ‘The Matrix‘);
Value
value是一个简单的可被注入的值. value可以是string, number, function. 和constant不同的是value不能被注入到configurations, 且value能被decorators拦截.
var app = angular.module(‘app‘, []); app.config(function ($provide) { $provide.value(‘movieTitle‘, ‘The Matrix‘) }); app.controller(‘ctrl‘, function (movieTitle) { expect(movieTitle).toEqual(‘The Matrix‘); })
value也用一个简单的写法
app.value(‘movieTitle‘, ‘The Matrix‘);
Service
service是一个可以注入的构造函数. service是 singleton 的, 只会被创建一次. Services 用来给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‘); });
service也有一个简单的写法:
app.service(‘movie‘, function () { this.title = ‘The Matrix‘; });
Factory
factory是以个可注入的function. factory和service非常相似, 也是单例的. a factory是一个简单的 provider 只有$get方法.
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‘); });
factory也有一个简单的写法
app.factory(‘movie‘, function () { return { title: ‘The Matrix‘; } });
Decorator
decorator可以修改封装其它的providers. 注意了constant不能被装饰.
var app = angular.module(‘app‘, []); app.value(‘movieTitle‘, ‘The Matrix‘); app.config(function ($provide) { $provide.decorator(‘movieTitle‘, function ($delegate) { return $delegate + ‘ - starring Keanu Reeves‘; }); }); app.controller(‘myController‘, function (movieTitle) { expect(movieTitle).toEqual(‘The Matrix - starring Keanu Reeves‘); });
Provider
provider是所有providers中最复杂的. 可以有负责的creation function和配置选项. provider是一个可配置的factory. provider接受一个对象或构造函数.
var app = angular.module(‘app‘, []); app.provider(‘movie‘, function () { var version; return { setVersion: function (value) { version = value; }, $get: function () { return { title: ‘The Matrix‘ + ‘ ‘ + version } } } }); app.config(function (movieProvider) { movieProvider.setVersion(‘Reloaded‘); }); app.controller(‘ctrl‘, function (movie) { expect(movie.title).toEqual(‘The Matrix Reloaded‘); });
总结
- 所有的providers只会被实例化一次. 这一位着他们都是单例的.
- 所有的providers 除了constant都可以被decorated.
- constant是以个值, 可以被注入到任意地方. constant的值不能被改变.
- value是一个简单的可注入的值.
- service是一个可注入的构造函数.
- factory是以个可注入的function.
- decorator可以修改封装其它的providers除了constant.
- provider是一个可配置的factory.