CODEWITHSUNDEEP
angularjs
AlwaysALearner
AlwaysALearner

Reputation: 43947

Load the route Template/Controller after all the $http async calls have completed

Currently, I have an index.html with below contents:

<div ng-controller="MainCntl">  
    <div ng-view></div>
</div>

ng-view loads either "template1.html" or "template2.html" based on the route URL. "template1" is controlled by "Controller1" and "template2" is controlled by "Controller2".

What I want to do: Load the URL mapped content(using $routeProvider) only after all the async calls inside the MainController have completed.

Any suggestion would be highly appreciated.

Upvotes: 4

Views: 2603

Answers (2)

Tiago Rold&#227;o
Tiago Rold&#227;o

Reputation: 10649

AngularJS routes have a property for this purpose, that is the resolve property:

window.angular.module('app',[])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'afterDoingSomething.html',
        controller: 'appCtrl',
        resolve: {
          // function that returns a promise
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  }])

This way, only after the returned promise is resolved does the view load.

There is no sense in trying to explain this, when egghead explains it so, so well:

Remember that any $http or $resource call will return these promisses, so you don't have to work with them directly (return $http(...) works just as well - or you can combine many $http calls into one promise)

Upvotes: 4

Abhishek Nandi
Abhishek Nandi

Reputation: 4275

Have another route 'template3' which will be shown when the async calls are in progress and will be the default route.

From the 'then' or 'success' of the async call promise API update the route using $location.path() this way when all conditions are met you can route the user to the intended template and when the you need to show the error msg you can use the default template which is shown while loading.

Upvotes: 1

Related Questions