Ng-Idle

This example uses $uibModal from UI Bootstrap to display a warning dialog that counts down the seconds until they are "timed out". In your application, "timing out" might send an HTTP request to end the user's session and send them to a log in screen.

Click the Start Demo button to begin. Stay idle for 5 seconds, then click, scroll, etc. to reset your idle state. Click on Stop Demo to turn it off again.

Start Demo Stop Demo

Dependencies

The only required dependency is AngularJS (1.2 or later). If you wish to use the modal approach from this demo, see the "Getting Started" section for UI Bootstrap.

Files to Download

You can use the unminified angular-idle.js for development and minified angular-idle.min.js for production from here or install them from Bower by entering the command line bower install ng-idle.

Once you have the JS file, simply include it after AngularJS.

<script src="angular.min.js"></script><script src="angular-idle.min.js"></script>

Configure

You will need to include the module as a dependency to your application module in your angular configuration.

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

You should also set your options using the KeepaliveProvider and IdleProvider in your config start-up function.

myApp.config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) { IdleProvider.idle(5); IdleProvider.timeout(5); KeepaliveProvider.interval(10);}]);

The wiki contains the full description of configurable options for KeepaliveProvider and IdleProvider

Implement

The primary method in which your application will respond to the user's idle state will be through events broadcasted from the root scope. There are many ways to approach this, and the events are described in the wiki.

The code below shows how the demo was implemented.

<section data-ng-controller="DemoCtrl">
 <p>
 <button type="button" class="btn btn-success" data-ng-hide="started" data-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>
</section><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">
 <uib-progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</uib-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> 

 angular.module('demo', ['ngIdle', 'ui.bootstrap']) .controller('DemoCtrl', function($scope, Idle, Keepalive, $uibModal){ $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() { closeModals(); $scope.warning = $uibModal.open({ templateUrl: 'warning-dialog.html', windowClass: 'modal-danger' }); }); $scope.$on('IdleEnd', function() { closeModals(); }); $scope.$on('IdleTimeout', function() { closeModals(); $scope.timedout = $uibModal.open({ templateUrl: 'timedout-dialog.html', windowClass: 'modal-danger' }); }); $scope.start = function() { closeModals(); Idle.watch(); $scope.started = true; }; $scope.stop = function() { closeModals(); Idle.unwatch(); $scope.started = false; }; }) .config(function(IdleProvider, KeepaliveProvider) { IdleProvider.idle(5); IdleProvider.timeout(5); KeepaliveProvider.interval(10); }); 

You could configure the Idle service to start as soon as the application runs with the following:

// assume myApp was defined according to the "Configure" example abovemyApp.run(['Idle', function(Idle) { Idle.watch();}]);