Reload and check if user got connected to phonegap using angularjs

Question

i am using phonegap to create an app. I am successful to check if the user is connected to internet or not. But If the user is not connected. I want to put a button so user can click on reload and page will be reloaded. Here is how 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 user to click on <ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button> this button and then can reconnect to the page where the left off.

Here i am using ONE PAGE TEMPLATE structure.

If you want to have a look at 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;
            }
        });
    });

Is it compulsory here to use route? Or is there any other method to do the same?

I just want use to reload the page and stay on the same page without restarting the process.

Answer 1

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();