Returns interdependent async promises in $ routeProvider solution

Question

Consider the code:

var myApp = angular.module('myApp', []); 

Routes:

 myApp.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'app.html', controller:myAppController, resolve:{ resolveData:function(Resolver){ return Resolver(); } } }); }); 

Resolve:

 myApp.factory('Resolver', ['$http', function($http){ return function(){ return $http({url: '/someurl',method: "GET"}).then(function(data) { // dependent call 1 $http({url: '/someotherurl',method: "GET" }).then(function(data) { }); // dependent call 2 $http({url: '/someanotherurl',method: "GET" }).then(function(data) { }); }); } }]); 

Above, I nested 2 calls inside one, as they depend on the data returned by the parent call.

What I want to do : return Resolver when all of them are completed, and not just the parent call.

I cannot use $ q.all () because 2 of the calls depend on the first call.

In short, myAppController should only be loaded after all 3 calls have completed.

Answer 1

You must use the promise of the chain and the $ q service to solve your problem. Just use the below code example that should work

  myApp.factory('Resolver', ['$http','$q', function ($http,$q) { return function () { var deferred = $q.defer(); $http({ url: '/someurl', method: "GET" }).then(function (data) { return $http({ url: '/someurl', method: "GET" }) }).then(function (data) { return $http({ url: '/someanotherurl', method: "GET" }) }).then(function (data) { deferred.resolve(data); }); return deferred.promise; } }]); 

Answer 2

This works for me:

  resolve : { message: function($q, $route, Restangular) { var msgId = $route.current.params.msgId; var deferred = $q.defer(); Restangular.one('message', msgId).get().then(function(message) { Restangular.one('file', message.audioFile.id).get().then(function (blob) { message.blob = blob; deferred.resolve(message); }); }); return deferred.promise; } }