Load Dojo module within Angular app

Question

How to use a Dojo module within an Angular app while avoiding race conditions or other conflicts of the two module loading mechanisms of the two frameworks?

Answer 1

Basically you load Dojo first, then bootstrap Angular manually in the require-callback.

<script>
var dojoConfig = {
    async: true,
    baseUrl: '.',
    packages: ['dojo', 'dojox']
};
</script>
<script src="dojo/dojo.js"></script>

Then load the following:

require([
    'dojox/json/query', //or any other dojo module
], function (dojoJsonQuery) {
    //dojo loaded

    var app = angular.module('app', ['ngRoute'], function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/partials/main.html',
            controller: MyCtrl
        });
    });

    app.factory('jsonQuery', function jsonQuery() {
        return dojoJsonQuery;
    });

    angular.bootstrap(document.body, ['app']);
});

function SetupCtrl($scope, jsonQuery) {
    //...
}

Now, the important thing when using angular.bootstrap is to remove the ng-app="app"-attribute from your HTML.