Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



ui-router: Activating States

4:04 Angular 1.x lesson by

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with $state.go, and with the ui-sref directive on your HTML elements.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with $state.go, and with the ui-sref directive on your HTML elements.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?