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


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

我有一些网站特定的设置,我的模块将需要API调用等等。我只是想知道Angular制作可配置模块的方法是什么。显然,我不想为每个网站修改我的可重用JS文件,因为这样做会破坏它的目的。看到每个网站的值保持不变,将每个函数调用作为参数传递它们似乎是一件非常麻烦的事情,而且我宁愿尽可能远离全局变量。

我已经搜索了很多问题以寻找我所寻求的答案,而我迄今为止发现的最接近的模式是让我的可重用模块依赖于一个名为“settings”之类的未包含的模块,然后定义该模块。页面的JS文件,允许可重用​​模块从中提取值。 这是一个展示我的意思的例子。

这似乎是我的倒退。这有点像从全局值中获取函数pull值而不是将值作为参数传递。

这真的是最好的方法吗,还是有替代方案?


10216
2018-05-12 02:09


起源



答案:


听起来你正在寻找 提供者

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

这是提供者的一个非常基本的例子:

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,即a 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 工作。

有关提供程序和依赖项注入的更多信息,请查看 关于依赖注入的这个问题


11
2018-05-12 02:20



这听起来就像我需要的那样。我似乎已经完全忘记了周末如何在Angular中进行DI,所以我会仔细研究并从那里报告。 - Joshua Walsh
@YM_Industries你的代码工作正常,但你的代码 $get 正在回归 settings.password,这是未定义的。你的意思是回来吗? settings 代替? - Michelle Tilley
@YM_Industries我已经更新了 script.js 展示: plnkr.co/edit/L0SKCink67ZqK1hmYjoR?p=preview - Michelle Tilley
@YM_Industries是的,因为你声明它是一个 provider。 (从技术上讲,无论你如何创建它,每一项服务都会获得一个提供者,但只有那些服务才能创建 .provider 做任何有意义的事) - Michelle Tilley
@YM_Industries没问题!给我吗 一个ping 如果你遇到问题。 - Michelle Tilley


答案:


听起来你正在寻找 提供者

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

这是提供者的一个非常基本的例子:

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,即a 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 工作。

有关提供程序和依赖项注入的更多信息,请查看 关于依赖注入的这个问题


11
2018-05-12 02:20



这听起来就像我需要的那样。我似乎已经完全忘记了周末如何在Angular中进行DI,所以我会仔细研究并从那里报告。 - Joshua Walsh
@YM_Industries你的代码工作正常,但你的代码 $get 正在回归 settings.password,这是未定义的。你的意思是回来吗? settings 代替? - Michelle Tilley
@YM_Industries我已经更新了 script.js 展示: plnkr.co/edit/L0SKCink67ZqK1hmYjoR?p=preview - Michelle Tilley
@YM_Industries是的,因为你声明它是一个 provider。 (从技术上讲,无论你如何创建它,每一项服务都会获得一个提供者,但只有那些服务才能创建 .provider 做任何有意义的事) - Michelle Tilley
@YM_Industries没问题!给我吗 一个ping 如果你遇到问题。 - Michelle Tilley