原文: 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.