javascript - Using angularJS with requireJS - cannot read property 'module' of undefined - Stack Overflow

admin管理员组

文章数量:1290258

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.

This is my 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

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

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

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

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.

Any ideas guys? Need quick help! Thanks!

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.

This is my 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

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

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

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

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.

Any ideas guys? Need quick help! Thanks!

• javascript
• angularjs
• requirejs
• angular-routing

Share Improve this question Follow edited Feb 26, 2014 at 9:07 Kaushik Lakshmikanth asked Feb 26, 2014 at 6:56 Kaushik LakshmikanthKaushik Lakshmikanth 4311 gold badge11 silver badge44 bronze badges 4

• Change angular to $angular – Ramesh Rajendran Commented Feb 26, 2014 at 7:15
• Umm, but I have defined the alias for the angular module as 'angular' itself. Why would I need to do that? – Kaushik Lakshmikanth Commented Feb 26, 2014 at 7:28
• did you call the angular reference script? – Ramesh Rajendran Commented Feb 26, 2014 at 7:30
• Yes. In the main.js, I have specified in paths, angular:'angular'. The path for the angular file is js/angular.js. I have specified the baseurl as js. Furthermore, when I load the page, I can actually see the angular.js file being loaded after the main.js. – Kaushik Lakshmikanth Commented Feb 26, 2014 at 7:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' define so you need a shim for it. Add this to your shim configuration:

angular: {
    exports: "angular"
}

By the way, the priority field in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because priority is supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor priority but would ignore the shim field because shim was introduced in 2.x. My suggestion: use RequireJS 2.x and remove priority.

There are 2 possible problems with your setup:
1. You are bootstrapping angular in your main.js and then loading the dependencies.
2. You should be referencing the dependency using string

So, after removing the angular.bootstrap from your main.js, try the following:

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/

本文标签： javascriptUsing angularJS with requireJScannot read property 39module39 of undefinedStack Overflow