Ionique: Vérifier la Connexion Internet à l'aide de Cordova

Pour toute personne qui le visitent et avoir des problèmes avec l'obtention Armed10 la réponse de travail, vous voudrez peut-être vérifier le post que j'ai écrit qui va littéralement étape par étape, vous indiquant où et pourquoi vous devriez mettre un morceau de code (peut être utile si vous êtes juste de commencer avec l'Ionique): http://www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/.

Aussi, j'ai fait l'exemple de code disponible gratuitement sur Github: https://github.com/Hitman666/IonicNetworkInfo.

edit: Comme par StackOverflow règles, je suis en ajoutant le contenu du poste ici aussi:

Étape par étape sur la façon de faire vous-même

Commencer une nouvelle Ionique projet en faisant:

ionic start IonicNetworkInfo blank

Ensuite, modifiez le répertoire nouvellement créé IonicNetworkInfo:

cd IonicNetworkInfo

Installer ngCordova avec Bower:

bower install ngCordova

Si par hasard vous n'avez pas bower installé, vous pouvez l'installer avec npm:

npm install bower -g

Ouvrir la www/index.html fichier dans votre éditeur de texte favori, et ajouter la référence à ngCordova (juste au-dessus de la cordova.js le script):

<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

Installer le ngCordova réseau plugin en exécutant la commande suivante dans votre Terminal/invite de Commande (vous devez le faire à partir de la racine du répertoire de votre application; ainsi, dans notre cas, le IonicNetworkInfo répertoire):

cordova plugin add org.apache.cordova.network-information

Pour vérifier si vous avez correctement installé le plugin, vous pouvez exécuter la commande suivante (à partir du répertoire racine – je ne vais pas répéter ce plus; quand je dis que vous devriez exécuter une commande dans le Terminal/invite de Commande qui, dans ce cas, signifie à partir du répertoire racine de l'application):

cordova plugin list

Vous devriez voir le résultat suivant:

> cordova plugin list                                                                                                                           
com.ionic.keyboard 1.0.4 "Keyboard"
org.apache.cordova.network-information 0.2.15 "Network Information"

Ouvrir la www/js/app.js fichier et ajouter ngCordova à la liste de dépendances, de sorte que, fondamentalement, la première ligne ressemble à ceci:

angular.module('starter', ['ionic', 'ngCordova'])

Créer un nouveau contrôleur dans le www/js/app.js fichier appelé MyCtrl, avec le contenu suivant:

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        //listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        //listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
})

Dans ce contrôleur de vous attacher un écouteur d'événement sur le deviceready (car il se peut que l'appareil n'aurait pas encore été initialisé lors de l'exécution de ce code) et vous obtenez les informations du réseau avec:

$cordovaNetwork.getNetwork();

L'information, au sujet de la météo, vous êtes connecté à internet, qui est obtenu avec la ligne suivante:

$scope.isOnline = $cordovaNetwork.isOnline();

Ensuite, vous vous inscrivez deux événements $cordovaNetwork:en ligne et $cordovaNetwork:en ligne, qui déclenchent lorsque l'appareil est en ligne/hors ligne. En eux, vous alors juste mettre à jour le $scope des variables ().
Juste pour la référence, l'ensemble du contenu de la www/js/app.js le fichier doit être:

//Ionic Starter App

//angular.module is a global place for creating, registering and retrieving Angular modules
//'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
//the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
  $ionicPlatform.ready(function() {
    //Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    //for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        //listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        //listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
});

Dans le index.html fichier, à l'intérieur de la ion-balise de contenu collez le contenu suivant:

<div class="card">
    <div class="item item-text-wrap">
        <h1>Network: {{network}}</h1>
    </div>
</div>


<div class="card">
    <div class="item item-text-wrap">
        <ion-toggle ng-model="isOnline" ng-checked="item.checked">
            <h1 ng-show="isOnline">I'm online</h1>
            <h1 ng-show="! isOnline">I'm offline</h1>
        </ion-toggle>
    </div>
</div>

Fondamentalement, ce que nous faisons ici, c'est de nous montrer le contenu de la variable de réseau (qui est fixé à la somme de portée via le contrôleur). Aussi, à l'aide de la ion-bascule composant de nous montrer le “je suis en ligne” /“je suis en mode hors connexion” notifications.

Juste pour la référence, le contenu de l'ensemble de la index.html fichier devrait ressembler à ceci:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" >
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="MyCtrl">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>

        <ion-content padding="true">
            <div class="card">
                <div class="item item-text-wrap">
                    <h1>Network: {{network}}</h1>
                </div>
            </div>

            <div class="card">
                <div class="item item-text-wrap">
                    <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                        <h1 ng-show="isOnline">I'm online</h1>
                        <h1 ng-show="! isOnline">I'm offline</h1>
                    </ion-toggle>
                </div>
            </div>

        </ion-content>
    </ion-pane>
</body>
</html>

Afin de tester cette application, vous devez l'exécuter sur votre appareil (parce que vous ne pouvez pas désactiver le réseau dans le simulateur iOS). Si vous avez un appareil Android connecté à votre ordinateur (et de tous les Kits de développement en place), vous pouvez exécuter les opérations suivantes pour les commandes à exécuter votre application sur votre appareil Android:

ionic build android && ionic run android

OriginalL'auteur Nikola

Avant d'appeler la "connexion", vous devez vérifier l'appareil:

document.addEventListener("deviceready", function () {
    ...
});

OriginalL'auteur Sentence