Question

我正在尝试使用require.js加载各种角度模块的依赖项。在依赖项.js文件中配置依赖项后，我在加载应用程序时收到错误，该应用程序指出＆＃34;模块不可用＆＃34; 。我尝试了下面给出的文件的两个变体，并且应用程序在两个实例上都失败了：

变体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]模块＆＃39;下划线＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.3.8/ $注射器/ NOMOD？P0 =下划线

任何人都可以帮我提供使用require.js配置下划线和ngRoute的正确方法????

Answer 1

您的代码存在多个问题：

除非您使用的是古老版本的jQuery，否则jQuery不需要shim。下划线也是如此。
您必须将jQuery称为全部小写的模块：jquery。它仍然在全局空间中导出jQuery，但模块名称（放在传递给require或define的依赖项列表中）必须全部为小写。
您无法在shim中复制条目。你有这个例子：
```
angularRoute: {
    exports: "ngRoute"
},
angularRoute: {
  deps: ['angular']
},
```
只有第二个有效，第一个将被忽略。将这两个条目合并为同时包含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也可以。

RequireJS shim config for ngRoute和Underscore.js

1 个答案: