如何解决使用AngularJS构建的应用程序中出现的依赖问题？

Question

我是AngularJS的新手，正在创建一个将使用Grunt构建的应用程序。

当我构建并运行我的应用程序时，我注意到一些与依赖项加载顺序相关的问题：

Uncaught Error: [$injector:nomod] Module 'mycompany.admin.forms' 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.
http://errors.angularjs.org/1.2.13/$injector/nomod?p0=mycompany.admin.forms 

在构建的应用程序文件中，模块在声明之前被使用：

angular.module('mycompany.admin.forms').controller('editController', ['$scope', function($scope) {
    // ...
}]);

angular.module('mycompany.admin.forms', [])

  .config(['$routeProvider', function($routeProvider) {
    // ...
  }]);

以下是我项目的gruntfile.js中相关的代码片段：

grunt.initConfig({
    distdir: 'build',
    pkg: grunt.file.readJSON('package.json'),
    src: {
        js: ['src/**/*.js'],
    },
    concat: {
        dist: {
            src: ['<%= src.js %>', '<%= src.jsTpl %>'],
            dest: '<%= distdir %>/admin/app.js'
        }
    }
    ...
});

我知道可以通过将给定模块的所有源代码放入一个文件中来解决此问题；然而，我想尝试将每个内容（每个控制器、每个服务等）保留在其自己的文件中。

我该如何解决这个依赖项加载顺序问题？

- Chad Johnson

Answer 1

Grunt将按照什么顺序进行文件合并？看起来你只是在读取目录，如果包含模块声明的javascript文件出现在控制器所在的文件之后，则合并的文件将以错误的顺序构建。

最简单的解决方案可能是将包含模块声明的文件（使用[]）明确列在源数组中的第一个文件。

- Geoff Genz

---

我目前所做的是，在我的Gruntfile中不列出单个文件，而是使用模式（我的模块定义在*.module.js文件中），以便它们的名称首先被渲染'{.tmp,<%= config.client %>}/{app,components}/**/*.module.js', '{.tmp,<%= config.client %>}/{app,components}/**/*.js'。这可能在更复杂的模块嵌套结构中无法正常工作。 - yorch

Answer 2

为解决依赖加载问题，我建议您使用Require.js

它可以与Angular非常好地配合，还有一个grunt插件可用于构建。

- beagleknight