在Angular中，提供者和实例的区别是什么?

Question

我是Angular的新手。我正在学习模块的配置块和运行块。

请看下面的代码:

angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
});

正如你在配置块中看到的那样，它是这样写的:"你只能注入提供商(不是实例)"。

这是什么意思?有人能解释一下提供者和实例之间的区别吗?

Answer 1

其实你的问题很好。为了简单起见，我们在Angular JS中定义了服务来实现我们的特性。Provider是配置服务应该如何工作的一种方式。Angular JS中还有一些概念，即值(Values)、常量(Constants)、工厂(Factory)、服务(Service)和装饰器(Decorator)，它们可以帮助我们以不同方式拦截服务。请看下面的链接。

https://docs.angularjs.org/guide/providers

回到provider，它们被用来定义应用范围内的配置，这些配置甚至需要在应用启动之前就完成。因为配置块是在加载Angular JS模块之前执行的，所以我们在它们下面配置提供商。因为到那时模块还没有被加载，所以你不能在配置块中访问服务。

运行块会在所有模块都被$injector加载后执行。一旦你进入一个运行块，你就不能再配置你的提供商了，因为你的服务无论如何都会被加载。这就是你不能在运行块中访问提供商的原因。

让我们看一个例子。我设计了我的应用程序来支持用户和管理屏幕。但是与它们相关的特性是在它们各自的服务中定义的。我希望在用户登录时只加载适当的服务。我们使用提供程序实现这一点，如下所示。

定义rolesProvider

myApp.provider("roles", function rolesProvider(){
var role;
this.setRole = function(value) {
role = value;
}
this.$get = function rolesFactory() {
if(role === "user") {
return new userRole();
} else {
return new adminRole();
}
}
});

将rolesProvider配置为用户

myApp.config(["rolesProvider"], function(rulesProvider){
rulesProvider.setRole("user"); 
});

当应用程序启动时，我的应用程序将被配置为以用户而不是管理员身份运行。

如果你需要更多的解释，请告诉我。

Answer 2

摘自这篇文章:AngularJS:服务vs提供商vs工厂——为了更好地理解不同类型的提供商在angular中所扮演的角色，绝对值得一读。

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

例如:

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) { //When injected into a controller or service, this is what will get called.
    return new Greeter(a);
  };
});

那么你可以这样配置上面的内容:

angular.module('abc', []).config(function(greeter2Provider) { //Provider injected
  greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) { //Accessing the actual service exposed by the provider.$get
  expect(greeter2.greet()).toEqual('Halo 123');
}

Answer 3

快速回答:提供商将创建一个实例。在此之前，您可以在config()块中使用它们。如果你想在启动过程中更改url端点，这对数据提供程序非常有用。

但是你可以在new Something()运行之前，在"Provider Provider "部分运行一些配置代码。

Service Service、Service Factory和Service Value都是Provider定义的快捷方式，但是它们将配置部分隐藏起来，直接指向对象的实例化(使用new Something())。