Reload and check if user is connected to phone stuck with angularjs
I am using phonegap to build an app. I will manage to check if the user is connected to the internet or not. But if the user is not connected. I want to put a button so the user can click on reload and the page will reload. This is what my code looks like:
<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>
I want the user to click on <ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button>
that button and then reconnect to the page they left off at.
Here I am using the ONE PAGE TEMPLATE structure.
If you want to take a look at the controller then for reference I am using this below controller where I am not using ng-view / route at all.
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;
}
});
});
Do I have to use a route here? Or is there any other way to do the same?
I just want to use page reload and stay on the same page without restarting the process.
source to share
You can use Network cordova plugin
.
https://github.com/apache/cordova-plugin-network-information
Install
cordova plugin add https://github.com/apache/cordova-plugin-network-information
Sample code
function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
checkConnection();
source to share