当前AngularJS模块的组织需要循环模块引用 [英] Current AngularJS module organization requires circular module references
问题描述
我有一个使用ngTable和UI自举一个SPA。页面引用在顶层模块定义顶级控制器，并且在其它的模块中定义的几个嵌套控制器。有从嵌套控制器服务或范围的变量在顶层控制器几个明确引用，因此嵌套模块具有到顶层模块的引用。然而，为了这个运行没有错误，我要引用所有嵌套模块从顶层模块。
I have a SPA that uses ngTable and ui-bootstrap. The page references a top-level controller defined in a top-level module, and several nested controllers that are defined in other modules. There are several clear references from the nested controllers to services or scope variables in the top-level controller, so the nested modules have references to the top-level module. However, in order for this to run without error, I have to reference all of the nested modules from the top-level module.
如果我不从顶层模块引用嵌套的模块，我得到这样一个错误：
If I don't reference the nested modules from the top-level module, I get an error like this:
Error: [ng:areq] Argument 'DataSourcesCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.4/ng/areq?p0=DataSourcesCtrl&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:78
assertArg@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1358
assertArgFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1369
@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6682
applyDirectivesToNode/nodeLinkFn/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6098
forEach@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:307
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6085
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5551
publicLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5459
.link@http://run.plnkr.co/plunks/EBVfG1gWYv7xf8sa5v8a/ui-bootstrap-tpls-0.10.0.js:2822
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6140
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5548
publicLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5459
boundTranscludeFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:5570
controllersBoundTransclude@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:6160
ngRepeatAction@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:18996
$watchCollectionAction@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11449
Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11552
Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:11803
bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1297
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:3644
bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1296
bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1309
angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:1258
@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js:20306
n.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
n.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
K@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2
<div class="tab-pane ng-scope" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
正如你可以在我的
As you can see in my plunkr that demonstrates this, the "DataSourcesCtrl" is a controller defined in 'DataSourcesModule' in "dataSourcesMod.js". If you comment out the line near the top of "diagapp.js", it will run without error.
这就是所谓的diagapp.js的顶部看起来像：
This is what the top of "diagapp.js" looks like:
var diagapp = angular.module("DiagApp", ['ui.bootstrap'
// , 'DataSourcesModule' // Comment out this line to demonstrate problem
]);
我想我现在明白为什么我要加载所有的顶层模块中的组件，否则有对加载的模块没有其他办法。然而，当我这样做，我结束了圆形模块的引用，这似乎是错误的。没有直接的顶层模块里面引用了嵌套模块的任何
I guess I can understand now why I have to load all of the modules in the top-level module, because otherwise there's no other way for those modules to be loaded. However, when I do that, I end up with circular module references, which seems wrong. Nothing directly inside the top-level module references anything in the nested modules.
好像我需要调整我的模块组织。什么是对付它的最好方法？
It seems like I need to adjust my module organization. What is the best way to deal with this?
推荐答案
我猜明显的，合理的建议是有加载所有其他所需模块的页面，与任何配置设置沿顶层模块该模块，但是其中没有任何通过任何其他模块的直接需要
I guess the obvious and reasonable advice would be to have a top-level module that loads all the other required modules for the page, along with any configuration settings for that module, but which has nothing directly needed by any of the other modules.
在这个例子中，这将意味着分离出顶级DiagApp模块的一些作品成DiagMod模块。这将包括其他模块需要使用任何组件。如果顶层模块不需要任何配置设置，则顶层模块将只具有单一的行指定页上使用的所有模块，包括新的DiagMod模块
In this example, that would mean separating out some pieces of the top-level "DiagApp" module into a "DiagMod" module. This would include any components that the other modules need to use. If the top-level module doesn't need any configuration settings, then the top-level module would just have the single line specifying all the modules used on the page, including the new "DiagMod" module.
这篇关于当前AngularJS模块的组织需要循环模块引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
