如何解决构建的 AngularJS 应用程序的依赖问题？答案

【问题标题】：How to solve dependency issues with built AngularJS app?如何解决构建的 AngularJS 应用程序的依赖问题？
【发布时间】：2014-02-20 17:58:29
【问题描述】：

我是 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 中相关的 sn-ps：

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'
        }
    }
    ...
});

我知道我可以通过将给定模块的所有源代码放入一个文件来解决这个问题；但是，我想尝试将每个事物（每个控制器、每个服务等）保存在自己的文件中。

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

【问题讨论】：

标签： javascript angularjs build gruntjs dependency-management

【解决方案1】：

grunt 连接文件的顺序是什么？看起来你只是在读取一个目录，如果模块声明所在的 javascript 文件在控制器所在的文件之后，那么连接的文件将以错误的顺序构建。

可能最简单的解决方案是明确列出包含模块声明的文件（带有 []）作为源数组中的第一个文件。

【讨论】：

我目前正在做的不是在我的 Gruntfile 中列出单个文件，而是使用一种模式（我的模块定义在 *.module.js 文件中），因此它们的名称首先呈现 '{.tmp,<%= config.client %>}/{app,components}/**/*.module.js', '{.tmp,<%= config.client %>}/{app,components}/**/*.js', .这可能不适用于更复杂的模块嵌套结构。

【解决方案2】：

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

它与 Angular 配合得很好，而且你有一个 grunt plugin 用于构建。

【讨论】：