Clicking the device back button closes the app instead of going back to previous page

If click any ion-item it open the desired page but if i click device back button it close the app rather than going back to previous page in android:

This is my ionic side menu:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon icon ion-android-menu" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title"></h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close ui-sref="app.search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Here is app.js :

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search/default.html'
      }
    }
  })
  .state('app.search-form', {
    url: '/search-form',
    views: {
      'menuContent': {
        templateUrl: 'templates/search/search-form.html'
      }
    }
  })

One solution I found:

$ionicHistory.nextViewOptions({        
  disableBack: true,
  historyRoot: true
});      

So when you click a button and going to next page, this will will disable back button.

Solution 1:

The default behaviour of the back button is as follows: Go back in history - if the history stack is empty -> exit the app.

So you should check the $state you are in, when you tap the hardware back button.

With the following code (placed in the run function of your module) you can overwrite the default behaviour. For example you can disable the app exit like this:

$ionicPlatform.registerBackButtonAction(function (event) {
  if($state.current.name=="app.home"){
    navigator.app.exitApp(); //<-- remove this line to disable the exit
  }
  else {
    navigator.app.backHistory();
  }
}, 100);

See the documentation for $ionicPlatform.

Solution 2:

It is the menu-close attribute in the side menu that clears the history. You could experiment by replacing it with menu-toggle="left". That will still close the side bar but keep the history.

I ended up overriding the behaviour for the HW back key like below. It sends the user to the starting view before exiting the app when pressing back. Note that I still use the menu-close attribute in the side menu. Also note I happen to store the start url in window.localStorage["start_view"] because it can change in my app. Hope it can help/inspire someone else with this problem.

$ionicPlatform.registerBackButtonAction(function(event) {
    if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
      // Goto start view
      console.log("-> Going to start view instead of exiting");
      $ionicHistory.currentView($ionicHistory.backView()); // to clean history.
      $rootScope.$apply(function() {
        $location.path(window.localStorage["start_view"]);
      });
    } else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
      console.log("-> Exiting app");
      navigator.app.exitApp();
    } else {
      // Normal back
      console.log("-> Going back");
      $ionicHistory.goBack();
    }
  }, 100);