Angular JS - service, factory & provider

Posted on 2017-10-27

~~Edit~~

service

在AngularJS中service是单例的，所以通常用service在controller之间，甚至模块之间来共享数据。

angular.module('app', [])
  .controller('ctrl', Ctrl)
  .service('CustomService', CustomService);
function CustomService(){
    const service = this
    service.a = "test"
}
Ctrl.$inject = ['CustomService']
function Ctrl(CustomService){
    console.log(CustomService.a)
}

前面一个字符串是这个service的名字，后面一个是这个service的构造函数。可以如上在controller中使用。

factory

工厂函数，可以用来生成任意想要的东西，当其返回一个service实例时，和.service作用是相同的，如下

ShoppingListController2.$inject = ['ShoppingListFactory'];
function ShoppingListController2(ShoppingListFactory) {
  var list2 = this;
  // Use factory to create new shopping list service
  var shoppingList = ShoppingListFactory(3);
  ...
}
function ShoppingListFactory() {
  var factory = function (maxItems) {
    return new ShoppingListService(maxItems);
  };
  return factory;
}

provider

factory其实是一种特殊的provider。看Angular JS的实现：

function factory(name, factoryFn, enforce) {
  return provider(name, {
    $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
  });
}

factory函数都是用provider来实现的。
一个provider函数通常如下定义：

function ServiceProvider() {
  var provider = this;
  provider.config = {…};
  provider.$get = function () {
    var service =
      new Service(provider.config.prop);
    return service;
  };
}

provider.$get来提供factory功能。它还能提供其他的配置项。然后provider还有一个好处是，在module.config函数中，只能inject provider。.config是在module定义以后，先于其他服务，立即运行的。如下：

angular.module('app', [])
  .controller('ctrl', Ctrl)
  .provider('Service', ServiceProvider)
  .config(Config);
Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
  ServiceProvider.config.prop = 'value';
};

这样的话，在$get实例化的service就能根据模块的不同来定制不同的功能。