AngularJS Architecture: navigating between states with ui-router

Share this video with your friends

Send Tweet

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.

Nathan
Nathan
~ 9 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
~ 9 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 Ruebbelke(instructor)
~ 9 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
~ 9 years ago

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

skelesp
skelesp
~ 8 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
~ 8 years ago

Thank you for sharing, it solved my problem.