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

问题描述

服务，提供者和工厂 in AngularJS？

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

推荐答案

从AngularJS邮件列表我得到一个令人惊奇的线程，解释了服务对工厂vs提供商及其注入使用情况。编译答案：

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 的函数引用返回的值。

Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

语法： module.provider（'providerName'，function）;

结果：当将providerName声明为可注入参数将提供 （新的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.

请参阅此处提供的代码。

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);
}

所以工厂是一个负责创建价值的功能。请注意，工厂功能可以要求其他依赖关系。

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

但是，如果你想要更多的OO，并且有一个叫做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');
}

作为附注，服务，工厂和值均来自提供者。

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屋！