Run angular.js as a callback ($.ajax, for example)-Collection of common programming errors

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:

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:

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

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?

1. Remove ng-app from 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']);
   

Originally posted 2013-11-29 06:06:56.