Download the template / controller template after all $ http asynchronous calls have completed

Question

I currently have index.html with the content below:

<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 . Download URL-mapped content (using $ routeProvider) only after all asynchronous calls within MainController have completed.

Any suggestion would be highly appreciated.

Answer 1

Balanced routing routes have a property for this purpose, that is, an allow 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, view loading.

It makes no sense to try to explain this when egghead explains it so well:

• According to the promises
• Permission function
• More practical application

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

Answer 2

You have another route "template3" that will be displayed when making asynchronous calls and will be the default route.

From 'and then or ' success', the asynchronous promise promise API updates the route using $ location.path () in such a way that when all conditions are met, it can route the user to the intended template, and when you need to show an error message, you can use the template by default, which is displayed at boot time.