[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.