AngularJS:服务 vs 提供者 vs 工厂 [英] AngularJS: Service vs provider vs factory

问题描述

AngularJS 中的 Service、Provider 和 Factory 有什么区别?

What are the differences between a Service, Provider and Factory in AngularJS?

推荐答案

从 AngularJS 邮件列表中我得到了 一个很棒的主题，解释了服务、工厂和提供者以及它们的注入用法.编译答案:

From the AngularJS mailing list I got an amazing thread that explains service vs factory vs provider and their injection usage. Compiling the answers:

语法:module.service('serviceName', function);
结果:当将 serviceName 声明为可注入参数 时，您将获得该函数的一个实例.换句话说 new FunctionYouPassedToService().

语法:module.factory('factoryName', function);
结果:当将 factoryName 声明为可注入参数时，您将获得通过调用传递给 module.factory 的函数引用返回的值.

语法:module.provider('providerName', function);
结果:当将 providerName 声明为可注入参数时您将获得 (new ProviderFunction()).$get().在调用 $get 方法之前实例化构造函数 - ProviderFunction 是传递给 module.provider 的函数引用.

Syntax: module.provider( 'providerName', function );
Result: When declaring providerName as an injectable argument you will be provided with (new ProviderFunction()).$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.

提供者的优势在于它们可以在模块配置阶段进行配置.

Providers have the advantage that they can be configured during the module configuration phase.

有关提供的代码，请参阅此处.

See here for the provided code.

这是 Misko 的进一步解释:

Here's a great further explanation by Misko:

provide.value('a', 123);

function Controller(a) {
  expect(a).toEqual(123);
}

在这种情况下，注入器只是按原样返回值.但是如果你想计算这个值怎么办?然后使用工厂

In this case the injector simply returns the value as is. But what if you want to compute the value? Then use a factory

provide.factory('b', function(a) {
  return a*2;
});

function Controller(b) {
  expect(b).toEqual(246);
}

所以 factory 是一个负责创造价值的函数.请注意，工厂函数可以请求其他依赖项.

So factory is a function which is responsible for creating the value. Notice that the factory function can ask for other dependencies.

但是，如果您想要更面向对象并拥有一个名为 Greeter 的课程，该怎么办?

But what if you want to be more OO and have a class called Greeter?

function Greeter(a) {
  this.greet = function() {
    return 'Hello ' + a;
  }
}

然后实例化你必须写

provide.factory('greeter', function(a) {
  return new Greeter(a);
});

然后我们可以像这样在控制器中要求'greeter'

Then we could ask for 'greeter' in controller like this

function Controller(greeter) {
  expect(greeter instanceof Greeter).toBe(true);
  expect(greeter.greet()).toEqual('Hello 123');
}

但这太罗嗦了.一种更短的写法是 provider.service('greeter', Greeter);

But that is way too wordy. A shorter way to write this would be provider.service('greeter', Greeter);

但是如果我们想在注入之前配置 Greeter 类怎么办?然后我们可以写

But what if we wanted to configure the Greeter class before the injection? Then we could write

provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
    salutation = s;
  }

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) {
    return new Greeter(a);
  };
});

然后我们可以这样做:

angular.module('abc', []).config(function(greeter2Provider) {
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) {
  expect(greeter2.greet()).toEqual('Halo 123');
}

顺便说一下，service、factory 和 value 都来自提供者.

As a side note, service, factory, and value are all derived from provider.

provider.service = function(name, Class) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.instantiate(Class);
    };
  });
}

provider.factory = function(name, factory) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.invoke(factory);
    };
  });
}

provider.value = function(name, value) {
  provider.factory(name, function() {
    return value;
  });
};

这篇关于AngularJS:服务 vs 提供者 vs 工厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！