I am currently working on a web application that consists of multiple pages with tabs within one of them. To navigate between the tabs, I have implemented routes using the ng-view directive for the parent page and an ng-switch within a small div to display different content based on the route parameter. However, I am facing an issue where the page reloads every time I switch tabs, even though the view remains the same but the tab changes.
Below is a simplified example of my implementation (using CoffeeScript and Jade):
index.jade
body(ng-view)
page.jade
section.menu.pull-left
nav
ul
li(ng-class="{active: route.tab == 'order'}")
a(href="#page/order" target="_self")
i.fa.fa-cab
small order
li(ng-class="{active: route.tab == 'favorites'}")
a(href="#page/favorites" target="_self")
i.fa.fa-star
small favorites
Tabs:
.display(ng-switch="route.tab")
.tab(ng-switch-when="order")
div(ng-include="'views/page/order.html'")
.tab(ng-switch-when="favorites")
div(ng-include="'views/page/favorites.html'")
The configuration file for routing:
app.config ['$routeProvider', ($routeProvider) ->
$routeProvider
.when '/',
templateUrl : 'views/login.html'
controller : 'loginCtrl'
tab : ''
.when '/page/:tab',
templateUrl : 'views/page.html'
controller : 'pageCtrl'
]
I need the page.jade to remain static while the tabs dynamically change. The empty controller doesn't seem to be the cause of the issue. I'm not sure what steps to take next. Any help would be greatly appreciated!