Hardware Back Button on Application Main Page

ionic-v1
1

Original posted here, but as @Gajotres pointed out to start a new topic.

Hello.

I am trying to find out a way such that when the hardware back button is pressed, if I am on the application’s main page, the application will simply exit. But if it is on the other pages, then it would simply navigate back to each page until it reaches the main (home page).

Current structure of the HTMLs:

index.html
  home.html
    page1.html
      sub-page-a.html
      sub-page-b.html
  page2.html
      sub-page-c.html
      sub-page-d.html

Currently, what’s happening is that when I am at home page, I click on button and goes to page1. I click on the home button to go back to home.html. Then I would go to page2.html all the way to sub-page-c.html. Now when I click the back button, I go from sub-page-c to page2 to home then to page1.html. What I want to achieve is whenever I am already at home.html, the back button will simply correspond to an exit application.

Side Question: Just wondering, if you are using the Chrome Debugger and using the emulator for the application, is the browser back button the same as the back button for the hardware (Android device)? Or would it still be preferable to generate an APK and load it to your device and test?

2

@AngeloA

The Ionic framework uses the angular-ui-router module for handling routes and defining states (including nested states and nested views). So, it would be good if you could phrase your question in terms of the states you have defined and wish to transition from/to.

Ref: http://robferguson.org/2015/07/19/using-ui-router-for-handling-routes-defining-states-and-sharing-data-between-views/

3

I’ll take a quick look at the article you posted and will get back to here with a minified version of the application codes I have done so far.

4

UPDATE: Code has been modified. I cannot seem to get the android hardware back button to work as I wanted to.

Short Gist of what I am trying to achieve:
In the main (home.html) page, I need that the Back Button when pressed, a function is triggered.

app.js

var testApp = angular.module('testapp', ['ionic']);

testApp.run(function($ionicPlatform, $ionicPopup, $state){
    $ionicPlatform.ready(function(){
        if(window.cordova && window.cordova.plugins.Keyboard){
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        
        if(window.StatusBar){
            StatusBar.styleDefault();
        }
    });
    
 	$ionicPlatform.registerBackButtonAction(function(event){
         // TEST BACK BUTTON FROM RUN FUNCTION.
		 alert("BACK BUTTON CLOSING");
 	}, 101);
});

testApp..config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("home", {
            url: "/home",
            templateUrl: "templates/home.html",
            controller: "HomeCtrl",
            cache: false
        })

        .state("users", {
            url: "/users",
            templateUrl: "templates/users.html",
            controller: "UserCtrl",
            cache: false
        })

  $urlRouterProvider.otherwise('/home');
});

testApp.controller('HomeCtrl', function($scope, $ionicPlatform, $ionicModal){
	var homeBackButton = $ionicPlatform.registerBackButtonAction(
		function(){
                        // TEST BACK BUTTON FROM HOME VIEW.
			alert("Back Button in Home");
		}, 100
	);
	
	$scope.$on("$destroy", homeBackButton);
});

I want to run a function when the hardware back button is pressed and I only want that to get triggered when I am on the home.html template view.

Notice that I’ve defined the same on the HomeCtrl, but for some reason, it is not getting called or anything.

I must be missing something.

Appreciate any further insight.

Thanks.

5

I’m doing it like this:

  $ionicPlatform.registerBackButtonAction(function(event) {
    if ($ionicHistory.backView() === null) {  // no more previous screen in the history stack, so "back" would exit
      $ionicPopup.confirm({
        title: 'Plase confirm',
        template: 'Are you sure you want to exit the app?'
      }).then(function(res) {
        if (res) {
          ionic.Platform.exitApp();
        }
      })
    } else {
      $ionicHistory.goBack();
    }
  }, 100);  // 100 = previous view

Please check if that would work for you.

6

Tried, but this did not work.

When I am at the Home page, pressing the back button, I still go back to the previous page which I viewed.

Thanks for the codes though. I am running out of ideas though why I can’ seem to capture that back button.

7

Well, I have to say that for me it also does not work perfect, yet. In some cases the back button does what I want and in some cases it does nothing. The whole navigation and history stuff is quite complicated.

But, before putting in this code it would quit my app and now it doesn’t do that anymore, I get a nice warning now so that’s already an improvement. When I get to know more or have more improvements I’ll let you know.