![[Angular-Scaled Web] 6. Navigating between states with ui-router [Angular-Scaled Web] 6. Navigating between states with ui-router](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
There are two ways to naviagting between state:
1. Using $state service, $state.go()
2. Using ui-serf diretive
$state.go
Inject $state service.
.controller('MainController', function ($scope , $state) { ... function setCurrentCategory(category) { $scope.currentCategory = category;
$state.go('eggly.categories.bookmarks', {category: category.name}); cancelCreating();
cancelEditing();
} ....
$state.go('eggly.categories.bookmarks', {category: category.name}),
in which eggly.categories.bookmarks is state name in bookmarks.js and category: is the state param.
.config(function ($stateProvider) {
$stateProvider
.state('eggly.categories.bookmarks', {
url: 'categories/:category',
views: {
'bookmarks@': {
controller: 'BookmarksController',
templateUrl: 'app/categories/bookmarks/bookmarks.tmpl.html'
}
}
}) })
ui-sref
<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
<a ui-sref="eggly.categories.bookmarks({category: category.name})" ng-click="setCurrentCategory(category)">
{{category.name}}
</a>
</li>
</ul>
ui-sref="eggly.categories.bookmarks({category: category.name})", using state name: eggly.categories.bookmarks , as here function name.