Page navigation with Tabs

ionic-v1
1 



.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

     .state('eventmenu', {
         url: "/event",
         abstract: true,
         templateUrl: "templates/menu.html"
     })

  .state('eventmenu.tab', {
      url: "/tab",
      views:{
          'menuContent': {
          templateUrl: "templates/tabs.html",
          controller: "CartCtrl"
      }
      }
      
  })


.state('eventmenu.tab.near', {
    url: '/near',
    views: {
        'tab-near': {
            templateUrl: 'templates/tab-near.html',
            controller: 'NearCtrl'
        }
    }
})
    .state('eventmenu.tab.near-detail', {
        url: '/near/:itemID',
        views: {
            'tab-near': {
                templateUrl: 'templates/item-detail.html',
                controller: 'ItemDetailCtrl'
            }
        }
    })
.state('eventmenu.tab.shops', {
    url: '/shops',
    views: {
        'tab-shops': {
            templateUrl: 'templates/tab-shops.html',
            controller: 'ShopsCtrl'
        }
    }
})
   .state('eventmenu.tab.shop-detail', {
       url: '/shops/:itemID',
       views: {
           'tab-shops': {
               templateUrl: 'templates/item-detail.html',
               controller: 'ItemDetailCtrl'
           }
       }
   })
.state('eventmenu.tab.stuffs', {
    url: '/stuffs',
    views: {
        'tab-stuffs': {
            templateUrl: 'templates/tab-stuffs.html',
            controller: 'StuffCtrl'
        }
    }
})
    .state('eventmenu.tab.stuff-detail', {
        url: '/stuffs/:itemID',
        views: {
            'tab-stuffs': {
                templateUrl: 'templates/item-detail.html',
                controller: 'ItemDetailCtrl'
            }
        }
    });

$urlRouterProvider.otherwise('/event/tab');

})

This is my app.js.



    <ion-tabs class="tabs-icon-top tabs-primary">

        <ion-tab title="Deals near you" icon-off="ion-ios-location" icon-on="ion-ios-location" href="#/event/tab/near">
            <ion-nav-view name="tab-near"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Shops" icon-off="ion-android-cart" icon-on="ion-android-cart" href="#/event/tab/shops">
            <ion-nav-view name="tab-shops"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Stuffs" icon-off="ion-android-list" icon-on="ion-android-list" href="#/event/tab/stuffs">
            <ion-nav-view name="tab-stuffs"></ion-nav-view>
        </ion-tab>


    </ion-tabs>





This is my tabs view


I also have a side menu in the main page. menu.html.


Everything is working fine, but when i goto details page(eg: stuff-detail), back button will always got back to the first tab.


 href="#/event/tab/shops/{{item.id}}" 


This is how i goto details from each tab. This is each item in ion-list.


I’m little confused with the state changes in ionic, bcz I’m learning angular when I started with Ionic.


Ionic is suprb… :smile:


Thanks in advance

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              3
              
            

            

              
every back button from details is going to the url referenced in ‘otherwise’. Please help