ui-router: Activating States

Narrator: [00:00] In this video, I'm going to talk about the various methods of activating a ui-router state. In this bug tracking application that I'm building, I already have several states set up to track multiple projects, the bugs within those projects, and I can also view the details of each bug.

[00:16] There are several ways to navigate between states with ui-router. Currently I'm using the most obvious way, which is to navigate to a state's URL. If we take a look at the project tab HTML, we can see that it's a list of anchors. Each anchor has a dynamically constructed href using the ng-href attribute.

[00:35] To get to a project's list of bugs, we need to navigate to #/projects/:projectID. I'm using the project variable from the ng-repeat to fill in the ID portion of the URL. Similarly, if we look at the bug buttons, they too are dynamically constructed URLs. Now when we click around, ui-router is activating each state by listening for a change in the URL.

[01:01] Let's take a look at a couple other ways we can navigate the states. The second way you can navigate to a state is with the go method on the state service. I've added state to the route scope, because it's helpful to access the various helper methods on the state service from within our templates. Now I could just as easily use an ng click on my buttons that calls state.go.

[01:28] I just pass in the name of the state I want to go to, in this case projects.board, and the parameters I'd like to pass along. Just like the URL version, I'm passing along the project ID.

[01:47] It's not good to be missing an href attribute on an anchor, so we'll add one in that does nothing. If we refresh, we'll see it works identically. A benefit of this approach is that you could instead call a scope method that does other things in addition to navigating to the new state.

[02:06] Also, you no longer have to be worried about keeping your state and link URLs synchronized. If you change a state URL, the links will still work. A downside of this is you can no longer middle-click a link or a copy and paste the link for sharing.

[02:25] The last way to activate a state is my preferred method. It's a nice helper directive called ui-sref. Just like href stands for hyperlink reference, sref stands for state reference. The syntax is similar to state.go. You provide the state name.

[02:40] Notice I'm using a relative syntax here. ui-router recognizes any state path that starts with a period as a child that is relative to the present state. If we had no parameters, then this would be all we had to type. We do have a parameter, so we enter it like this.

[03:04] Another cool feature of using ui-sref, and state.go for that matter, is on this trialed state, when we want to go to the detail view, we can simply use the relative state name again, and then we only have to pass the parameter for that state. The project ID is inherited automatically. If we refresh, we see it still works the same as before. With ui-sref you don't have to specify a blank href unless your state has no associated URL.

[03:37] The reason is that a dynamically constructed href attribute is automatically added for you. This gives us back the ability to share the link and open it in a new tab. We also get the benefit of not having to keep our URLs synchronized.

[03:54] The fourth way, which I won't be sharing, is to set window.location directly. ui-router will pick up on the URL change and activate the matching state.