Jak sprawdzić połączenia internetowego w angularjs

Question

ten sposób chciałbym sprawdzić połączenia internetowego w waniliowym javascript:

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

mam kątowych sterowniki i moduły w moim projekcie. Gdzie powinienem umieścić powyższy kod? Powinien być wykonany w kontekście globalnym i nie powinien być przypisany do określonego kontrolera. Czy może jest jakiś globalny kontroler?

Answer 1

Przede wszystkim radzę posłuchać: online/offline events.

Można zrobić to w ten sposób w AnguarJS:

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

UWAGA: mam owijania zmianę zmiennej korzeń oscyloskopu w $apply sposobu powiadamiania kątowa, że ​​coś się zmieniło.

Po tym można:

W controlller:

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

W znacznikach HTML:

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

Oto Plunker robocze: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Innym rozwiązaniem mogłoby być rozgłaszać zdarzenie online/offline. Ale w tym przypadku musisz zainicjować bieżący stan po załadowaniu, a następnie zasubskrybować wydarzenie.

Answer 2

To zdecydowanie nie jest tak miłe, ale można po prostu wypróbować żądanie AJAX do swojego serwera; to się uda albo przestanie działać.

Również, HubSpot/offline project wygląda naprawdę dobrze.

Answer 3

Twoje opcje:

• addEventListener na okna, dokumentu lub document.body.

• Ustawienie właściwości .ononline lub .onoffline na dokumencie lub
  document.body na obiekt funkcji JavaScript.

• określając ononline = "..." lub onoffline = "..." atrybutów znacznika w znaczników HTML

wykażę najłatwiejsze.

W Tobie kontrolera

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

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

zmienną scope.connection Sprawdź $ zanim spróbujesz wysłać żądania dokoła.