[SOLVED] Run angular.js as a callback ($.ajax, for example)

Run angular.js as a callback ($.ajax, for example)

I'm writing an app with mostly two javascripts, resources_loader.js and app.js, where the first loads some json files used by app.js.

The problem is: app.js (which has angular.js stuff) should run only after resources_loader.js. I tried to run angular code inside the success callback (resources_loader contains a deferred), but this not seems to work well. Here's my index.html:

<!doctype html>
<html ng-app="myapp">
<body>
    <script src="angular.js"></script>
    <script src="resources_loader.js"></script>
</body>
</html>

Consider that I moved app.js to resources_loader, inside the success callback. Everytime I try to run it, angular raises the following exception: Uncaught Error: No module: myapp.

My guess is that angular.module('myapp', []) should run before onload's event, which is not the case here.

Another thing is that I want to use yepnope.js in my project like this:

<script "yepnope.js"></script>
<script "resources_loader.js"></script>
<script>
    var loader = load_stuff();
    yepnope({
        test: loader.resolved(),
        yep: ['angular.js', 'app.js', 'foo.js', 'bar.js'],
        nope: ['fail.js']
    });
</script>

app.js contains angular code. I think it's more performant because it only loads angular if the resources are loaded. But how can I do it?

Solution

Remove ng-app from <html> tag and use angular.bootstrap(document, ['myapp']); to fire it up once your resources are loaded, like this:

var app = angular.module('myapp', []);

app.config(['$routeProvider', '$locationProvider', function($router, $location) {
    $location.html5Mode(true);

    $router
    .when('/', {
        templateUrl: 'some_template.html',
        controller: 'myController'
    });
}]);

// and then, after everything, run
angular.bootstrap(document, ['myapp']);