I had a problem: My application had multiple independent parts, which needed their own states. For example, I have a toolbar that’s on top and a sidebar on the right. The user can change each of the parts without affecting the other, and setting it up as a normal ui-router state tree will not work.
The standard ui-router has no concept of parallel states. Everything must be modeled as a tree, which means a setup like this doesn’t work. For example, changing the sidebar’s state would affect the toolbar’s state as well – which is not something we want.
Thankfully there’s ui-router-extras, which adds support for so-called “sticky states” or “parallel states”. We can use this to have as many individual parts, that have their own parallel state trees, as we want.
Let’s go through a small sample app and look how to set this up step by step. You can find the full sample app here so you can follow along more easily.