RequireJS shim config for ngRoute and Underscore.js

Question

I am trying to load the dependencies for various angular modules using require.js. After configuring the dependencies in dependencies.js file, I get an error while loading the application which states . 的应用程序时出现错误。 I tried 2 variations of the file given below and the application fails on both the instances :

Variation 1 - Dependencies.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']);

});

Variation 2 - Dependencies.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']);

});

My controller file :

angular.module('myApp', [ 'frontendServices', 'underscore', 'angularRoute']).controller(
    'TableCtrl',
    [       '$http',
            '$scope',
            function($scope, $timeout) {

            // contents

            } ]);    

After loading the application I get the errors like :

Error: [$injector:nomod] Module 'underscore' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.8/ $injector/nomod?p0=underscore

Can anybody help provide me the correct way to configure underscore and ngRoute using require.js????

Answer 1

There are multiple problems with your code:

1. Unless you are using ancient versions of jQuery, jQuery does not need a shim . Same for Underscore.

2. you must refer to jQuery as a module in all lower case: jquery . It still exports jQuery in the global space but the module name (which you put in dependency lists passed to require or define ) must be all lower case.

3. You cannot duplicate entries in shim . You have this for instance:

    angularRoute: { exports: "ngRoute" }, angularRoute: { deps: ['angular'] }, 

   Only the 2nd one will be in effect, the 1st one will be ignored. Merge the two entries into one that has both exports and deps .

4. It looks like you are trying to get Angular to load RequireJS modules with angular.module('myApp', [ 'frontendServices', 'underscore', ...

   I don't see how that would work. A RequireJS module is not automatically an Angular module. If a RequireJS module contains an Angular module, then you have to get RequireJS to load the module first.

   The todomvc example contains a good example of this:

    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']); }); 

   They load the modules through a require call and then pass them to angular.module . They decided to use require due to how they organized their code. Putting the dependencies in the dependency list passed the top level define of a module would do just as well.