javascript - AngularJS, requireJS and ngRoute - Stack Overflow

admin管理员组

文章数量:1287868

I'm building an Address Book to learn angular and have it working nicely until I try to use the route manager. The issue is with loading the angular route manager via require. I'm getting the following error 'Uncaught object'.

There have been questions about this but they have been removed by the user, and other answers point to not having included the ngRoute dependancy in the ng.module dependancy list, or aren't using require at all. I'm not having much luck finding an answer!

I have the an HTML file that includes a require config file:

requirejs.config({
  paths: {
    'jquery': ['//ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min'],
    'angular': ['//ajax.googleapis/ajax/libs/angularjs/1.2.16/angular.min','angular_1.2.16.min'],
    'angular-route': ['//ajax.googleapis/ajax/libs/angularjs/1.2.16/angular-route.min','angular-route_1.2.16.min'],
  },
  shim: {
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      exports: 'angular'
    },
    'angular-route': {
      exports: 'ngRoute',
      deps: ['angular']
    } 
  },
  baseUrl: 'js/lib'
})

require(['modules/ContactsMod'], function() { });

and this is the ContactsMod.js file called at the end of the config file:

define(['jquery', 'angular-route','angular','controllers/ContactsCtrl','routes/ContactsRout'],function($,ngRoute,ng,controller,router) {

//  var contactsApp = ng.module('contactsApp', [ngRoute]);

//  contactsApp.config(function ( $routeProvider, $locationProvider ){
//    $log.debug( "Configuring $routeProvider...");
//
//    $locationProvider.html5Mode(true);  //?????
//
//    $routeProvider
//      .when( '/', {
//        templateUrl : "views/Contacts.html",
//        controller  : "controller"
//      })
//      .otherwise({ redirectTo: '/' })
//  })

    var contactsApp = ng.module('contactsApp', []);
    contactsApp.controller(controller);
    ng.bootstrap(document, ['contactsApp']);


});

The mented out section is the part I'm trying to figure out. The above version works, but when I try to add the ngRoute dependancy to the ng.module call in the mented out part I get the error mentioned.

I can see that all the assets have been loaded before the module is called. But I can also see that the ngRoute logs out as undefined so it makes sense that it doesn't work! I've tried a number of different config variants. Like including the angular-route as a dependancy of angular (which give the same error plus another of 'Uncaught TypeError: Cannot read property 'module' of undefined').

I can see there's a seed app that uses custom async loader instead of require... what do you remend?

I don't know how to debug this problem, any help or pointers appreciated!

I'm building an Address Book to learn angular and have it working nicely until I try to use the route manager. The issue is with loading the angular route manager via require. I'm getting the following error 'Uncaught object'.

There have been questions about this but they have been removed by the user, and other answers point to not having included the ngRoute dependancy in the ng.module dependancy list, or aren't using require at all. I'm not having much luck finding an answer!

I have the an HTML file that includes a require config file:

requirejs.config({
  paths: {
    'jquery': ['//ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min'],
    'angular': ['//ajax.googleapis./ajax/libs/angularjs/1.2.16/angular.min','angular_1.2.16.min'],
    'angular-route': ['//ajax.googleapis./ajax/libs/angularjs/1.2.16/angular-route.min','angular-route_1.2.16.min'],
  },
  shim: {
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      exports: 'angular'
    },
    'angular-route': {
      exports: 'ngRoute',
      deps: ['angular']
    } 
  },
  baseUrl: 'js/lib'
})

require(['modules/ContactsMod'], function() { });

and this is the ContactsMod.js file called at the end of the config file:

define(['jquery', 'angular-route','angular','controllers/ContactsCtrl','routes/ContactsRout'],function($,ngRoute,ng,controller,router) {

//  var contactsApp = ng.module('contactsApp', [ngRoute]);

//  contactsApp.config(function ( $routeProvider, $locationProvider ){
//    $log.debug( "Configuring $routeProvider...");
//
//    $locationProvider.html5Mode(true);  //?????
//
//    $routeProvider
//      .when( '/', {
//        templateUrl : "views/Contacts.html",
//        controller  : "controller"
//      })
//      .otherwise({ redirectTo: '/' })
//  })

    var contactsApp = ng.module('contactsApp', []);
    contactsApp.controller(controller);
    ng.bootstrap(document, ['contactsApp']);


});

The mented out section is the part I'm trying to figure out. The above version works, but when I try to add the ngRoute dependancy to the ng.module call in the mented out part I get the error mentioned.

I can see that all the assets have been loaded before the module is called. But I can also see that the ngRoute logs out as undefined so it makes sense that it doesn't work! I've tried a number of different config variants. Like including the angular-route as a dependancy of angular (which give the same error plus another of 'Uncaught TypeError: Cannot read property 'module' of undefined').

I can see there's a seed app that uses custom async loader instead of require... what do you remend?

I don't know how to debug this problem, any help or pointers appreciated!

• javascript
• angularjs
• routes
• requirejs

Share Improve this question Follow asked Jun 13, 2014 at 11:07 GetafixITGetafixIT 13311 silver badge66 bronze badges 5

• I don't know alot about RequireJS but I am pretty sure angular.module expects an array of strings as its dependencies, e.g. ng.module('contactsApp', ['ngRoute']); – ivarni Commented Jun 13, 2014 at 11:23
• Thanks - I've corrected this... but same error as I don't think the module is available in scope. – GetafixIT Commented Jun 13, 2014 at 13:08
• Hmm, that's strange. It should load the ngRoute module the same way it loads angular, at least so one would think. – ivarni Commented Jun 13, 2014 at 13:12
• Maybe just take a look at github./tnajdek/angular-requirejs-seed and see what they are doing different? – ivarni Commented Jun 13, 2014 at 13:13
• It is not that simple to use AngularJS and RequireJS. Check out my answer at stackoverflow./questions/23929498/… – marcoseu Commented Jun 13, 2014 at 16:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

So I took ivarni's advice and checked out the differences between my example and the github./tnajdek/angular-requirejs-seed repo.

Actually it wasn't that far off and the main issue was to do with the bootstrap call. When you use require the bootstrap effectively fires before the assets have loaded. The confusion es because if you look in the network tab it appears that the assets have been loaded by require. However, Angular had already executed the bootstrap without the additional assets. Please see: https://code.angularjs/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap for more info on what the bootstrap needs to do when using angular with require.

My require config file now looks like:

require.config({
    baseUrl: 'js',
    paths: {
        jquery: ['//ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min', 'lib/jquery/jquery_2.0.0.min.js'],
        angular: ['//ajax.googleapis./ajax/libs/angularjs/1.2.16/angular.min', 'lib/angular/angular_1.2.16.min'],
        angularRoute: ['//ajax.googleapis./ajax/libs/angularjs/1.2.16/angular-route.min', 'lib/angular-route/angular-route_1.2.16.min']
    },
    shim: {
        'angular' : {'exports' : 'angular'},
        'angularRoute': ['angular'],
    }
});

window.name = "NG_DEFER_BOOTSTRAP!";

require( ['angular', 'modules/contactsMod', 'routes/contactsRoutes'], function(angular, contactsMod, routes) {
    'use strict';

    var $html = angular.element(document.getElementsByTagName('html')[0]);

    angular.element().ready(function() {
        angular.resumeBootstrap([contactsMod.name]);
    });
});

To make this work I also had to return the included module so that I could call it as a module with dependencies in the snippet above. So my ContactsMod.js now looks like this:

define(['angular', 'controllers/contactsCtrl', 'angularRoute'], function (angular, controllers) {
    'use strict';

    // Declare app level module which depends on filters, and services
    return angular.module('contactsMod', [ 'ngRoute', controllers.name]);
});

I hope this is useful to someone... Thanks for your help folks!

You don't need export 'ngRoute' in:

'angular-route': {
      deps: ['angular']
    } 

And you miss '' when you inject ngRoute, try this:

define(['angular','jquery', 'angular-route','controllers/ContactsCtrl','routes/ContactsRout'],function(ng) {

var contactsApp = ng.module('contactsApp', ['ngRoute']);

contactsApp.config(function ( $routeProvider, $locationProvider ){
    $log.debug( "Configuring $routeProvider...");

    $locationProvider.html5Mode(true);

    $routeProvider
      .when( '/', {
        templateUrl : "views/Contacts.html",
        controller  : "controller"
      })
      .otherwise({ redirectTo: '/' })

    contactsApp.controller(controller);
    ng.bootstrap(document, ['contactsApp']);


});

本文标签： javascriptAngularJSrequireJS and ngRouteStack Overflow