Angular 中的提供者和实例有什么区别？答案

【问题标题】：What is the difference between provider and instances in Angular?Angular 中的提供者和实例有什么区别？
【发布时间】：2016-12-14 23:44:06
【问题描述】：

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

正如您在配置块中看到的那样，它是这样写的：“您只能注入提供者（而不是实例）”。

这是什么意思？谁能解释一下提供者和实例之间的区别是什么？

【问题讨论】：

标签： javascript angularjs module config

【解决方案1】：

其实你的问题很好。为了简单起见，我们在 Angular JS 中定义服务来实现我们的功能。提供者是配置服务应该如何工作的方式之一。 Angular JS中还有一些概念，即Values、Constant、Factory、Service和Decorator，它们可以帮助我们以不同的方式拦截服务。请检查以下链接。

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

回到 Providers，它们用于定义应用程序范围的配置，这些配置甚至需要在应用程序启动之前完成。由于配置块是在加载 Angular JS 模块之前执行的，我们在它们下配置提供程序。由于到那时模块还没有加载，因此您无法访问配置块内的服务。

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

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

定义角色提供者

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

将角色提供者配置为用户

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

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

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

【讨论】：

谢谢...帮助我理解了。

【解决方案2】：

从这篇文章中窃取：AngularJS: Service vs provider vs factory - 绝对值得一读，以更好地了解 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');
}

【讨论】：

【解决方案3】：

快速回答：提供者将创建一个实例。在他们这样做之前，您可以在 config() 块中使用它们。对于您希望在启动期间更改 url 端点的数据提供者来说非常有用。

但您可以在运行new Something() 之前在“提供程序提供程序”部分运行一些配置代码。

Service Service、Service Factory 和 Service Value 都是 Provider 定义的快捷方式，但将配置部分隐藏在远离您的地方，直接进入对象的实例化（使用 new Something()）。

【讨论】：