javascript - ngRoute 和 Underscore.js 的 RequireJS shim 配置

Question

我正在尝试使用 require.js 加载各种 Angular 模块的依赖项。在 dependency.js 文件中配置依赖项后，我在加载应用程序时收到错误，指出“模块不可用”。我尝试了下面给出的文件的 2 个变体，但应用程序在这两个实例上都失败了:

变体 1 - Dependency.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 - Dependency.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']);

});

我的 Controller 文件:

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=下划线

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

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一个模块也可以。