El ng-idle se usa para disminuir la carga, el ancho de banda y la carga de trabajo de una aplicación, sitio web, programa o software. Con la ayuda de ng-idle, cierre la sesión de los usuarios inactivos para que nuestros valiosos datos y la carga de trabajo se conserven o incluso para burlarse de ellos para que participen más activamente.
El ng-idle es el módulo, que se requiere para responder y manejar a los usuarios inactivos en el módulo. La directiva ng-idle muestra un cuadro de diálogo de advertencia mediante el uso de $uibModal de UI Bootstrap. Hará la cuenta regresiva del tiempo restante hasta que se agote el tiempo de espera de la sesión. La aplicación enviará una solicitud al HTTP, que finalizará nuestra sesión actual o la de cualquier usuario, enviará el mensaje de error y finalmente los redirigirá a la página/panel de inicio de sesión inicial. Así que hemos aprendido que el objetivo principal del módulo de directivas ng-idle es detectar a aquellos usuarios que están inactivos, lentos o simplemente inactivos. Pero tiene otro trabajo que hacer. También podría implementarse para notificar, alertar y advertir a los usuarios de un tiempo de espera que se aproxima.
El núcleo de este módulo es el servicio de Idle, en lo que se destaca y en lo que es mejor. Esto se basa totalmente en la configuración del usuario y para estar al tanto de la actividad del usuario y luego detectar si el usuario está activo o inactivo, y finalmente pasar la información a la aplicación principal para que pueda dar una respuesta adecuada.
Nota: Se requiere AngularJS 1.2 o posterior. Esta es la única dependencia requerida.
Sintaxis: Esta sintaxis se incluirá en el módulo como la dependencia para completar la configuración angular.
var myApp = angular.module("myApp", ['ngIdle']);
Veamos el uso de ng-idle con un ejemplo.
Ejemplo:
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA