Question

我的名字模块不可用错误。

现在我的情况是，在开发过程中，我的文件可能会以随机顺序加载（使用grunt工具injector）。所以我可以在foo.module.js中声明模块，在foo.js中声明实现。我可能先加载foo.js。

foo.js

angular.module('Foo').config( //...

foo.module.js

angular.module('Foo', [
  'ngRoute'
  // etc....
]);

我的html页面的简化版本是：

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>

  </head>
  <body>
    <div id="app-wrapper" class="app" ng-view></div>

    <!-- [injector:js] -->
    <script src="/app/foo.js"></script>
    <script src="/app/foo.module.js"></script>
    <!-- [endinjector] -->

  <script>
    angular.element(document).ready(function() {
      angular.bootstrap(document, ["Foo"]);
    });
  </script>
  </body>
</html>

请注意[injector:js]标记。此工具将扫描源目录并添加在此标记之间找到的所有javascript文件的引用。构建的另一个过程将获取这些文件，连接并缩小它们（其标签在此示例中省略）。

因此，如果我在开发环境（现在的html）或构建（concat + minification）之后运行它...我将最终出现以下错误：

Uncaught Error: [$injector:nomod] Module 'Foo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

有没有办法防止角度在实际加载之前执行依赖于模块的方法？我无法重新安排订单。我不能使用require.js或任何AMD，因为这已经与构建工具联系在一起。

Answer 1

通常我会使用usemin grunt plugin和include-source的组合。

这允许我从自动包含中取出我的模块文件，但仍然将它捆绑，注释和缩小。

index.html最终看起来像这样：

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<!-- include: "type": "js", "files": "js/controllers/**/*.js" -->
<script src="js/controllers/someController.js"></script>
...
... lots of scripts here ...
...
<!-- /include -->
<!-- endbuild -->

值得为你的目的寻找。

AngularJs在初始化之前加载所有文件

1 个答案: