I have an application using tabbed navigation, and two of the three tabs essentially serve as ways to sort the same data set (a list of stores) differently. On either tab, the user can select a store to see details. This all works fine but is a little kludgey, all to let me go back to the right tab using a single template (favorite-store-list.html and nearby-store-list.html are also the same, save for providing a different url that the detail view can grab onto):
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: 'templates/tabs.html'
})
// the favorites and nearby tab use the same template, just sort differently
.state('tab.favorites', {
url: '/favorites',
views: {
'tab-favorites': {
templateUrl: 'templates/tab-favorite-store-list.html',
controller: 'StoreFavsCtrl',
title: 'Favorite Stores'
}
}
})
.state('tab.nearby', {
url: '/nearby',
views: {
'tab-nearby': {
templateUrl: 'templates/tab-nearby-store-list.html',
controller: 'StoreNearbyCtrl',
title: 'Nearby Stores'
}
}
})
// We need two routes for the store detail tab since ionic can't handle the "back" button in the tabbed
// interface without it.
.state('tab.store-fav-detail', {
url: '/store/fav/:storeId',
views: {
'tab-favorites': {
templateUrl: 'templates/store-detail.html',
controller: 'StoreDetailCtrl'
}
}
})
This is fine, but the detail view is eventually going to have several sub views (at least two or three additional levels). To keep navigation intact, am I correct in assuming I’ll need to create double the .state directives?