angular-ui router -- inherited resolved dependencies for NAMED dependencies

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.

Matt Way · Accepted Answer · 2014-07-14 23:34:36Z

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

answered Jul 14, 2014 at 23:34

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

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

1 Comment

jmtoung Over a year ago

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 github.com/angular-ui/ui-router/wiki/…

jmtoung · Accepted Answer · 2014-07-14 23:39:02Z

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

answered Jul 14, 2014 at 23:39

jmtoung

1,0221 gold badge15 silver badges28 bronze badges

2 Comments

Matt Way Over a year ago

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.

jmtoung Over a year ago

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.

Collectives™ on Stack Overflow

angular-ui router -- inherited resolved dependencies for NAMED dependencies

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related