AngularJS | How to use ng-idle?

Last Updated : 12 Sep, 2022

The ng-idle is used to decrease the burden, bandwidth, and workload of an app, website, program, or software. With the help of ng-idle log out the session of inactive users so that our precious data & the workload is getting preserved or to even taunt them to participate more actively. The ng-idle is the module, which is required to respond to and handle the idle users in the module. The ng-idle directive displays a warning dialog by using the $uibModal from UI Bootstrap. It will do the countdown for the remaining time until the session gets timed out. The application will be sending a request to the HTTP, which is going to be ending our or any user’s current session, send the error message and finally re-direct them to the initial login page/panel. So we have learned that the main objective of the ng-idle directive module is to detect those users, who are inactive, sluggish, or simply idle. But it has another job to do. It could also be implemented to notify, alert, and warn the users of an approaching time-out. The core of this module is the service of Idle, which it excels at doing and is best at. This is totally based upon the user’s configuration and to be aware of the activeness of the user and to then detect whether the user is active or inactive, and then finally get the information passed onto the main application so that it could make an appropriate response.

Note: AngularJS 1.2 or later is required. This is the only dependency required.

Syntax: This syntax will be included in the module as the dependency to complete the angular configuration.

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

Example: This example describes the usage of the ng-idle directive in AngularJS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> AngularJS ng-Idle </title>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js">
    </script>
    <script type="text/javascript" src=
"https://rawgithub.com/hackedbychinese/ng-idle/master/angular-idle.js">
    </script>
    <link rel="stylesheet" type="text/css" href=
"https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href=
"https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js">
    </script>
    <script type="text/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() {
                closeModals();
                $scope.warning = $modal.open({
                    templateUrl: 'warning-dialog.html',
                    windowClass: 'modal-warning'
                });
            });
            $scope.$on('IdleEnd', function() {
                closeModals();
            });
            $scope.$on('IdleTimeout', function() {
                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);
        });
    </script>
</head>
 
<body style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3 style="color:purple">AngularJS ng-idle</h3>
    <div ng-app="myApp" class="ng-scope">
        <div ng-controller="DemoCtrl" class="ng-scope">
            <p>
                <button type="button"
                        class="btn btn-success"
                        ng-hide="started"
                        ng-click="start()"> Login
                </button>
                <button type="button"
                        class="btn btn-danger ng-hide"
                        data-ng-show="started"
                        data-ng-click="stop()"> Reset 
                </button>
            </p>
        </div>
        <script type="text/ng-template"
                id="warning-dialog.html">
            <div class="modal-header">
                <h3>
                    The Idle mode is activated,
                    because you are idle for far too long.
                    As a result, you are going to be
                    logout after in a few moments.
                </h3>
            </div>
            <div idle-countdown="countdown"
                 ng-init="countdown=5"
                 class="modal-body">
                <progressbar max="5"
                             value="5"
                             animate="false"
                             class="progress-striped active">
                    DO SOMETHING FAST! You are getting
                    logged out in {{countdown}} second(s). 
                </progressbar>
            </div>
        </script>
        <script type="text/ng-template"
                id="timedout-dialog.html">
            <div class="modal-header">
                <h3>Sorry, you have been Logged Out</h3>
            </div>
            <div class="modal-body">
                <p> 
                    This program was idle for far too long. 
                    So we apologize for logging you out, 
                    but we had no option.
                </p>
            </div>
        </script>
    </div>
</body>
</html>