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
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.
stateA
. stateA
, you started to countdown from 100 seconds to 0. stateB
to retrieve some data. You spend 10 seconds at stateB
. 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.