Tabs and sidemenu - should be a standard set-up

ionic-v1
1

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

I’m struggling to get it working and I see there are a lot of questions about it with very little satisfactory information. I’ve combined a sidemenu with swipeboxes fine. This should be just as easy. I used to use jQuery Mobile for my apps, which is much more clunky than Ionic but doing an interface like this is easy and it works well.

The problem I’m having is the tab templates don’t load into the tabs. This may be something silly I’m missing 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 fine and I can navigate with it to the about page or back to the tabs. The tabs work in that they change focus and the icons change colour, but the templates don’t load into them. I’ve tripple double checked the url names.

Does anyone know how to do this? If I’ve made a small error somewhere and get it working I’ll Codepen this as an example of how to create this, imho, much needed interface.

2

I got the answer from a friend on Stackoverflow.

If I use ui-sref instead of href it seems to work fine. Oh, and I’ve changed the state of the tabs to app.tabs.tab1 etc.

3

yeah maybe ionic should update their docs, because you should never use “href” attribute… if you use ui-router use ui-sref or a click-function with $state.go - call.

Without ui-router you should prefer the ng-href - directive.

4

It’s not even the docs - that’s what you get with the Tabs starter app.