ngRoute 和 Underscore.js 的 RequireJS shim 配置

Question

我正在尝试使用 require.js 加载各种 angular 模块的依赖项。在 dependencies.js 文件中配置依赖项后，我在加载应用程序时出现错误，显示 "Module not available"。我尝试了下面给出的文件的 2 个变体，但应用程序在两个实例上都失败了：

变体 1 - Dependencies.js

require.config({
paths: {
    angular: '../lib/dependencies/bower_components/angular/angular',
    angularRoute: '../lib/dependencies/bower_components/angular-route/angular-route',
    angularMessages: '../lib/dependencies/bower_components/angular-messages/angular-messages',
    lodash: "../lib/dependencies/bower_components/lodash/dist/lodash",
    jQuery: "../script/datetimepicker/jquery.min", // needed only by the date time picker
    datetimepicker: '../script/datetimepicker/jquery.datetimepicker',
    underscore: '../lib/dependencies/bower_components/underscore/underscore',
    frontendServices: 'frontend-services',
    myApp: "test-app"
},
shim: {
    jQuery: {
        exports: "jQuery"
    },
    angular: {
        exports: "angular"
    },
    angularRoute: {
        exports: "ngRoute"
    },
    angularRoute: {
      deps: ['angular']
    },
    underscore: {
        exports: "_"
    },
    underscore: {
        deps: ['jQuery']
    },
    datetimepicker: {
        deps: ['jQuery']
    },
    angularMessages: {
        deps: ['angular']
    },
    frontendServices: {
        deps: ['angular', 'lodash']
    },
    myApp: {
        deps: [ 'lodash', 'angular', 'angularMessages', 'frontendServices', 'underscore']
    }
}
});

require(['myApp'], function () {

angular.bootstrap(document.getElementById('myApp'), ['myApp']);

});

变体 2 - Dependencies.js

    require.config({
paths: {
    angular: '../lib/dependencies/bower_components/angular/angular',
    angularRoute: '../lib/dependencies/bower_components/angular-route/angular-route',
    angularMessages: '../lib/dependencies/bower_components/angular-messages/angular-messages',
    lodash: "../lib/dependencies/bower_components/lodash/dist/lodash",
    jQuery: "../script/datetimepicker/jquery.min", // needed only by the date time picker
    datetimepicker: '../script/datetimepicker/jquery.datetimepicker',
    underscore: '../lib/dependencies/bower_components/underscore/underscore',
    frontendServices: 'frontend-services',
    myApp: "test-app"
},
shim: {
    jQuery: {
        exports: "jQuery"
    },
    angular: {
        exports: "angular"
    },
    angularRoute: {
        exports: "ngRoute"
    },
    angularRoute: {
      deps: ['angular']
    },
    underscore: {
        deps: ['jQuery']
    },
    datetimepicker: {
        deps: ['jQuery']
    },
    angularMessages: {
        deps: ['angular']
    },
    frontendServices: {
        deps: ['angular', 'lodash']
    },
    myApp: {
        deps: [ 'lodash', 'angular', 'angularMessages', 'frontendServices', 'underscore']
    }
}});

require(['myApp'], function () {

angular.bootstrap(document.getElementById('myApp'), ['myApp']);

});

我的控制器文件：

angular.module('myApp', [ 'frontendServices', 'underscore', 'angularRoute']).controller(
    'TableCtrl',
    [       '$http',
            '$scope',
            function($scope, $timeout) {

            // contents

            } ]);

加载应用程序后，出现如下错误：

错误：[$injector:nomod] 模块 'underscore' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.3.8/$injector/nomod?p0=下划线

Can anybody help provide me the correct way to configure underscore and ngRoute using require.js????

Answer 1

您的代码存在多个问题：

除非您使用的是 jQuery 的古代版本，否则 jQuery 不需要 shim。下划线相同。
您必须将 jQuery 称为全部小写的模块：jquery。它仍然在全局 space 中导出 jQuery 但模块名称（您将其放入传递给 require 或 define 的依赖列表中) 必须全部小写。
您不能在 shim 中复制条目。例如，你有这个：
```
angularRoute: {
    exports: "ngRoute"
},
angularRoute: {
  deps: ['angular']
},
```
只有第2个有效，第1个会被忽略。将两个条目合并为一个同时具有 exports 和 deps.
看起来您正试图让 Angular 加载带有 angular.module('myApp', [ 'frontendServices', 'underscore', ...
的 RequireJS 模块
我不知道那会怎样。 RequireJS 模块不会自动成为 Angular 模块。如果 RequireJS 模块包含 Angular 模块，那么你必须先让 RequireJS 加载模块。

todomvc example 包含一个很好的例子：
```
require([
    'controllers/todo', 
    'directives/todoFocus', 
    'directives/todoEscape',
    'services/todoStorage'
], function (todoCtrl, todoFocusDir, todoEscapeDir, todoStorageSrv) {
    angular
        .module('todomvc', [todoFocusDir, todoEscapeDir, todoStorageSrv])
        .controller('TodoController', todoCtrl);
    angular.bootstrap(document, ['todomvc']);           
}); 
```
他们通过 require 调用加载模块，然后将它们传递给 angular.module。由于他们组织代码的方式，他们决定使用 require。将依赖项放入模块的顶层 define 的依赖项列表中也可以。

ngRoute 和 Underscore.js 的 RequireJS shim 配置

RequireJS shim config for ngRoute and Underscore.js

javascript

jquery

requirejs

underscore.js

angularjs