我应该如何在 AngularJS 中制作可配置模块

Posted 2023-02-22

【中文标题】我应该如何在 AngularJS 中制作可配置模块

【英文标题】：How should I make configurable modules in AngularJS

【发布时间】：2014-06-29 06:51:08

【问题描述】：

我一直在修改 AngularJS，我已经建立了一小部分指令和服务，我想将它们打包到一个 JS 文件中，以便我可以在任何地方使用它们。

我有一些特定于网站的设置，我的模块将需要这些设置来进行 API 调用等。我只是想知道制作可配置模块的 Angular 方法是什么。显然，我不想为每个网站修改我的可重用 JS 文件，因为这违背了拥有它的目的。鉴于每个网站的值将保持不变，将它们作为每个函数调用的参数传递似乎非常麻烦，我宁愿尽可能远离全局变量。

我已经搜索了很多问题来寻找我想要的答案，到目前为止我发现的最接近的模式是让我的可重用模块依赖于一个名为“设置”或其他东西的未包含模块，然后定义它页面的 JS 文件中的模块，允许可重用​​模块从中提取值。 Here's an example to show what I mean.

这对我来说似乎倒退了。这有点像让函数从全局值中提取值，而不是将值作为参数传递。

这真的是最好的方法吗，还是有替代方法？

【参考方案1】：

听起来您正在寻找a provider。

仅当您希望公开 API 以进行必须在应用程序启动之前进行的应用程序范围配置时，才应使用 Provider 配方。这通常只适用于其行为可能需要在应用程序之间略有不同的可重用服务。

这是一个非常基本的提供者示例：

myMod.provider('greeting', function() 
  var text = 'Hello, ';

  this.setText = function(value) 
    text = value;
  ;

  this.$get = function() 
    return function(name) 
      alert(text + name);
    ;
  ;
);

这将创建一个新服务，就像您可能使用 myMod.service 或 myMod.factory 一样，但提供了一个在配置时可用的附加 API，即 setText 方法。您可以在config 块中访问提供程序：

myMod.config(function(greetingProvider) 
  greetingProvider.setText("Howdy there, ");
);

现在，当我们注入greeting 服务时，Angular 将调用提供者的$get 方法（在其参数中注入它所要求的任何服务）并为您提供它返回的任何内容；在这种情况下，$get 返回一个函数，当使用名称调用该函数时，将使用我们使用 setText 设置的任何内容来提醒该名称：

myMod.run(function(greeting) 
  greeting('Ford Prefect');
);

// Alerts: "Howdy there, Ford Prefect"

这正是其他提供商的工作方式，例如 $httpProvider 和 $routeProvider。

有关提供程序和依赖注入的更多信息，请查看this SO question on dependency injection。

【讨论】：

这听起来正是我所需要的。周末我似乎完全忘记了如何在 Angular 中进行 DI，所以我会复习一下，然后从那里报告。

@YM_Industries 您的代码运行良好，但您的 $get 正在返回 settings.password，这是未定义的。您的意思是返回 settings 吗？

@YM_Industries 我更新了script.js 来演示：plnkr.co/edit/L0SKCink67ZqK1hmYjoR?p=preview

@YM_Industries 是的，因为您将其声明为provider。 （从技术上讲，每一个服务，无论你如何创建它，都会有一个提供者，但只有那些使用.provider 创建的服务才有意义）

@YM_Industries 没问题！如果遇到问题，请给我a ping。