AngularJS Architecture: navigating between states with ui-router
Now that we have ui-router states in our Angular application, we can discuss the three ways to activate a state within ui-router. We will programmatically activate a state using $state.go and capture user interactions with the ui-sref directive.
[00:01] In this lesson, we are going to learn how to navigate between states within ui-router. In the previous lesson, we learned how to use state parameters to pass information from one state to another. Now, we are going to complete the loop by learning how to navigate between states while passing in relevant information.
[00:23] Within ui-router, there are three main ways to activate a state. We have already seen one way to activate a state, in the previous lesson, by navigating directly to the URL associated with the state.
[00:40] For instance, if we go here, you can see that design is being passed into the state, or we can go Development. This is one way to navigate from state to state, by going to the URL directly associated with that state.
[01:03] The two other ways to activate a state are by calling state.go on the state service or via a click on a link containing the ui-sref directive. I'm going to show you how to do both, but let's start with the state service first.
[01:26] We'll hop into the start.js file here and inject the state service into our main controller. Let's go down to where we are setting the current category. We're going to call state.go, and then we're going to pass in the state that we want to go to.
[01:53] In this case, we're going to go to eggly.categories.bookmarks, and then as a second parameter, we are going to send in an object map of the state params that we want to send in. In this case, we want to pass in the category names, so we'll do category.name.
[02:17] Now, when we refresh the page, we'll start at the root. When I click Development, you can see that it's navigating to that state, as well as Design, Exercise, etcetera.
[02:35] That is how to navigate to a state using the state service. It's a really convenient, high-level way to get there, but let's see how to do that using the ui-sref directive.
[02:49] We'll go back in here. I will comment this out. I'm just going to copy the state name here so I do not have to retype it. Let's go into the categories template. You can see here, we have ng-click, and we're using it to set the current category.
[03:07] Right on here, let's add in ui-sref. We are going to use the state name as a method or call it as if it were a method, and then, from here, we will send in, again, an object map with the state params that we want to pass into this method.
[03:33] Category. Category name. Let's refresh this. We will go back to the root. You can see the exact same thing is happening, but now, we're doing it via a click event on the link using the ui-sref directive.
[03:59] Let's do a quick review. Using the ui-sref directive, we pass in the state as a method and then an object map with the state parameters that we need to pass to that state.
[04:12] Or we can also do the same thing using the state service and calling the go method, passing in the state that we want to activate, as well as the object map with the state parameters that we want to pass into that state.
[04:32] We have laid a foundation for how to use ui-router to define and navigate between unique states within Eggly. Stay tuned for the next lesson, where we will start to refactor our category and bookmark models into distinct services so that we can keep our controllers lightweight and focused on just controlling the views that they're associated with. See you in the next lesson.