[英]Using angularJS with requireJS - cannot read property 'module' of undefined
I had started writing an app using angularJS. 我开始使用angularJS编写应用程序。 After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules.
几个星期后,我突然意识到我应该从一开始就使用require JS来加载我的模块。 Yes, I know, it was stupid.
是的,我知道,这是愚蠢的。 But it is what it is.
但是它就是这样啊。 So I've tried to convert my code to suit requireJS now.
所以我现在尝试将我的代码转换为适合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
未捕获的TypeError:无法读取undefined directives.js的属性'module':14
Uncaught TypeError: Cannot read property 'module' of undefined services.js:5
未捕获的TypeError:无法读取未定义services.js的属性'module':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!
谢谢!
Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' define
so you need a shim for it. 看看Angular的来源,我没有看到它调用RequireJS'
define
任何地方所以你需要一个垫片。 Add this to your shim
configuration: 将其添加到您的
shim
配置:
angular: {
exports: "angular"
}
By the way, the priority
field in your configuration is obsolete. 顺便说一下,配置中的
priority
字段已过时。 Either you use RequireJS 2.x which ignores this field because priority
is supported only by RequireJS 1.x. 您使用RequireJS 2.x忽略此字段,因为RequireJS 1.x仅支持
priority
。 Or you use RequireJS 1.x which would honor priority
but would ignore the shim
field because shim
was introduced in 2.x. 或者你使用RequireJS 1.x来支持
priority
但会忽略shim
字段,因为shim
是在2.x中引入的。 My suggestion: use RequireJS 2.x and remove priority
. 我的建议:使用RequireJS 2.x并删除
priority
。
There are 2 possible problems with your setup: 您的设置有两个可能的问题:
1. You are bootstrapping angular in your main.js
and then loading the dependencies. 1.您在
main.js
中引导角度,然后加载依赖项。
2. You should be referencing the dependency using string 2.您应该使用字符串引用依赖项
So, after removing the angular.bootstrap
from your main.js
, try the following: 因此,去除后
angular.bootstrap
从main.js
,请尝试以下操作:
app.js app.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 angularAMD
that I created to help the use of RequireJS and AngularJS: http://marcoslin.github.io/angularAMD/ 查看我创建的
angularAMD
以帮助使用RequireJS和AngularJS: http : angularAMD
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.