AngularJS | How to use ng-idle?

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 in 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 getting 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']);

Let’s see the usage of ng-idle with an example.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        AngularJS ng-Idle
    </title>
  
    <script type="text/javascript" 
            src=
  </script>
    <script type="text/javascript" 
            src=
  </script>
  
    <link rel="stylesheet"
          type="text/css" 
          href=
    
    <link rel="stylesheet" 
          type="text/css" 
          href=
    
    <script type="text/javascript"
            src=
  </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>
  
    <body style="text-align:center">
        <h2 style="color:green">GeeksForGeeks</h2>
        <h2 style="color:purple">AngularJS ng-idle</h2>
        <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>

chevron_right


Output:
ngcut



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.