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

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

问题描述

我有两个的第三方模块,两者定义具有相同名称的工厂。很显然,我没有对这些模块的命名任何控制,而不诉诸一个杂牌组装电脑。

此外,我有两个进一步的内部模块,两者的第三方模块作为依赖的每个使用一个不同(如下)。我确信我无法在当前模块的依赖关系中未列出的模块访问组件,但事实证明我错了。

下面即使 own1 取决于 thirdParty1 (其中有你好定义为的Hello World ),它变得您好(从 thirdParty2 )。这同样适用于其他模块的对。

有什么办法孤立模块,所以我只能用的东西,我明确依赖?如果没有,什么是有模块的点,如​​果我能达到在任何时间任何东西(假设主要的应用程序模块作为其依赖关系)?此外,如果我有两个模块由指定组件你好我怎么能分出哪个是会使用吗?

下面是jsbin为<一个href=\"http://jsbin.com/vapuye/3/edit?html,js,output\">http://jsbin.com/vapuye/3/edit?html,js,output

  angular.module('应用',['own1','own2']);//第三方模块
angular.module('thirdParty1',[])。工厂('你好',函数(){
  返回的'Hello World';
});angular.module('thirdParty2',[])。工厂('你好',函数(){
  返回'您好';
});//自己的模块
angular.module('own1',['thirdParty1'])。控制器('Own1Ctrl',函数(你好){
  this.greet =您好;
});angular.module('own2',['thirdParty2'])。控制器('Own2Ctrl',函数(你好){
  this.greet =您好;
});

和的结果是:

 &LT;机身NG-应用=应用程序&GT;
  &LT; D​​IV NG控制器=Own1Ctrl为own1&GT;
    Own1:{{own1.greet}}
  &LT; / DIV&GT;
  &LT; D​​IV NG控制器=Own2Ctrl为own2&GT;
    Own2:{{own2.greet}}
  &LT; / DIV&GT;
&LT; /身体GT;

是:

  Own1:您好
Own2:您好


解决方案

您可以要求工厂一定的模块明确(不依赖注入):

  VAR喷油器= angular.injector(['thirdParty1']);
VAR hello1 = injector.get('你好');变种注射器= angular.injector(['thirdParty2']);
VAR hello2 = injector.get('你好');

您也可以利用这一点,给第三方工厂包装成自己的工厂:

  angular.module('own1',['thirdParty1'])。工厂('hello1',函数(){
  变种注射器= angular.injector(['thirdParty1']);
  VAR你好= injector.get('你好');
  返回你好;
});angular.module('own2',['thirdParty2'])。工厂(hello2,函数(){
  变种注射器= angular.injector(['thirdParty2']);
  VAR你好= injector.get('你好');
  返回你好;
});

这使您可以使用 hello1 hello2 在应用程序中的所有其他部分。

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天全站免登陆