[Angular-Scaled Web] 6. Navigating between states with ui-router

时间:2023-03-09 00:31:38
[Angular-Scaled Web] 6. Navigating between states with ui-router

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.

[Angular-Scaled Web] 6. Navigating between states with ui-router