Как проверить подключение к Интернету в AngularJs

Question

Это, как я хотел бы проверить подключение к Интернету в ванильным JavaScript:

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

У меня есть угловые контроллеры и модули в моем проекте. Где я должен поставить код выше? Он должен выполняться в глобальном контексте и не назначаться определенному контроллеру. Возможно, есть какие-то глобальные контроллеры?

Answer 1

Прежде всего, советую вам послушать online/offline events.

Вы можете сделать это таким образом в 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); 
}); 

ПРИМЕЧАНИЯ: Я оберточное изменение переменного корневого прицела в $apply методе уведомления Угловым что что-то изменилось.

После этого вы можете:

В controlller:

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

В HTML разметке:

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

Вот рабочая Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Другое решение может быть трансляция онлайн/оффлайн-события. Но в этом случае вам нужно инициализировать текущий статус при загрузке, а затем подписаться на событие.

Answer 2

Это определенно не так хорошо, но вы можете просто попробовать запрос AJAX на свой веб-сервер; это будет либо успешным, либо тайм-аутом.

Кроме того, HubSpot/offline project выглядит действительно хорошо.

Answer 3

Ваши варианты:

• addEventListener на окне, документ или document.body.

• установка свойств .ononline или .onoffline в документе или
  document.body для объекта функции JavaScript.

• указания ononline = "..." или onoffline = "..." атрибуты тега в в HTML-разметку

я продемонстрирую самый простой.

В вас контроллер

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

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

Проверьте переменную $ scope.connection, прежде чем пытаться посылать запросы вокруг.