Side menu + tabs OR Tabs + side menu

ionic-v1
1

Everyone knows that Tabs + Side Menu is a useful and common setup.

However, we don’t have a starter for this.

I’ve hacked together a compromise in the past but occasionally I find issues with it. Here’s he layout, with the side menu being the abstract state.

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 problems I have with it are this:

  1. Going to the about page (app.about) alters the header title which persists even when navigating back to other sections, eg even when going to app.tabs. This navigates to the last tab (and sub section!) navigated to, which is really good. But the title stays the same as the about pages.

There are work arounds (no titles, all the same title) but the only way to do it if you have titles is to go back to tab.tab1 and you lose the history state saving.

  1. Occassionally I just lose the back button. I don’t know why and I’ve look all over. I’ve even compared the code from an app where this happens and another where it doesn’t. At length. And I just cannot see why.

So - to the question.

When building this set up should one start from a sidemenu starter or a tabs starter?

2

Has no one any ideas nor opinion on this?