我正在尝试使用 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????
最佳答案
您的代码存在多个问题:
除非您使用古老版本的 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
一个模块也可以。
关于javascript - ngRoute 和 Underscore.js 的 RequireJS shim 配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39005346/