Nested abstract views tabs and side menu

Hi there,

I’m a novice ionic coder, so my apologies in advance if I’m trying to do something silly. I have a test app using code I’ve lifted from other samples which has a left side menu. When I navigate to a specific page from the side menu, I would like to display tabs for that page. For each of those tabs, I was hoping display content from a template file. So based on the code that I have lifted, I have a file called mainContainer.html


<ion-pane ion-side-menu-content>
    <ion-nav-bar type="bar-positive"

    <ion-nav-view name="main"></ion-nav-view>

<ion-side-menu side="left">
    <header class="bar bar-header bar-assertive">
        <div class="title">Side Menu</div>
    <ion-content has-header="true">
        <ul class="list">
            <a ui-sref="entry" class="item">Back To Entry Page</a>
            <a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
            <a ui-sref="" class="item" ng-click="toggleMenu()">Tabs</a>

and when I navigate to the, I have an abstract main.tabs view where I want to display content for each of the tabs.

So router section of the app.js looks like this:

angular.module('ionicApp', ['ionic'])

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

        .state('entry', {
            url : '/entry',
            templateUrl : 'templates/entry.html',
            controller : 'EntryPageController'

        .state('main', {
            url : '/main',
            templateUrl : 'templates/mainContainer.html',
            abstract : true,
            controller : 'MainController'

        .state('main.home', {
            url: '/home',
            views: {
                'main': {
                    templateUrl: 'templates/home.html',
                    controller : 'HomePageController'

        .state('', {
            url: '/info',
            views: {
                'main': {
                    templateUrl: 'templates/info.html',
                    controller : 'InfoPageController'

        .state('main.tabs', {
             url: '/tabs',
                abstract: true,
                     templateUrl: 'templates/tabs.html',
                     controller : 'TabsPageController'
        .state('', {
        url: '/tabs-info',
        views: {
            'tabs-info': {
                templateUrl: 'templates/tabs-info.html',
                controller : 'TabsPageController'
        .state('main.tabs.stuff', {
        url: '/tabs-stuff',
        views: {
            'tabs-stuff': {
                templateUrl: 'templates/tabs-stuff.html',
                controller : 'TabsPageController'

The tabs template file looks like this:

<ion-tabs tabs-type="tabs-icon-only">
    <ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="">
      <ion-nav-view name="info"></ion-nav-view>
    <ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="main.tabs.stuff">
        <ion-nav-view name="stuff"></ion-nav-view>

The sample code that I’ve seen has for each of the tabs, . I want to do something similar but in this case I want to have separate template files instead. Thanks in advance for any help/suggestions.


Just a friendly bump. I just found this thread which looks like it may give me what I need. Using Sidemenus and tabs together

Hi , Did you resolved this nested abstract states with tabs & side menu together?

You can try the following plunker. It is working:

Tabs with Side Menu