UI-Router: sequential resolve of parent and child states

Question

I have two abstract states parent and parent.child, and an activateable state parent.child.grand.

I want parent to be promise resolved before parent.child.grand gets its resolves executed. Why? Because a certain data which comes from the ajax request in the resolve from parent is required inparent.grand.child.

Here's a gist

Is it possible to sequentially chain the promises of parent to children states without using controllers ?

(parent resolve start -> finish ajax request -> resolve promise -> parent.child.grand resolve start -> finish ajax request -> resolve promise)

Mangum

This happens by default no? – Slot

Check the edit. It seems that parent.child.grand starts its resolve even before parent has resolved its promise – Mangum

Sorry this is the best I have: here's an hour long video where the inventor of Ui-Router explains the whole thing, I think he mentions how to deal with this: youtube.com/watch?v=dqJRoh8MnBo – Slot

I'll take a look. Do you have an idea on which timeframe(mm:ss) it is? – Mangum

@itcouldevenbeaboat No luck – Mangum

Answer 1

I've seen a few answers for this but it still wasn't entirely clear without an example. The docs say:

The resolve keys MUST be injected into the child states if you want to wait for the promises to be resolved before instantiating the children.

Here's the example:

    $stateProvider.state('parent', {
          resolve:{
             resA:  function(){
                return {'value': 'A'};
             }
          },
          controller: 'parentCtrl'
       })
       .state('parent.child', {
          resolve:{
             // Adding resA as an argument here makes it so that this child state's resB resolve
             // function is not run until the parent state's resA resolve function is completed.
             resB: function(resA){
                return {'value': resA.value + 'B'};
             }
          }
          controller: 'childCtrl'
        })

And you don't have to inject resA into the child controller.

Disarming

Is there no way to force this behavior? I have a lot of child states that inherit from root state and would like all of them to wait until root is resolved. – Unbending

Answer 2

If you add auth to the dependency injection of your grandchild resolve, ui-router will resolve it prior to the grandchild resolve.

['authsrv', 'auth', function(authsrv, auth){}]

Hope that makes sense.

Tong

I'll check again. It was working for no reason, which I thought was a bug or some luck. How about for sibling resolves? Will the same method allow me to order the priorities? – Mangum

The resolve chain only works for child/grand child etc. You aren't able to inject a resolve from another tree. Also the resolves are all run async but if you inject another resolve that one(or multiple) will be resolved prior to the one you inject it to. It may have been working before due to sheer luck of when each resolve was completing. You could have it work 100 times and then fail once. I'm probably doing a terrible job of explaining how it works but when I'm back in front of a computer I think there is a page in the ui-router docs that explains it. – Tong

What do you mean by resolve from another tree? By sibling resolves, I meant: grandResolveA start -> grandResolveA finish -> grandResolveB start -> grandResolveB finish. – Mangum