AngularJS - 模块依赖,命名冲突 [英] AngularJS - module dependencies, naming clash

查看:21
本文介绍了AngularJS - 模块依赖,命名冲突的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个第三方模块,它们都定义了一个同名的工厂.很明显,我无法控制这些模块的命名,而不会求助于杂乱无章.

此外,我还有两个内部模块,每个模块都使用两个第三方模块中的一个作为依赖项(如下所示).我确信我无法从当前模块的依赖项中未列出的模块访问组件,但结果证明我错了.

这里即使 own1 依赖于 thirdParty1(其中 hello 定义为 hello world),它也会得到 <代码>你好(来自thirdParty2)在控制器中.其他模块对也是如此.

有什么方法可以隔离"模块,以便我只能使用我明确依赖的东西?如果没有,如果我可以随时访问任何东西(假设主应用程序模块将其作为其依赖项),那么拥有模块有什么意义?另外,如果我有两个组件名为 hello 的模块,我怎么知道要使用哪个?

这是用于 http://jsbin.com/vapuye/3/edit?html 的 jsbin,js,输出

angular.module('app', ['own1', 'own2']);//第三方模块angular.module('thirdParty1', []).factory('hello', function () {返回你好世界";});angular.module('thirdParty2', []).factory('hello', function () {返回你好";});//拥有"模块angular.module('own1', ['thirdParty1']).controller('Own1Ctrl', function(hello) {this.greet = 你好;});angular.module('own2', ['thirdParty2']).controller('Own2Ctrl', function(hello) {this.greet = 你好;});

结果:

<div ng-controller="Own1Ctrl as own1">Own1:{{ own1.greet }}

<div ng-controller="Own2Ctrl as own2">Own2:{{ own2.greet }}

是:

Own1:你好自己2:你好

解决方案

可以显式请求某个模块的工厂(无需依赖注入):

var injector = angular.injector(['thirdParty1']);var hello1 = injector.get('hello');var 注入器 = angular.injector(['thirdParty2']);var hello2 = injector.get('hello');

你也可以用这个,把第三方工厂包装成自己的工厂:

angular.module('own1', ['thirdParty1']).factory('hello1', function () {var 注入器 = angular.injector(['thirdParty1']);var hello = injector.get('hello');回你好;});angular.module('own2', ['thirdParty2']).factory('hello2', function () {var 注入器 = angular.injector(['thirdParty2']);var hello = injector.get('hello');回你好;});

这允许您在应用程序的所有其他部分使用 hello1hello2.

I have two third-party modules, both defining a factory with the same name. Obviously, I don't have any control over the naming of those modules without resorting to a kludge.

Additionally, I have two further, internal modules, each using a different one of the two third-party modules as a dependency (as below). I was sure that I was unable to access components from a module not listed in current module's dependencies, but it turned out I was wrong.

Here even if own1 depends on thirdParty1 (which has hello defined as hello world) it's getting hi there (from thirdParty2) in controller. The same is for the other modules' pair.

Is there any way to "isolate" modules so I can only use stuff that I explicitly depend on? If not, what's the point of having modules if I can reach anything at any time (assuming main app module has it as its dependency)? Also if I have two modules with components named hello how can I tell which is gonna be used?

Here is jsbin for that http://jsbin.com/vapuye/3/edit?html,js,output

angular.module('app', ['own1', 'own2']);

//third-party modules
angular.module('thirdParty1', []).factory('hello', function () {
  return 'hello world';
});

angular.module('thirdParty2', []).factory('hello', function () {
  return 'hi there';
});

// "own" modules
angular.module('own1', ['thirdParty1']).controller('Own1Ctrl', function(hello) {
  this.greet = hello;
});

angular.module('own2', ['thirdParty2']).controller('Own2Ctrl', function(hello) {
  this.greet = hello;
});

And the result of:

<body ng-app="app">
  <div ng-controller="Own1Ctrl as own1">
    Own1: {{ own1.greet }}
  </div>
  <div ng-controller="Own2Ctrl as own2">
    Own2: {{ own2.greet }}
  </div>
</body>

Is :

Own1: hi there
Own2: hi there

解决方案

You can request a factory of a certain module explicitly (without dependency injection):

var injector = angular.injector(['thirdParty1']);
var hello1 = injector.get('hello');

var injector = angular.injector(['thirdParty2']);
var hello2 = injector.get('hello');

You can also use this, to wrap the third party factories into own factories:

angular.module('own1', ['thirdParty1']).factory('hello1', function () {
  var injector = angular.injector(['thirdParty1']);
  var hello = injector.get('hello');
  return hello;
});

angular.module('own2', ['thirdParty2']).factory('hello2', function () {
  var injector = angular.injector(['thirdParty2']);
  var hello = injector.get('hello');
  return hello;
});

This allows you to use hello1 and hello2 in all other parts of your application.

这篇关于AngularJS - 模块依赖,命名冲突的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆