App Exit NOT working on pressing the back button in Android App (Phonegap & AngularJS)
Question
I'm new to App dev using AngularJs and PhoneGap, so I may be doing something wrong here (please rectify). My objective is to make the App exit if anyone presses the BackButton in Android when the /viewInitialDepartments is active (ie when the user is in that view). Relevant Codes are as follows :-
Of my index.html page:-
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
<meta http-equiv="x-ua-compatible" content="ie=10">
<meta name="msapplication-tap-highlight" content="no" >
<link rel="stylesheet" href="css/module-reset.css" ><link rel="stylesheet" href="css/module-grid.css" ><link rel="stylesheet" href="css/module-all.css" ><link rel="stylesheet" href="css/module-transitions.css"><link rel="stylesheet" href="css/module-custom.css" > <link rel="stylesheet" href="css/styleMenu.min.css">
<title>ad</title>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-cloak ng-app="askDadaApp">
<div id="mainBodyWrapper">
<div class="page {{ pageClass }}" ng-view></div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-touch.js"></script>
<script src="js/ngprogress.min.js"></script>
<link rel="stylesheet" href="css/ngProgress.css" >
<script src="js/script-controller.js"></script>
</body>
</html>
Of my Angular JS Contol Page ( script-controller.js ) :-
var adApp = angular.module('adApp',['ngRoute', 'ngAnimate','ngTouch','ngProgress']);
adApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {templateUrl: 'views/1-setconnection.html',controller: 'setController' })
.when('/viewInitialDepartments', {templateUrl: 'views/2-viewInitialDepartments.html',controller: 'viewInitialDepartmentsController' })
.when('/offLine', { templateUrl: 'views/1-offLine.html',controller:'offLineController'})
});
// CONTROLLERS
adApp.controller('offLineController', function($scope, $http, $location, $routeParams ) { $scope.pageClass = 'normal';var notOnlineToast = document.getElementById("notOnlineToast");notOnlineToast.style.display="block";
});
adApp.controller('setController', function($scope, $http, $location) {
var typeList = "CHECKCONNECTION";
$http.get("URL/php/fetchData.php?typeList=" + typeList )
.error(function(response) {$location.path('/offLine');
// if not offline then go to Home View (viewInitialDepartments)
$location.path('/viewInitialDepartments');
});
adApp.controller('viewInitialDepartmentsController', function($scope, $http, $location, $routeParams) {
var typeList = "CHECKCONNECTION";
$http.get("URL/php/fetchData.php?typeList=" + typeList )
.error(function(response) {
$location.path('/offLine');
});
// REST OF THE CODE
});
My config.xml file has the declaration :-gap:plugin name="org.apache.cordova.dialogs"
Now the thing is that I need to know how to make the App exit on pressing the BackButton on Android Phone while the user is in /viewInitialDepartments view. Please help . (Everything else is working fine as expected.)
EDIT - I guess this could be achieved using document.addEventListener("deviceready", onDeviceReady, false); and document.addEventListener("backbutton") but don't know how to do that in my present code as such that the backButton does what it does for all other views and just make the App close only when in /viewInitialDepartments view.
1 answers
solution1
0 2015-12-22 04:53:20
Define global variable to store current route(view) name
var CURRENT_ROUTE;
Assign value to CURRENT_ROUTE on route change
var adApp = angular.module('adApp',['ngRoute', 'ngAnimate','ngTouch','ngProgress']).run([
'$rootScope',
function ($rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next) {
CURRENT_ROUTE = next;
});
}]);
Perform action on back button
document.addEventListener("backbutton", function(){
if(CURRENT_ROUTE === yourviewname){
navigator.app.exitApp(); // exit app
}
}, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.