Question

In my project I want to use RequireJS and bootstrap my app as follows:

requirejs.config({
baseUrl: 'scripts/vendor',
paths: {
    jquery: [
        'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
        'jquery'
    ],
    angular: [
        'http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min',
        'angular'
    ],
    app: '../app'
}
});

require(['require', 'jquery', 'angular', 'app'], function(require, $, angular, app) {
console.log(require);
console.log($);
console.log(angular);
console.log(app);
});

On my index.html only RequireJS is loaded via script tag, where the RequireJS loads the above code.
What works:
– in my Network monitor I can see that RequireJS, jQuery, Angular and app are loaded
– The console.log messages print correct for require, jQuery and app

The angular object is somehow undefined. But if I don’t load it from CDN and use my local load, it works! The local file is a RequireJS wrapper that looks like this:

define(['/components/angular/angular.min.js'], function () {
    return angular;
});

How do I get this work with Angular’S CDN? Or does this depend on support from Angular?

Answer 1

First, you are confusing “paths” with “shim”

Path is good, don’t go for “shim” behavior. But, you need to make your “paths” proper:

paths: {
    jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
    // NOTE: angular is "plain JS" file
    angular: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min',
    app: '../app'
}

Then, you need to let go of the need to have something returned to you… Just “use the force, Luke” 🙂 and expect the right globals to be there when you need them:

require(['jquery', 'app', 'angular'], function($, app, thisValueDoesNotMatter) {
    // you don't need to wrap "require" Just use global
    console.log(require);
    console.log($);
    console.log(app);

    // note, angular is loaded as "plain JavaScript" - not an AMD module.
    // it's ok. It returns "undefined" but we just don't care about its return value
    // just use global version of angular, which will be loaded by this time.
    // because you mentioned it in your dependencies list.
    console.log(window.angular);
});