ui-router has the powerful ability to define abstract states, or states that can't be navigated to, but are useful for defining a set of states with shared properties.

ui-router: Abstract States

Host: [00:00] In this video I'm going to teach you about abstract states in ui-router. There are several use cases for abstract states, which I'll cover.

[00:07] First, let's get a basic abstract state set up. In my modules config phase I'll use the state provider to set up two states. I'll call them In and Up for signing in and signing up.

[00:19] Abstract states are just like any other state, except they can't be activated directly. In other words, you can't navigate to them. Instead, they're activated implicitly when one of their child states are activated.

[00:31] Now we have two simple states set up. Let's assume that these two states have some commonalities. Maybe they share a common template, or they need a similar URL. It's these commonalities that create the need for abstract states.

[00:49] If we add a parent state on top of these two states we can play around. I'll add in a new state called Sign and set it to abstract. I'll then make the other states into children of Sign.

[01:05] When we refresh, it's broken. This is because, like any other state, these two children are trying to populate the ui-view of their parent, but Sign has no ui-view. We need to add one.

[01:28] Now it works like before. What can we do now, because, currently, this is adding nothing new?

[01:34] We could easily add a way to navigate between these two states. Common navigation is one of the main reasons to use abstract states. I'll add some links with SRAFs into the template.

[01:44] Alternatively, we could have used the template URL config property. We can also prepend a URL to all the states by adding one to our abstract state. This would give the user a sense that these states were part of the same area within the application.

[02:13] Now we see our common navigation has shown up. Clicking the links takes us to the states. The URL of each state is prepended with /sign.

[02:23] We could also give the abstract state a controller, whose scope variables and methods would inherit down to the child scopes.

[02:32] However, it's important to note, and a common gotcha in ui-router, that the inheritance of scope is not a feature of ui-router. That's just standard scope inheritance, since often nested states mirror the nesting of the templates in those states. In fact, you could easily have nested states that do not have nested templates. In that scenario the scope would not inherit.

[02:56] Other things abstract states are useful for are resolving shared dependencies, setting custom data, or performing some logic in an on-enter or on-exit handler.

[03:09] I won't be going into these properties right now. I'll probably cover them in a future lesson. But you can always learn more at the ui-router wiki on github.

ui-router: Abstract States

Share this video with your friends