ngRoute 和 Underscore.js 的 RequireJS shim 配置

Question

我正在尝试使用 require.js 加载各种角度模块的依赖项。在 dependencies.js 文件中配置依赖项后，我在加载应用程序时遇到错误，提示 “模块不可用”。我尝试了下面给出的文件的 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] 模块“下划线”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.3.8/$injector/nomod?p0=下划线

谁能帮我提供使用 require.js 配置下划线和 ngRoute 的正确方法？？？？

Answer 1

您的代码存在多个问题：

1. 除非您使用的是旧版本的 jQuery，否则 jQuery 不需要shim。下划线也一样。

2. 您必须将 jQuery 作为模块引用，全部小写：jquery。它仍然在全局空间中导出jQuery，但模块 名称（您将其放入传递给require 或define 的依赖项列表中）必须全部小写。

   李>

3. 您不能复制shim 中的条目。例如，你有这个：

   angularRoute: {
       exports: "ngRoute"
   },
   angularRoute: {
     deps: ['angular']
   },
   

   只有第二个有效，第一个将被忽略。将这两个条目合并为一个同时具有 exports 和 deps 的条目。

4. 看起来您正试图让 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 也可以。