AngularJS | How to use ng-idle? - GeeksforGeeks

03 Jul, 2019
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:
<!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>      <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>
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?