Question

I’m working on an app where we need to dynamically load (don’t ask) angular.js and our js files (directives.js, controllers.js, etc.) as well. I inserted <script> tags into the the DOM for angular and our js files, and found that when you do this, the script files are loaded asynchronously. I got errors about angular not being defined since the larger angular.js file had not come back yet.

Is there anyway of know when angular has loaded up and is ready to be used? My first thought was just to see if angular was defined, something like typeof angular != 'undefined'. However, my fear is that angular will be defined, but not completely setup yet, and I’ll run into other errors. Is this check enough to start adding modules and using the angular object? Or is there something in the object itself that I can check to make sure it has finished setting up?

As a side note, I will be manually bootstrapping the app, so checking something that’s set after the bootstrap won’t work for me. Any help would be appreciated. Thanks.

Answer 1

If you’re using jQuery you could chain load the various external script files:

$.getScript('js/angular.js', function() {
    $.getScript('js/controllers.js', function() {
        $.getScript('js/next.js', function() {
            // [...]
        });
    });
});

More info: http://api.jquery.com/jQuery.getScript/

The potential downside of course is that if one script fails to load (ajax problem, high server load, whatever), the success callback will not be triggered and subsequent scripts won’t be loaded.