[译]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
• value
• service
• factory
• decorator
• provider

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.