Hierarchy view not being respected - UI Route (Ionic)

Question

I am working on an Ionic app and I have implemented an on-boarding screen with 3 slides, some text, and <a href="..."> tag to go directly to the start screen.

Now I have noticed that when I hit the <a href="..."> tag I am redirected to the correct view but the nav bar on top has a back button where there should be a hamburger menu icon.

Not sure if I am implementing the routing system right. What is the right why to use routing and respect the hierarchical view?

Html code (on-boarding):

<ion-view view-title="WNRS" hide-nav-bar="true">
  <ion-content scroll="false" has-header="true" class="has-header">
      <ion-slide-box on-slide-changed="slideChanged(index)">
          <ion-slide>
            <h4  class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
            <br><br>
            <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
          <ion-slide>
            <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
            <br><br>
            <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
          <ion-slide>
             <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4>
             <br><br>
             <a ui-sref="app.base1"><h2>Play</h2></a>
          </ion-slide>
      </ion-slide-box>
  </ion-content>
</ion-view>

Part of the app.js code (routing part):

// Routes
app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('app', {
    cache: false,
    url: '/app',
    abstract: true,
    templateUrl: 'components/sidebar_menu/menu.html'
  })

  .state('app.walkthrough', {
    url: '/walkthrough',
    views: {
       'menuContent': {
          templateUrl: 'views/walkthrough/walkthrough.html',
          controller: 'WalkthroughCtrl' 
        }  
      }
  })

  .state('app.base1', {
    url: '/base1',
    views: {
       'menuContent': {
          templateUrl: 'views/base1/base1.html',
          controller: 'Base1Ctrl'
        }  
      }
  })

  .state('app.base2', {
    url: '/base2',
    views: {
       'menuContent': {
          templateUrl: 'views/base2/base2.html',
          controller: 'Base2Ctrl'
        }  
      }
  })

  .state('app.base3', {
    url: '/base3',
    views: {
       'menuContent': {
          templateUrl: 'views/base3/base3.html',
          controller: 'Base3Ctrl'
        }  
      }
  })

  .state('app.add_question', {
    url: '/add_question',
    views: {
      'menuContent': {
        templateUrl: 'views/add_question/add_question.html',
        controller: 'AddQuestionCtrl'
      }
    }
  })

  $urlRouterProvider.otherwise('/app/walkthrough');
});

Answer 1

Two Choices: 1. Make the walkthrough page the parent, and base1, base2, base3 should be child page. But even in this way, if you switch from base1 to base2, you will still see the "back" button on base2 page.

Or you can simply customize the ion-nav-bar in base1, base2, base3 like this:

<ion-view>
  <ion-nav-bar>
    <ion-nav-buttons side="left">
      <button class="button your-hambuger" menu-toggle="left">
      </button>
    </ion-nav-buttons>
    <ion-nav-title>
        Base1
    </ion-nav-title>
  </ion-nav-bar>
  <ion-content>
    Some content  
  </ion-content>
</ion-view>

Update: if you want to disable back button on base1 for example, you can add below code to your base1 controller:

.controller('Base1Ctrl', ['$scope', function ($scope) {
    //add below code to disable back button
    $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
        viewData.enableBack = false; 
    });
}])

Update2: if you want to do some custimization on the nav bar. I think choice 2 is the only option. First go to your menu.html and remove ion-nav-bar part. Copy this part to the pages where you want to show ion-nav-bar with a hamburger icon. For those pages you want to show back button, you can add ion-header-bar code to that page:

<ion-view view-title="Base2">
  <ion-header-bar class="bar-stable" id="nav-bar">
    <button ng-click="goState()" class="button back-button buttons button-clear header-item">
      <i class="icon ion-ios-arrow-back"></i> 
      <span class="back-text"><span class="default-title">Base1</span></span>
    </button>
    <div class="title title-center header-item">Base2</div>
    <button ng-click="goState2()" class="button back-button buttons button-clear header-item">      
      <span class="back-text"><span class="default-title">Base3</span></span>
      <i class="icon ion-ios-arrow-forward"></i> 
    </button>
  </ion-header-bar>
  <ion-content>
     Base2 content
  </ion-content>
</ion-view>

You can add the goState() function in base2 controller or just give an ui-sref to that button