Question

我正在努力让模块处理我正在构建的应用程序。

这是主文件

main.js

'use strict';
angular.module('clientPortalPublic',[
    'ngCookies',
    'ngResource',
    'ngAnimate',
    'clientPortalPublic.components'
    ]);

 angular.module('clientPortalPublic.components',[]);

我还有另一个文件switch-login-effect.js

'use strict';

angular.module('clientPortalPublic.components').directive('switchLoginEffect',['$timeout', function($timeout){

    //Content removed for clarification
}]);

这些文件的加载顺序是：

 <script type="application/javascript" src="public/components/switch-login-effect.js"></script>
<script type="application/javascript" src="public/main.js"></script>

我知道switch-login-effect.js应该稍后加载，因为需要主模块，但它是动态加载的，我不控制顺序。但是使用手动自举不应该对它进行角度处理吗？

这就是我引导它的方式

angular.element(document).ready(function() {
  angular.bootstrap(document, ['clientPortalPublic']);
});

如果我运行上面的代码，我得到：

错误：[$ injector：nomod]模块'clientPortalPublic.components'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

谢谢！

Answer 1

当switch-login-effect.js首先加载时，您正在声明一个不存在的模块的指令。看起来您只是通过添加或删除脚本来尝试动态控制clientPortalPublic.components模块中包含的元素，但我不认为已为此设置了角度的依赖关系。拥有这些依赖关系的一个主要原因是确切地知道你得到了什么。

如果可能，应在一个脚本文件中定义clientPortalPublic.components模块。如果您有各种组件，则可以为每个组件创建不同的模块，但应用程序模块的定义应该知道它所需的依赖项所获得的内容。由于一个原因，这会导致调试问题，＆＃34;为什么我的指令不起作用？我正在加载组件模块......＆＃34; （但是你错过了一个你无法知道你需要的脚本文件）

我真的不建议以这种方式创建您的应用，但如果您已经死定，您可以捕获错误并在开始时创建模块每个单独的组件文件（以及你的main.js，如果你实际上没有任何组件，但仍然想要模块），所以首先加载哪个组件并不重要：

try {
    angular.module('clientPortalPublic.components');
} catch (err) {
    angular.module('clientPortalPublic.components',[]);
}

或者更简单地只是使用javascript来查看它是否已被执行：

var componentsModule = componentsModule || 
    angular.module('clientPortalPublic.components',[]);

Answer 2

在阅读了一些棱角分明的良好做法并更加关注有角度的种子后，我让它发挥作用。

当你的结构类似于：

时，他们建议你做以下事情

app/
app/components
app/components/component1
app/components/component2

app.js => angular.module('main',['main.components']);
app/components/components.js => angular.module('main.components',['main.components.component1', 'main.components.component2']);
app/components/component1.js => angular.module('main.components.component1',[]);
app/components/component2.js => angular.module('main.components.component2',[]);

让这种结构有意义并且完美无缺。

：）

AngularJS加载模块

2 个答案: