HardwareBackButton in ionic

This will show you how to handle the user pressing the hardware back button on an android device. Hardware back button will catch an event on android when the button will click it will redirect to the previous page. Hardware back button redirects to the previous page but in some app, page redirects to other pages so we can register for back button functionality. Override the hardware button by registerbackbutton() function. This mechanism used as push the all opening pages in the app and when clicking the hardware back button, it pops all pages. Default app mechanism for the ionic app redirects the previous page and clicking the back button from root page it will close the app.

Override hardware back button

Exit an app

In the app, when the page must be set the main page, then the page does not have the previous page. when we click the hardware back button in android it will close the app. so the page must be root page when the user clicks the back button, it will indicate about closing the app. IonicPopup() function used to indicates for the user, an ionic popup will give the popup option(are you sure you want to exit the app?).

IonicPopup() function allows creating and showing popup windows, then the user to respond to this function. This popup support to built-in alert(), prompt() and confirm() function. registerbackbutton() function call from all controller to set the individual setting for the pages. $ionicplatform get the information about the current device.

angular.module('home.ctrl', [])
 .controller('homeCtrl', ['$scope', '$ionicModal', '$timeout','$ionicPopup','$ionicPlatform',
   function($scope, $ionicModal, $timeout,$ionicPopup,$ionicPlatform) {
            var vm = this;
              var demo = $ionicPlatform.registerBackButtonAction(
              function() {
                   $ionicPopup.confirm({
                   title: 'Ooops',
                   template: 'Are you sure you want to exit the app?'
               }).then(function(res) {
               if (res) {
                 ionic.Platform.exitApp();
              }
           })
         }, 100
       );
  }]);

Register normal previous

In the previous topic, the back button gets the alert options to close the app. In the app, hardware back button will redirect only the previous page. so the user must register back functionality with registerbackbutton() function. this function will be defined in the controller page. Import the ionic platform to get information about the current device. Then use the registerbackbutton in controller page and navigate to other when we click the hardware back button.

angular.module('home.ctrl', [])
.controller('homeCtrl', ['$scope', '$ionicModal', '$timeout','$ionicPopup','$ionicPlatform',
  function($scope, $ionicModal, $timeout,$ionicPopup,$ionicPlatform) {
         var demo = $ionicPlatform.registerBackButtonAction(
              function() {
               window.location = "#/login";
              }, 100
         );
 }])        

Register back button in app.js

Registerbackbutton is used navigate to the previous page and it will use in app.js. Then the function is globally written for the controller. Import the ionicplatform and state declarative variable. Open ionicplatform() function to automatically call when the app is ready, in this function use register back button function as navigator. ionicplatform get all details of the current device and navigate keyword is used to navigate from one page to another page and it will use store the root page. window and $state.go also used for navigating from one page to another page.

$stateProvider
 .state('home', {
            url: "/home",
             abstract: true,
              templateUrl: "app/home.html",
              controller: 'homeCtrl'
   })

Now it's time to join two topics on a single page, first check the page is root or not, if the page is root page, an ionic popup will give the confirm options to close the app. in next step check the state of the page, and copy the state page and insert in the navigation keyword, now navigate keyword will navigate to the same page listed in the function.

angular.module('starter', ['ionic','ngStorage','starter.controllers','ui.bootstrap','ngCordova'])
.run(function($ionicPlatform,$ionicHistory,$state,$rootScope,$ionicPopup) {
      $ionicPlatform.registerBackButtonAction(function (event) {
        if ($ionicHistory.currentStateName() === 'home'){
           $ionicPopup.confirm({
               title: 'Ooops',
               template: 'Are you sure you want to exit the app?'
            }).then(function(res) {
             if (res) {
              ionic.Platform.exitApp();
             }
             })
        } else if ($ionicHistory.currentStateName() === 'login'){
        navigator.app.exitApp();
        } else if ($ionicHistory.currentStateName() == 'profile'){
        $state.go('home');
        }else {
           $window.history.back();
         }
        }, 100);
 }])