how to load angularjs and my models at the correct time

Question

how to load angularjs and my models at the correct time

I am struggling to find a way to get angular and my code to play nicely and since angular is awesome i know it must be my problem. Some of my models have static data only but most have either only dynamic data that i pull in from rest services or a combination of static/rest data. many of the examples i see here and in the docs just deal with a small static json set of data.

My problem when i put the angular script call in the html it tries to load and execute before my models are loaded and ready to go. there has to be a way to coordinate that loading time.

So i have tried to devise ways to make sure my model js scripts are all loaded and then finally call for the angular script in a getScript call.

Also i wrote a custom filter and i want that to be added to my module. when i add the module name to the ng-app tag and i try to lazy load the angular script via getScript it errors and says it doesn't recognize my module name. If i remove the module name from ng-app and then try to initialize my filter module it does lazy load angular.js but then it says my filter method is invalid because (i guess) it is not registered with the model.

I'm sure i'm missing some key piece of information somewhere. Angular has to be smart enough to load and then realize that my models will take a few moments to arrive. Not just run through my html and bark at the first ng-controller tag because the model isn't loaded or the service call to fill the model is not done yet.

Right now if i put a tag on my html like so:

<html class="no-js" ng-app="yourApp">

I get an error when i call getScript on angular.js that says

angular.js failed to load: Error: No module: yourApp

Please help. thanks for any suggestions.

angularjs

Answer 1

If I understand correctly, you load angularjs not during page load, but via an ajax call? If you do that you will need to do a manual bootstrap.

Here is an example I'm using with require.js, but with jquery's $.getScript(), it will be similar:

require(['angular', 'jquery', 'app/app-config'], function (angular) {
    'use strict';

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });
});

In your case it will be something like:

$.getScript("http://code.angularjs.org/1.0.4/angular.js", function(data, textStatus, jqxhr) {
   angular.bootstrap(document, ['myApp']);
});

Just make sure all javascript files with controllers, directives, ... are loaded too.