Need help with side menu template and back navigation

ionic-v1
1

Hi. i think that this is the right category to post this. If not, please accept my apologies. I am fairly new to ionic and angular. I created a project using the sidemenu template. I changed it so that the default page that loads is the login page (different than the one supplied on the template). When the login is successful, the “main” page load. However, it loads with the back button (< Back) next to the side menu icon. I do not know how to make the back button not show up on the main page.

Here’s my login.html

<ion-view title="{{ Title }}">
  <ion-content class="has-header">
    <div class="list">
      <div class="button-bar">
        <a class="button button-balanced" href="#/app/signUp">Create new account</a>
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <div style="color: red; font-size: medium;" align="center">&nbsp;{{ message }}</div>
      <label class="item item-input">
        <input type="email" ng-model="user.email" placeholder="Email" required>
      </label>
      <label class="item item-input">
        <input type="password" ng-model="user.password" placeholder="Password" required>
      </label>
      <p>&nbsp;</p>
      <div class="button-bar">
        <a class="button button-clear button-positive" ng-click="login(user)">Login</a>
      </div>

    </div>
  </ion-content>
</ion-view>

Here’s my controller.js

.controller('LoginCtrl', function($scope, $state, UserFactory) {
  $scope.Title = "Login";
  $scope.login = function(data) {
    var result = UserFactory.validateUser(data);
    if (result) {
      $state.go('app.upcomingGames');
    }
    else {
      $scope.message = "E-mail / Password entered is invalid";
    }
  }
})
2

And here’s my app.js

.state('app.login', {
  url: "/login",
  views: {
    'menuContent' :{
      templateUrl: "templates/login.html",
      controller: 'LoginCtrl'
    }
  }
});

Here’s my UpcomingGames.html

<ion-view title="Upcoming Games">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <div class="list">
      <div class="item item-divider">
        Active Player: {{ ActivePlayerName }}
      </div>
      <div class="item item-input item-select">
        <div class="input-label">Team</div>
        <select ng-model="curTeam" ng-options="t.name for t in Teams"></select>
      </div>
      <div class="item item-divider">
        Upcoming Games
      </div>
      <a class="item" ng-repeat="g in Games" href="#/app/enterStats/{{ g.id }}">
        Date: {{ g.date }} Time: {{ g.time }}<br>
        Place: {{ g.place }} <br>
        Opponent: {{ g.opponent }}
      </a>
    </div>
  </ion-content>
</ion-view>
3

Try adding hide-back-button=“true” to the view where you don’t want the back button displayed.

For example

<ion-view title="Upcoming Games" hide-back-button="true">
1 Like
4

Thank you. That did the trick. I really appreciate your help.

1 Like