Angular Multiple Resolves in Router

Issue

i'm trying to resolve more than one service to my controller, and the 2nd service is dependant on the 1st resolving first as it requires some data to be included to make the request.

Below is what I would like to do, and how I think it ** should ** work, however, I can't seem to access the data returned in the 1st resolveData request.

Any suggestions or ideas would be greatly appreciated

  .when('/maps/:id', {
    templateUrl: 'partials/maps/view',
    controller: 'MapViewCtrl',
    authenticate: true,
    resolve: {
        resolveData: function ($route, MapService) {
            var data = MapService.showfull({id: $route.current.params.id});
            return data.$promise;
        },
        resolveMoreData: function($route, Service, resolveData){
            var returnData = Service.get({id: resolveData.id});
            return returnData.$promise;
        }
    }
  })

Solution

The values resolved in a route definition cannot be dependend on each other. They are intended to be used by the controller for that route.

See this part of the $routeProvider source for a reference:

function updateRoute() {
  // ...
  var locals = angular.extend({}, next.resolve);

  angular.forEach(locals, function(value, key) {
    locals[key] = angular.isString(value) ?
      $injector.get(value) : $injector.invoke(value, null, null, key);
  });

  // ...

  // Here, we use $q.all(), which converts array of the promises
  // into a single promise. That input array contains independent
  // promises.
  return $q.all(locals);
}

You could fix that in the couple of ways:

• Move the resolveMoreData logic into the controller
• Create a single dependency (either as a resolved dependency, or a service) which would combine those two promises into one.

The second option could look like:

resolve: {
  data: function ($route, MapService, Service) {
    var deferred = $q.defer();

    MapService
      .showfull({id: $route.current.params.id})
      .then(function success(data) {
              return Service.get({id: data.id});
            }, function error(reason) {
              deferred.reject(reason);
            })
       .then(function success(data) {
              deferred.resolve(data);
            }, function error(reason) {
              deferred.reject(reason);
            });

    return deferred.promise;
  }
}

(note the code above is an example only, I haven't ran it).

Answered By - kamituel