我应该怎样使AngularJS配置的模块 [英] How should I make configurable modules in AngularJS

问题描述

我一直在摆弄AngularJS，我已经建立了指令和服务的小集合，我想打包成一个单一的JS文件，这样我可以在任何地方使用它们。

我有一些网站上特定的设置，我的模块将需要API调用，诸如此类的事情。我只是想知道是什么使配置的模块的角度的方式是。很显然，我不希望有修改我的可重复使用的JS文件为每个网站，因为那样的失败有它的目的。眼看作为值将继续保持它似乎像一个可怕的很多麻烦，在将它们作为对每个函数调用的参数每个网站一样的，我宁愿呆在从全局变量远尽可能。

我已经搜查了很多，因为我寻求答案的问题，到目前为止，我已经找到了最接近的模式是有我的可重复使用的模块依赖所谓的设置或东西不包括模块，然后定义模块在页面的JS文件，允许重复使用的模块，撤出它的值。 下面就来说明我的意思的例子。

这似乎倒退到我。这有点像具有全局值的函数值拉而不是在传递值作为参数。<​​/ P>

这真的是这样做的最好的办法，还是有别的选择吗？

解决方案

这听起来像你正在寻找提供商。

  

只有当你想要公开的应用程序开始之前必须提出申请范围配置的API应该使用提供配方。这通常是有趣只为可重用的服务，其行为可能需要在应用程序之间有所不同。

下面是一个供应商的一个非常简单的例子：

  myMod.provider（'问候'，函数（）{
  变种文字=你好，;  this.setText =功能（值）{
    文本=价值;
  };  这一点。$ GET =功能（）{
    复位功能（名称）{
      警报（文本+名）;
    };
  };
}）;
 

这将创建一个新的服务，就像你可能会 myMod.service 或 myMod.factory ，但提供一个额外的API，可在配置时间，即一个的setText 方法。你可以在配置块访问提供商：

  myMod.config（功能（greetingProvider）{
  greetingProvider.setText（你好那里）;
}）;
 

现在，当我们注入问候服务，角将调用提供商的 $ GET 办法（注射任何服务它要求在其参数），让您无论它返回;在这种情况下， $ GET 返回，当一个名字叫，会提醒与任何我们设置与的setText ：

  myMod.run（功能（贺卡）{
  问候语（福特prefect'）;
}）;//警告：你好那里，福特prefect
 

这是究竟有其他供应商，如 $ httpProvider 和 $ routeProvider 工作

有关供应商和一般依赖注入的更多信息，请查看这对依赖注入 SO问题。

I've been tinkering with AngularJS and I've built up a small collection of directives and services that I would like to package into a single JS file so that I can use them anywhere.

I have some website specific settings that my module will need for API calls and that sort of thing. I'm just wondering what the Angular way of making configurable modules is. Obviously I don't want to have to modify my reusable JS file for each website, as that kind of defeats the purpose of having it. Seeing as the values are going to remain the same for each website it seems like an awful lot of hassle to pass them in as an argument on each function call, and I'd rather stay away from global variables as much as possible.

I've searched a lot of questions for the answers I seek, and the closest pattern I've found so far is to have my reusable module be dependant on a not included module called "settings" or something and then define that module in the page's JS file, allowing the reusable module to pull the values from it. Here's an example to show what I mean.

This seems backwards to me. It's kind of like having a function pull values from global values instead of passing the values in as arguments.

Is this really the best way of doing this, or is there an alternative?

解决方案

It sounds like you're looking for a provider.

You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts. This is usually interesting only for reusable services whose behavior might need to vary slightly between applications.

Here's a very basic example of a provider:

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

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

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

This creates a new service, just like you might with myMod.service or myMod.factory, but provides an additional API that is available at config time—namely, a setText method. You can get access to the provider in config blocks:

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

Now, when we inject the greeting service, Angular will call the provider's $get method (injecting any services it asks for in its parameters) and gives you whatever it returns; in this case, $get returns a function that, when called with a name, will alert the name with whatever we've set with setText:

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

// Alerts: "Howdy there, Ford Prefect"

This is exactly how other providers, like $httpProvider and $routeProvider work.

For more information on providers and dependency injection in general, check out this SO question on dependency injection.

这篇关于我应该怎样使AngularJS配置的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！