angularjsangular-ui-routerangular-ui-router-extras

what's the difference between child state and sticky state?


I have a good use of angular 1.5 states (nested states, tab states, modal stats)

Ui-router-extras has sticky states, but I dont see the difference with a classic parent/child state architecture ?

The basic example of sticky state is something we can do without sticky ? http://plnkr.co/edit/SCHExh4DYKFd9Kq3UbaA?p=preview

If you remove the sticky: true, you get the same behavior


Solution

  • No, not really. What ui-router does is actually that it transforms your app into a state machine. And a strict definition of a state machine is that you can only have one state active at any point of time.

    Now what that means is whenever you transit from stateA to stateB, stateA's scope (and other assets like controllers etc) will be destroyed, while stateB ones being instantiated. So literally, you cannot have stateA's and stateB's controller and scope being active simultaneously. Conclusion is, no parallel (aka sticky) states are allowed in a strict state machine.

    ui-router-extras let's you do this. You can have multiple states active at a time.

    Let's have an example scenario.

    1. You first go to stateA.
    2. In stateA, you started to countdown from 100 seconds to 0.
    3. Halfway through 57th second, you go to stateB to retrieve some data. You spend 10 seconds at stateB.
    4. You go back to stateA

    Now, for a normal ui-router. When you are at step4 going back to stateA, your countdown restarts from 100 seconds. Where as with sticky states, your coundown starts from 57-10 = 47 seconds.

    This is important because for the normal ui-router, when you transit to stateB, your stateA's scope is destroyed. Transiting back to stateA will re-instantiate everything, hence countdown start from 100 again. If you are using sticky states, the scopes are preserved.

    Here is plnkr demo forked from yours. Try comment out the sticky:true, and go and forth from tab1 and tab 2, and you will see the difference.