AngularJS | How to use ng-idle?
Last Updated :
02 Aug, 2024
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>
Output:
Similar Reads
How to Use the Async Pipe in Angular? The AsyncPipe in Angular is a powerful and convenient tool used to handle asynchronous data streams such as observables and promises directly in the component template. It automatically subscribes to observables, renders their values, and updates the view when new data is emitted. This removes the n
3 min read
How to Use Loading in Interceptor? - Angular 17 In Angular applications, HTTP interceptors are a powerful feature that allows you to intercept and modify HTTP requests and responses. One common use case for interceptors is to display a loading indicator to the user while an HTTP request is in progress. This improves the user experience by providi
5 min read
How to Create a new module in Angular ? Modules are most important when it comes to building strong and scalable Angular applications. They help organize your code, promote modularity, and improve maintainability. It encourages collaboration among developers by grouping related components, directives, pipes, and services. In this article,
3 min read
AngularJS Events An Events in AngularJS can be used to perform particular tasks, based on the action taken. Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML Event. It can be added using the Directives mentioned below: ng-mousemove: The movement of the mouse leads to the
3 min read
AngularJS ng-paste Directive The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and
2 min read
AngularJS $document Service In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
How To Use @Injectable Decorator In Angular? In Angular, the @Injectable decorator is used to mark a class as available for dependency injection. This allows Angular to create and manage instances of this class and inject it into other components, services, or other classes.In this article, we will see how to use the @Injectable decorator in a
3 min read
Angular PrimeNG Table Methods Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
6 min read
AngularJS ng-model-options Directive The ng-model-options directive has the feature which helps the user to modify, within the current application, the behavior of the ngModel directives. Basically, it is in use when the user has to control the binding of a variable and an HTML form element in the scope. You can also specify the amount
2 min read
AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e
2 min read