Angular Multiple Resolves in Router

Question

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;
        }
    }
  })

The solutions below seem fine, another alternative would be to use the Angular UI-Router project. With that you can define an abstract parent state which resolves the first dependency. Then the child state(s) can have the first dependency injected into their resolve functions. You'll make a small investment in time to learn/switch-to UI-Router, but it will pay for itself if your app has any complexity. — Sunil D.
– Sunil D., Commented Aug 20, 2014 at 21:26

kamituel · Accepted Answer · 2014-08-20 21:00:12Z

1

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).

edited Aug 20, 2014 at 21:00

answered Aug 20, 2014 at 20:52

kamituel

36.2k6 gold badges86 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flashpunk Over a year ago

Thanks for that, the 2nd option looks good. I'm not sure where the success and error functions are though. Any suggestion for that?

flashpunk Over a year ago

I've decided to just return the data from the api instead of making multiple requests. I've awarded your response as correct, however if someone else is looking at it they may be confused by the error and success functions as I was.

Danny Mora · Accepted Answer · 2023-01-27 16:52:54Z

0

you should inject the dependency in a brackets [] or using the comment

 /* @ngInject */

.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: ['$route', 'Service','resolveData', function($route, Service, resolveData){
            var returnData = Service.get({id: resolveData.id});
            return returnData.$promise;
        }]
    }
  })

answered Jan 27, 2023 at 16:52

Danny Mora

213 bronze badges

Collectives™ on Stack Overflow

Angular Multiple Resolves in Router

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related