Hold a service's initialization until all promises are resolved

Question

In routeProvider we can hold the routing if we give a resolve object which contains promises; it would wait until all the promises are resolved. However, I couldn't find a way do it in initialization of the application.

There is angular.module("app", []).run(function (){ //init app }) but for a $resource or $http which is async, the app can finish initialization before the dependencies (promises) are resolved that would create a race condition. We don't want that.

So the question is, is there a way which would hold the initialization of a service until all the given promises are resolved?

Answer 1

I've seen a similar problem. A somewhat elegant solution a team mate employed was a combination with RequireJS and it's domReady module:

define(['require', 'angular', 'app','routes', 'pendingServices'], 
      function (require, ng, app, pendingServices) {


  /* place operations that need to initialize prior to app start here
   * using the `run` function on the top-level  module
   */
  app.run(pendingServices.init)

  require(['domReady!'], function (document) {
      /* everything is loaded...go! */
      ng.bootstrap(document, ['mainModule']);
  });

});

In the init method you can do all the preloading (and wait for the desired promises). I'm interested to hear other solutions of course.

Answer 2

Just thinking out load here, but how about only declaring 1 'catch all' route to begin, and in that route provider, hold the loading of the route until you have done everything you need. (using resolve and promises).

Then, when you're done, register the remaining routes, and reload the original route. This time, a more specific handler should be registered and it will bypass your 'catch all' initializer.

What do you think, any issues?