The application I’m developing at work has many independent parts, which needed their own states. Think of a UI similar to Photoshop, WebStorm, or such – Every panel in the UI is self-contained and can be changed without affecting the others.
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 one panel’s state would affect everything else too.
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.
Big thanks to ui-router-extras author Chris Thielen for helping with this.