[译]AngularJS中几种Providers(Factory, Service, Provider)的区别

原文: 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.
上一篇:RF - selenium - 常用关键字


下一篇:Wormholes