0

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.

jmtoung
  • 1,002
  • 1
  • 14
  • 28

2 Answers2

2

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

Matt Way
  • 32,319
  • 10
  • 79
  • 85
  • Actually this has everything to with ui-router. Ui-router provides a feature of nested states and allows for dependencies to be inherited. Please read https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views – jmtoung Jul 14 '14 at 23:40
-1

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){
      }
jmtoung
  • 1,002
  • 1
  • 14
  • 28
  • This does not do what you think it does! Yes it will likely run your `ServiceA` initialisation first, but the point of resolves is to use them with promises (which I doubt your `ServiceA` returns). You should really reconsider your design. Services are globally injectable, so it is bad to assume this will be the only place where `ServiceA` and `ServiceB` are injected. If `ServiceB` truly depends on `ServiceA` initialising, this should be taken care of inside `ServiceB`, which as stated in my answer has **nothing to do with ui-router**. – Matt Way Jul 15 '14 at 14:20
  • Service A does return a promise. This isn't the only place where ServiceA and ServiceB will be injected. ServiceB depends on ServiceA, but if I don't do it this way, angular attempts to initialize both services at once, which leads to an error. – jmtoung Jul 15 '14 at 18:57