How to check internet connection in AngularJs

by

First of all, I advise you to listen to online/offline events.

You can do it this way in 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);
});

NOTE: I am wrapping changing of root scope’s variable in $apply method to notify Angular that something was changed.

After that you can:

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>

Here is a working Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Other solution could be to broadcast online/offline event. But in this case you need to initialize current status upon loading and then subscribe to event.

More Related Contents:

  1. AngularJS performs an OPTIONS HTTP request for a cross-origin resource
  2. Binary files corrupted – How to Download Binary Files with AngularJS
  3. Dynamic validation and name in a form with AngularJS
  4. How do I inject a controller into another controller in AngularJS
  5. How to skip the OPTIONS preflight request?
  6. Error: 10 $digest() iterations reached. Aborting! with dynamic sortby predicate
  7. How to select an element by classname using jqLite?
  8. Using success/error/finally/catch with Promises in AngularJS
  9. Can I access a form in the controller?
  10. Cannot get to $rootScope
  11. Angular directive how to add an attribute to the element?
  12. Capture HTTP 401 with Angular.js interceptor
  13. Angular JS: how to bind to promises
  14. What is the advantage of “Controller as” in Angular?
  15. Can I use one ng-app inside another one in AngularJS
  16. Cordova / Ionic : $http request not processing while emulating or running on device
  17. Redirect using AngularJS
  18. Bind Angularjs to newly created html element dynamically
  19. Angular JS break ForEach
  20. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  21. What’s the meaning of require: ‘ngModel’?
  22. Angular directive for a fallback image
  23. Validation not triggered when data binding a number input’s min / max attributes
  24. How to use `replace` of directive definition?
  25. How to implement an ng-change for a custom directive
  26. ng-repeat specify a starting index
  27. how to make synchronous http request in angular js
  28. How to detect if a user clicks browser back button in Angularjs
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment