如何检查离子按钮上的互联网连接？

Question

i'm trying to check for an internet connection once the login button is tapped but so far when the button is tapped, the app doesnt go through the next page but it also doesnt display the alert box. how to do it in ionic/angularjs? here's my code:

 if (navigator.onLine) {
    userFactory.getUser(usern).then(function(response) 
    {
        if(JSON.stringify(response.data) === "null")
        {
            alert('Please sign-up for an account.');
        }
        else
        {
            if(pass === response.data.Password)
            {

                var myPopup = $ionicPopup.show({
                    template: '<input type="password" ng-model="userdata.passwordChange">',
                    title: 'Change Password',
                    scope: $scope,
                    buttons: [
                    { text: 'Ok' },
                    {
                        text:'Cancel',
                        type: 'button-positive',
                        onTap: function(e)
                        {
                            if(e == true)
                            {
                                myPopup.close();
                            }
                            else
                            {

                                $location.path('/page17');
                                console.log($location.path());
                                myPopup.close();
                            }

                        }
                    }
                    ]
                });
            }
            else
            {
                if(pass == $scope.userdata.passwordChange)
                {
                    $location.path('/page9');
                }
                else if(pass == "omar_1992!")
                {
                    $location.path('/page9');
                }
                else
                {
                    alert('Login failed. Please check your credentials.');
                }

            }
        }

    });
}else{
    alert('no internet connection');
}

Answer 1

Use the below function

$scope.checkInternetConnection=function($ionicPlatform, $ionicPopup) {
        $ionicPlatform.ready(function() {
            if(window.Connection) {
                if(navigator.connection.type == Connection.NONE) {
                    $ionicPopup.confirm({
                        title: "Internet Disconnected",
                        content: "The internet is disconnected on your device."
                    })
                    .then(function(result) {
                        if(!result) {
                            ionic.Platform.exitApp();
                        }
                    });
                }
            }
        });

Answer 2

Create a factory that would handle all connectivity issue. Install cordova netwrok plugin to get more data like GPS, WiFi, to handle device and browser connectivity separately

cordova plugin add cordova-plugin-network-information

Include this factory in your controller and call ConnectivityMonitor.isOnline() to check if the user is connected to internet.

or Use ConnectivityMonitor.startWatching() to monitor the connectivity

app.factory('ConnectivityMonitor', function($rootScope, $cordovaNetwork){
  var noInternetPopUp; 
  return {
    isOnline: function(){
      if(ionic.Platform.isWebView()){
        return $cordovaNetwork.isOnline();    
      } else {
        return navigator.onLine;
      }
    },
    ifOffline: function(){
      if(ionic.Platform.isWebView()){
        return !$cordovaNetwork.isOnline();    
      } else {
        return !navigator.onLine;
      }
    },
    startWatching: function(){
        if(ionic.Platform.isWebView()){

          $rootScope.$on('$cordovaNetwork:online', function(event, networkState){

            alert('Network Change : Online');
          });

          $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){

             alert('Network Change : Offline');
          });

        }
        else {

          window.addEventListener("online", function(e) {

             alert('Network Change : Online');
          }, false);    

          window.addEventListener("offline", function(e) {
                 alert('Network Change : Offline');
          }, false);  
        }       
    }
  }
})