javascript 将 angularJS 与 requireJS 一起使用 - 无法读取未定义的属性“模块”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22033992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using angularJS with requireJS - cannot read property 'module' of undefined
提问by Kaushik Lakshmikanth
I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is. So I've tried to convert my code to suit requireJS now.
我已经开始使用 angularJS 编写应用程序。几周后，我突然意识到我应该从一开始就使用 require JS 来加载我的模块。是的，我知道，这很愚蠢。但是它就是这样啊。所以我现在尝试将我的代码转换为适合 requireJS。
This is my main.js
这是我的 main.js
requirejs.config({
baseUrl: "js",
paths: {
jquery:'jquery-1.7.min',
angular: 'angular',
angularRoute:'angular-route',
mainApp:'AngularApp/app'
},
priority:['angular'],
shim:{
angularRoute:{
deps:["angular"]
},
mainApp:{
deps:['angularRoute']
}
}});
require(['angular','angularRoute', 'mainApp'],
function(angular, angularRoute, app)
{
angular.bootstrap(document, ['ServiceContractModule']);
});
This is my app.js
这是我的 app.js
define(['angular',
'angularRoute',
'AngularApp/services',
'AngularApp/directives',
'AngularApp/controllers'],
function(angular, angularRoute, services, directives, controllers)
{
console.log("sup");
var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
serviceContractModule.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/contractNumber/:contractNumbers', {
controller : 'ContractController',
templateUrl : './contractSearchResult',
reloadOnSearch : true
}).when('/serialNumber/:serialNumbers', {
controller : 'SerialController',
templateUrl : './serialSearchResult'
}).when('/QuoteManager',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerView'
}).when('/QuoteManagerHome',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerHome'
});
});
return serviceContractModule;
});
This is my directives.js file
这是我的directives.js 文件
define(['angular',
'AngularApp/Directives/tableOperations',
'AngularApp/Directives/line',
'AngularApp/Directives/listOfValues'],
function(
angular,
tableOperations,
line,
listOfValues)
{
var directiveModule = angular.module('ServiceContractModule.directives');
directiveModule.directive('tableoperations', tableOperations);
directiveModule.directive('line', line);
directiveModule.directive('listOfValues', listOfValues);
return directiveModule;
}
)
)
And this is my services.js file
这是我的 services.js 文件
define(['angular',
'AngularApp/Services/quoteManagerSearch'],
function(angular, quoteManagerSearch)
{
var serviceModule = angular.module('ServiceContractModule.services');
serviceModule.factory('searchRequestHandler', quoteManagerSearch);
return serviceModule;
}
)
)
When I run my page, the current error I am getting is
当我运行我的页面时，我得到的当前错误是
Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14
Uncaught TypeError: Cannot read property 'module' of undefined services.js:5
未捕获的类型错误：无法读取未定义指令的属性“模块”.js:14
未捕获的类型错误：无法读取未定义的 services.js:5 的属性“模块”
This seems to be happening on this particular line
这似乎发生在这条特定线上
var directiveModule = angular.module('ServiceContractModule.directives');
I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome.
我认为由于某种原因，角度文件没有被加载。虽然当我运行页面时，我可以看到所有 js 文件都以正确的顺序在 chrome 中加载。
Any ideas guys? Need quick help! Thanks!
有什么想法吗？需要快速帮助！谢谢！
回答by Louis
Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' defineso you need a shim for it. Add this to your shimconfiguration:
查看 Angular 的源代码，我没有看到它调用 RequireJS' 的任何地方，define因此您需要一个垫片。将此添加到您的shim配置中：
angular: {
exports: "angular"
}
By the way, the priorityfield in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because priorityis supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor prioritybut would ignore the shimfield because shimwas introduced in 2.x. My suggestion: use RequireJS 2.x and remove priority.
顺便说一下，priority您配置中的字段已过时。要么你使用 RequireJS 2.x，它会忽略这个字段，因为priority它只被 RequireJS 1.x 支持。或者您使用 RequireJS 1.x，它会尊重priority但会忽略该shim字段，因为它shim是在 2.x 中引入的。我的建议：使用 RequireJS 2.x 并删除priority.
回答by marcoseu
There are 2 possible problems with your setup:
1. You are bootstrapping angular in your main.jsand then loading the dependencies.
2. You should be referencing the dependency using string
您的设置有 2 个可能的问题：
1. 您正在引导 angular main.js，然后加载依赖项。
2. 您应该使用字符串引用依赖项
So, after removing the angular.bootstrapfrom your main.js, try the following:
因此，angular.bootstrap从您的 中删除后main.js，请尝试以下操作：
app.js
应用程序.js
define([
'AngularApp/services',
'AngularApp/directives',
'AngularApp/controllers'],
function()
{
console.log("sup");
var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', 'ServiceContractModule.services', 'ServiceContractModule.directives', '<<Your Controller Module Name>>' ]);
serviceContractModule.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/contractNumber/:contractNumbers', {
controller : 'ContractController',
templateUrl : './contractSearchResult',
reloadOnSearch : true
}).when('/serialNumber/:serialNumbers', {
controller : 'SerialController',
templateUrl : './serialSearchResult'
}).when('/QuoteManager',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerView'
}).when('/QuoteManagerHome',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerHome'
});
});
angular.bootstrap(document, ['ServiceContractModule']);
});
Check out angularAMDthat I created to help the use of RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
查看angularAMD我创建以帮助使用 RequireJS 和 AngularJS：http:
//marcoslin.github.io/angularAMD/
