angularjs - AngularJS：服务vs提供程序vs工厂(AngularJS: Service vs provider vs factory)

Question

AngularJS中的Service ， Provider和Factory有什么区别？

  ask by Lior translate from so

Answer 1

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

(从AngularJS邮件列表中，我得到了一个很棒的线程 ，它解释了服务，工厂，提供者及其注入用法。)

Compiling the answers:

(汇编答案：)

Services (服务)

Syntax: module.service( 'serviceName', function );

(语法： module.service( 'serviceName', function );)
Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function.

(结果：在将serviceName声明为可注入参数时，将为您提供该函数的实例。)

In other words new FunctionYouPassedToService() .

(换句话说， new FunctionYouPassedToService() 。)

Factories (工厂工厂)

Syntax: module.factory( 'factoryName', function );

(语法： 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 .

(结果：当将factoryName声明为可注入参数时，将为您提供通过调用传递给module.factory的函数引用而返回的值 。)

Providers (提供者)

Syntax: module.provider( 'providerName', function );

(语法： module.provider( 'providerName', function );)
Result: When declaring providerName as an injectable argument you will be provided with (new ProviderFunction()).$get() .

(结果：在将providerName声明为可注入参数时，将为您提供 (new ProviderFunction()).$get() 。)

The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.

(被称为$ get方法之前，构造函数实例化- ProviderFunction是传递给module.provider函数引用。)

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

(提供程序的优点是可以在模块配置阶段进行配置。)

See here for the provided code.

(有关提供的代码，请参见此处 。)

Here's a great further explanation by Misko:

(这是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.

(因此， factory是负责创造价值的功能。)

Notice that the factory function can ask for other dependencies.

(注意，工厂函数可以要求其他依赖项。)

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

(但是，如果您想成为更多面向对象并开设名为Greeter的课程，该怎么办？)

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

Then to instantiate you would have to write

(然后要实例化，您必须编写)

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

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

But that is way too wordy.

(但这太罗y了。)

A shorter way to write this would be provider.service('greeter', Greeter);

(provider.service('greeter', Greeter);可以写为一个简短的方法provider.service('greeter', Greeter);)

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

(但是，如果我们想在注射之前配置Greeter类，该怎么办？)

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

Then we can do this:

(然后我们可以这样做：)

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.

(附带说明一下， service ， factory和value都是从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;
  });
};