How to set tabbed sidemenu in Ionic?

Question

In my opinion, having sidemenu for things like settings and pages, combined with tabs for the main application is a pretty important and standard application interface. Things like the Google Messenger app use this.

I am struggling to make it work, and I see that there are many questions about this with very little satisfactory information. I combined sidemenu with free kicks. It should be just as easy. I used to use jQuery Mobile for my applications, which is much more awkward than Ionic, but making such an interface is easy and it works well.

The problem I ran into is tabs that don't load into tabs. It might be something stupid that I'm missing out on, but here is my app.js code snippet:

config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "templates/menu.html", controller: 'AppCtrl' }) .state('app.tabs', { url: "/tabs", views: { 'menuContent': { templateUrl: "templates/tabs.html" } } }) .state('tab.tab1', { url: 'tab/tab1', views: { 'tab-tab1': { templateUrl: 'templates/tab-tab1.html', controller: 'tab1Ctrl' } } }) .state('tab.tab-tab2', { url: 'tab/tab2', views: { 'tab-tab2': { templateUrl: 'templates/tab-tab2.html', controller: 'tab2Ctrl' } } }) .state('tab.extras', { url: 'tab/extras', views: { 'tab-extras': { templateUrl: 'templates/tab-extras.html', controller: 'AccountCtrl' } } }) .state('app.about', { url: "/about", views: { 'menuContent': { templateUrl: "templates/about.html", controller: 'aboutCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/tabs'); }); 

The side menu works great, and I can navigate with it to the about page or back to tabs. Tabs work so that they change focus, and icons change color, but templates do not load into them. I checked the URL names three times twice.

Does anyone know how to do this? If I made a small mistake somewhere and made it, I will use Codepen as an example of how to create this imho much needed interface.

Edit: on request.

 <ion-tabs class="tabs-icon-top tabs-color-active-assertive"> <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1"> <ion-nav-view name="tab-tab1"></ion-nav-view> </ion-tab> <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2"> <ion-nav-view name="tab-tab2"></ion-nav-view> </ion-tab> <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras"> <ion-nav-view name="tab-extras"></ion-nav-view> </ion-tab> </ion-tabs> 

I think they all match, no?

Note. Regarding the request that this is a duplicate; my application is a tabbed application with a side menu on the base page. Another question concerns an application with a series of sections, one of which has tabs. This is a completely different structure.

Answer 1

I think your routing is a bit off - your child states for the tabs are not fully declared. You declared them like this:

 .state('tab.tab1', { 

... and you never declared the parent state of tab . Therefore, they remain “hanging” until the parent state is declared. ui-router simply ignores them until this happens.

try it

 config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "templates/menu.html", controller: 'AppCtrl' }) .state('app.tabs', { url: "/tabs", views: { 'menuContent': { templateUrl: "templates/tabs.html" } } }) .state('app.tabs.tab1', { url: '/tab1', views: { 'tab-tab1': { templateUrl: 'templates/tab-tab1.html', controller: 'tab1Ctrl' } } }) .state('app.tabs.tab2', { url: '/tab2', views: { 'tab-tab2': { templateUrl: 'templates/tab-tab2.html', controller: 'tab2Ctrl' } } }) .state('app.tabs.extras', { url: '/extras', views: { 'tab-extras': { templateUrl: 'templates/tab-extras.html', controller: 'AccountCtrl' } } }) .state('app.about', { url: "/about", views: { 'menuContent': { templateUrl: "templates/about.html", controller: 'aboutCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/tabs'); }); 

And it’s better / clearer to use ui-sref rather than href in your tab template - it’s easier to see what state something is mapped to

 <ion-tabs class="tabs-icon-top tabs-color-active-assertive"> <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1"> <ion-nav-view name="tab-tab1"></ion-nav-view> </ion-tab> <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2"> <ion-nav-view name="tab-tab2"></ion-nav-view> </ion-tab> <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras"> <ion-nav-view name="tab-extras"></ion-nav-view> </ion-tab> </ion-tabs> 

Not verified, but I think it can be fixed! Any errors in the BTW console?