Diaconu Eduard Diaconu Eduard - 4 months ago 52
Javascript Question

Check internet connection in AngularJs and show PopUp

I try to implement on my website, an pop up to show the internet connection status with AngularJs. But, until i implement pop up, i try to fix the problem with my code....

I haven in root file:

angular.module("root", [])
.controller("index", [function() {}], [function() {}]);


An alert.js file with:

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});

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


...and in my index:

<head>
<meta charset="utf-8">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello {{name}}! {{online}}
</body>


Thank for your help!

Answer

I have implemented the popup here : Plunker Link . Try going offline to see the alert.

I have added the Bootstrap modal :

<div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
...

Then toggled its display in your javascript file (using jQuery):

...
$('#myModal').modal('show');
...
$('#myModal').modal('hide');
...

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.run(function($window, $rootScope) {
  $rootScope.online = navigator.onLine;
  $window.addEventListener("offline", function() {
    $rootScope.$apply(function() {
      $rootScope.online = false;
      $('#myModal').modal('show');
    });
  }, false);
  $window.addEventListener("online", function() {
    $rootScope.$apply(function() {
      $rootScope.online = true;
      $('#myModal').modal('hide');
    });
  }, false);
});
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div ng-controller="MainCtrl">
    <h2>Hello {{name}}!</h2> 
    Online Status : {{online}}
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Offline  Alert!!</h4>
          </div>
          <div class="modal-body">
            <p>Hey {{name}}, you are offline.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Comments