I am currently developing an app using PhoneGap. I have successfully implemented a feature to check if the user is connected to the internet or not. However, if the user is not connected, I would like to provide a button for them to click on in order to reload the page. Below is a snippet of how my code is structured:
<ons-template id="directory.html">
<ons-navigator var="app.navi" >
<div ng-if="online"> <!-- Check If user is online or not -->
<ons-page ng-controller="directoryControl">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Directory List</div>
</ons-toolbar>
<p>Yes you are Connected!</p>
</ons-page>
</div>
<div ng-if="!online">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Directory List</div>
</ons-toolbar>
<p>Oops! You are not online..!<br/><ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button></p>
</ons-page>
</div>
</ons-navigator>
</ons-template>
In this code snippet, the
<ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button>It's worth noting that I am utilizing a ONE PAGE TEMPLATE structure for this app.
If you're interested in the controller logic, here is the controller function used in the app where I am not incorporating ng-view/route:
module.controller('directoryControl', function($scope, $http, $rootScope, ajaxCall) {
ons.ready(function() {
var dataURL = "get_category_index";
var valuePickup = "categories"
ajaxCall.GetIndex($scope, dataURL, valuePickup);
$scope.setCurrentCategory = function(categoryName){
$scope.CurrentCategory = categoryName;
$rootScope.CurrentCategory=$scope.CurrentCategory;
}
});
});
As mentioned earlier, the objective is to allow users to easily reload the page without restarting the entire process. Is it necessary to use route for achieving this functionality, or are there other methods available?
The main goal is to enable users to quickly reload the page and resume from where they left off without any hassle.