angular-ui router — inherited resolved dependencie

Question

Per the example in the documentation, child states will inherit resolved dependencies from parent states. Furthermore, you can have promises for parent dependencies be resolved before children are instantiated by injecting keys into child states.

See example from documentation:

$stateProvider.state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }

However, how do you do this if the dependency is NAMED, not a function. For example, see bolded part:

$stateProvider.state('parent', {
      resolve:{
         resA:  'ServiceA'
         }
      },
      controller: function($scope, ServiceA){
          $scope.ServiceA = ServiceA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         ServiceB: ServiceB
         }
      },
      controller: function($scope, ServiceA, ServiceB){
      }

I can't figure out how to make ServiceB wait for ServiceA to first be instantiated before instantiating.

I tried putting 'ServiceA' as a dependency for ServiceB, but that doesn't work.

Thanks in advance for any help.

Answer 1

This has nothing to do with ui-router. What you simply want to know is how do you instantiate one service before another. The answer is that you can't, and need to change your design.

If there is something inside ServiceA that needs to complete so that ServiceB can consume it, then you should use promises inside ServiceA. For example:

.factory('ServiceA', function($q){
    var deferred = $q.defer();       

    // Do some kind of work here and when complete, run deferred.resolve();

    return {
        myPromise: function() { return deferred.promise; }
    };
});

And then to consume in ServiceB:

.factory('ServiceB', function(ServiceA){
    ServiceA.myPromise().then(function(){
        // This will run after your ServiceA work has completed
    });
});

Read the $q documentation for more info: link here

Answer 2

Actually, I figured out how to do it.

Here's what you do:

$stateProvider.state('parent', {
      resolve:{
         resA:  'ServiceA'
         }
      },
      controller: function($scope, ServiceA){
          $scope.ServiceA = ServiceA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         ServiceB: function(ServiceA, ServiceB) {
            return ServiceB;
         }
      },
      controller: function($scope, ServiceA, ServiceB){
      }