ngIdle

Test of angular-idle

by Alejandro M

HTML

<script src="https://rawgithub.com/hackedbychinese/ng-idle/master/angular-idle.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp">

  <div ng-controller="DemoCtrl">
    <p>
      <button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Start Demo</button>
      <button type="button" class="btn btn-danger" data-ng-show="started" data-ng-click="stop()">Stop Demo</button>
    </p>
  </div>

<script type="text/ng-template" id="warning-dialog.html">
    <div class="modal-header">
     <h3>You're Idle. Do Something!</h3>
    </div>
    <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
     <progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
    </div>

  </script>
  <script type="text/ng-template" id="timedout-dialog.html">
    <div class="modal-header">
     <h3>You've Timed Out!</h3>
    </div>
    <div class="modal-body">
     <p>
        You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
     </p>
   </div>
  </script>

</div>

JavaScript

var app = angular.module('myApp', ['ngIdle', 'ui.bootstrap']);
app.controller('DemoCtrl', function($scope, Idle, Keepalive, $modal){
			$scope.started = false;

			function closeModals() {
				if ($scope.warning) {
					$scope.warning.close();
					$scope.warning = null;
				}

				if ($scope.timedout) {
					$scope.timedout.close();
					$scope.timedout = null;
				}
			}

			$scope.$on('IdleStart', function() {
        console.log('Message before close connection');
				closeModals();
				$scope.warning = $modal.open({
					templateUrl: 'warning-dialog.html',
					windowClass: 'modal-warning'
				});
			});

			$scope.$on('IdleEnd', function() {
        console.log('resume connection, restart timer');
				closeModals();
			});

			$scope.$on('IdleTimeout', function() {
      	console.log('closing connection');
				closeModals();
				$scope.timedout = $modal.open({
					templateUrl: 'timedout-dialog.html',
					windowClass: 'modal-danger'
				});
			});

			$scope.start = function() {
        console.log('start');
				closeModals();
				Idle.watch();
				$scope.started = true;
			};

			$scope.stop = function() {
				console.log('stop');
				closeModals();
				Idle.unwatch();
				$scope.started = false;

			};
		});
    
app.config(function(IdleProvider, KeepaliveProvider) {
			IdleProvider.idle(5);
			IdleProvider.timeout(5);
			KeepaliveProvider.interval(10);
		});