AngularJS Architecture: navigating between states with ui-router

Lukas Ruebbelke
InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 9 months ago

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.

Nathan
Nathan
~ 7 years ago

In this lesson you show how you can navigate to a specific state via the url. You show that by changing the url you can filter the bookmarks to a specific category. What I don't see is the left hand category navigation updating when you do that. If you click a category on the left it will be marked active. How do you achieve this via a url.

John Michelin
John Michelin
~ 6 years ago

My params are immediately reset to undefined/empty object when I click on a category. Any ideas? $scope.currentCategoryName => Development bookmarks.js:23 $stateParams => Object {category: "Development"} bookmarks.js:22 $scope.currentCategoryName => undefined bookmarks.js:23 $stateParams => Object {}

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 6 years ago

Hey John, Good catch! There was a bug in the code; in the categories template, we were using main.category.name when we should have used main.currentCategory.name. This has been fixed, so please pull down the latest version of the branch.

John Michelin
John Michelin
~ 6 years ago

Thank you for the fast response! I am loving that darcula theme.

skelesp
skelesp
~ 5 years ago

I had a problem trying to use this lesson in my project. I found the issue, but I think it's useful to mention it here too for others with the same problem.

The $state.go is only working when the link containing the setCurrentCategory() function, doesn't have a href="#" attribute. Maybe I missed the removal in an earlier lesson, but it's safe to mention it again.

Sina
Sina
~ 5 years ago

Thank you for sharing, it solved my problem.