0

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;
        }
    }
  })
1
  • 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.
    Aug 20, 2014 at 21:26

2 Answers 2

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

2
  • 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
    Aug 20, 2014 at 21:31
  • 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.
    – flashpunk
    Aug 21, 2014 at 12:12
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;
        }]
    }
  })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.