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)

Check the edit. It seems that parent.child.grand starts its resolve even before parent has resolved its promise — srph, Aug 15 '14 at 19:56
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: https://www.youtube.com/watch?v=dqJRoh8MnBo — Code Whisperer, Aug 15 '14 at 20:01
I'll take a look. Do you have an idea on which timeframe(mm:ss) it is? — srph, Aug 15 '14 at 20:11

score 17 · Accepted Answer · answered Apr 28 '15 at 20:15

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.

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. — Gaui, Aug 06 '16 at 08:03

score 6 · Answer 2 · edited Oct 19 '16 at 18:40

6

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.

edited Oct 19 '16 at 18:40

brenjt

15,997
13
77
118

answered Aug 16 '14 at 13:42

Chris Antoine

61
1

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? – srph Aug 16 '14 at 17:22
1

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. – Chris Antoine Aug 16 '14 at 22:21
What do you mean by resolve from another tree? By sibling resolves, I meant: grandResolveA start -> grandResolveA finish -> grandResolveB start -> grandResolveB finish. – srph Aug 17 '14 at 15:28

UI-Router: sequential resolve of parent and child states

2 Answers2

Linked