Wie Internetverbindung in AngularJS überprüfen

Dies ist, wie ich Internet-Verbindung in Vanille Javascript überprüfen würde:Wie Internetverbindung in AngularJS überprüfen

setInterval(function(){ 
    if(navigator.onLine){ 
     $("body").html("Connected."); 
    }else{ 
     $("body").html("Not connected."); 
    } 
},1000);

Ich habe Winkel Controller und Module in meinem Projekt. Wo sollte ich den Code oben setzen? Es sollte im globalen Kontext ausgeführt werden und nicht einem bestimmten Controller zugewiesen werden. Gibt es vielleicht eine Art globaler Controller?

Quelle

2013-04-26 Lost in OWL

Siehe auch http://stackoverflow.com/questions/15574580/how-can-i-detect-with-angularjs-if-the-app-is-offline – Mawg

133

Zunächst rate ich Ihnen, zu hören online/offline events.

Sie können es auf diese Weise in AnguarJS tun:

var app = module('yourApp', []); 

app.run(function($window, $rootScope) { 
     $rootScope.online = navigator.onLine; 
     $window.addEventListener("offline", function() { 
     $rootScope.$apply(function() { 
      $rootScope.online = false; 
     }); 
     }, false); 

     $window.addEventListener("online", function() { 
     $rootScope.$apply(function() { 
      $rootScope.online = true; 
     }); 
     }, false); 
});

HINWEIS: Ich Einwickeln in $apply Methode Ändern von Variablenstammbereich Eckige zu benachrichtigen, dass sich etwas geändert wurde.

Danach können Sie:

In Controlller:

$scope.$watch('online', function(newStatus) { ... });

In HTML-Markup:

<div ng-show="online">You're online</div> 
<div ng-hide="online">You're offline</div>

Hier ist eine Arbeits Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Andere Lösung sein könnte Online-/Offline-Veranstaltung übertragen. In diesem Fall müssen Sie den aktuellen Status beim Laden initialisieren und dann das Ereignis abonnieren.

Quelle

2013-04-26 18:12:08

Ihr Js-Code hat einen Tippfehler, Sie vermissen ein ')' zu schließen $ apply (. Ich habe es versucht, und ich bekomme einen Fehler: Uncaught TypeError: Kann die Methode 'addEventListener' von undefined nicht aufrufen –

Vielen Dank. Ich werde meine Antwort korrigieren und Plunker hinzufügen. –

Beachten Sie, dass dies in FireFox nicht funktioniert. Sie haben sich dafür entschieden, navigator.onLine anders als alle anderen Browser zu implementieren, was Entwickler, die Offline-Apps entwickeln wollen, wirklich schadet. –

Es ist definitiv nicht so schön, aber Sie könnten einfach eine AJAX-Anfrage an Ihren Webserver versuchen; es wird entweder gelingen oder auslaufen.

Auch die HubSpot/offline project sieht wirklich gut aus.

Quelle

2014-05-23 17:33:36

+ aber emittieren Lol: das ist, was ich zu ersetzen versuchen. Ich hatte einen Dienst, der für den Versuch verantwortlich ist, wieder zu verbinden. Jeder, der ein '$ http.get' und bekommt 404 versucht, kann den Dienst aufrufen, die würde 1) ausgestrahlt, dass es kein Internet war (so dass niemand sonst würde versuchen zu verbinden), 2) regelmäßig versuchen, meine Server zu verbinden und, 3) Stoppen Sie bei Erfolg die Verbindungsversuche und übertragen Sie, dass die App nun wieder online ist. Das schien jedoch sehr klunky und diese Lösung schien elegant -.? Ausnahme FF :-(ich nicht das Rad neu zu erfinden, hier werden kann Wie andere es tun – Mawg

Oops, siehe meinen Kommentar auf denen die damit verbundene Frage http://stackoverflow.com/Fragen/15574580/wie-can-i-detect-mit-AngularJS-if-the-App-is-offline „ich habe es nicht D/L, I ihren Simulator gerade eröffnet. anstatt ihre Checkbox, so zu tun , zog ich eigentlich meine Ethernet-Kabel. In Chrome & MS IE, ich gehe das „Sie offline sind“ alert. FF es nicht zeigen. Siehe auch stackoverflow.com/questions/16242389/..., die anzeigt, dass FF nicht zu sein scheint Standard" – Mawg

Ihre Optionen:

addEventListener auf dem Fenster, ein Dokument oder document.body.
die .ononline oder .onoffline Eigenschaften auf Dokument oder
document.body auf ein Objekt JavaScript-Funktion zu setzen.
Angabe ononline = "..." oder onoffline = "..." Attribute auf dem Tag in den HTML-Markup

Ich werde das am einfachsten demonstrieren.

In Ihrem Controller

document.body.onoffline = function() { 
    alert('You are offline now'); 
    $scope.connection = 'offline' 
} 

document.body.ononline = function() { 
    alert('You are online again'); 
    $scope.connection = 'online' 
}

prüfen $ scope.connection Variablen, bevor Sie versuchen, um Anfragen zu senden.

Quelle

2016-01-12 11:33:20

Wie Internetverbindung in AngularJS überprüfen

Antwort

Verwandte Themen