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

AngularJs load all files before initialization

本文关键字：文件 加载 初始化 AngularJs      更新时间：2023-11-02

我遇到nomod Module not available错误。

现在我的情况是，在开发过程中，我的文件可能会以随机顺序加载（由于使用了grunt工具注入器）。所以我可以在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

有没有任何方法可以防止angular在实际加载之前执行依赖于模块的方法？我无法重新安排订单。我不能使用require.js或任何AMD，因为这已经绑定到构建工具中了。

通常我使用usemin-grumt插件和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 -->

为了你的目的，它值得一看。

相关文章：