how to initialize application asynchronously in angular

Question

I am writing an angular app that will need some asynchronous code to run during the bootstrap phase. Let's say that this pahe includes collecting several AJAX call responses. As the resources are being requested, there is an overlay icon shown (waiting for data). After all of the requests are done, the application is ready to start working. The question is: how to do this correctly in angular?

The things I've found in the web so far seem to be hacky, such as:

http://xcellerant.net/2014/10/30/initializing-global-variables-and-synchronous-ajax-calls-in-an-angular-xpages-application/ - here the author uses jQuery to run $.ajax synchronously, which is 100% what I don't want to do, because of obvious reasons.
https://blog.mariusschulz.com/2014/10/22/asynchronously-bootstrapping-angularjs-applications-with-server-side-data - here the author removes the ng-app from HTML to bootstrap the application manually. This is better then above, but still, quite hacky.

I am looking for a convenient and clean solution. In backbone (or anything built on top of it), for example, you may simply run several ajax requests inside initialize method. Backbone relies on jQuery afterall - or something complaint - so just collect them all asynchronously using $.when(list-of-promises) and fire an event that will asynchronously bootstrap the whole app. This is purely modular. And there are no hacks.

Joe Enzminger · Accepted Answer · 2015-03-08 00:05:01Z

4

You don't need to delay bootstrapping your app.

You use $http service to request data. $http methods return promises. You can use the $q service's $q.all() method to wait until all the $http promises have resolved.

Something similar to this:

<body ng-app="app">
    <div ng-if="!Initialized">
        Overlay (waiting for data)
    </div>
    <div ng-if="Initialized">
        Application
    </div>
</body>


angular.module('app', [])
.run(function($rootScope, $q, $http){
    $rootScope.Initialized = false;
    $q.all({
        firstRequest: $http.get('/someresource'),
        secondRequest: $http.get('/someotherresoruce'),
        thirdRequest: $http.get('/athirdresource')
    }).then(function(results) {
        $rootScope.resource1 = results.firstRequest;
        $rootScope.resource2 = results.secondRequest;
        $rootScope.resource3 = results.thirdRequest;
        $rootScope.Initialized = true;
    });
});

Note, this is to demonstrate how to wait for multiple $http requests concurrently and to change from a "loading" to a "ready" state. Using $rootScope is generally frowned upon as a way to share data across controllers.

edited Mar 8, 2015 at 0:05

answered Mar 7, 2015 at 23:34

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ptevans Over a year ago

I think this answer provides the simplest and most Angular way of accomplishing this. If you really really need to delay initialization, you can provide a set of dependencies for your controller when you define your routes. Note this applies to the controller and not the overall app bootstrap. Take a look at the resolve property for the route parameter: docs.angularjs.org/api/ngRoute/provider/$routeProvider

ducin Over a year ago

@JoeEnzminger can you tell more about Using $rootScope is generally frowned upon as a way to share data across controllers? I don't want to follow bad practice - is there a better way of doing this?

Joe Enzminger Over a year ago

Generally you want to encapsulate shared data in angular services. Items on $rootScope are global, which makes implementing controllers that depend on $rootScope data difficult to unit test. For services that need to be initialized, the service can have an init() method that returns a promise that is resolved when the service is ready, and you can use that promise in the same way you use the promise returned by $http in my example.

Collectives™ on Stack Overflow

how to initialize application asynchronously in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related