Learn MVC Using Angular Idle

Introduction

This article demonstrates MVC, using Angular Idle with UI Bootstrap. This article is useful to get a User Idle moment when logging in to the Application.

Angular Idle

Angular Idle can use an Angular module to detect and respond to idle users. We can almost maintain the session in the client side.

Follow the steps given below and we can use an Angular Idle in AngularJS in MVC.

Create MVC project.
Configure an Angular Idle
Work with an Angular Idle.

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New menu >Click New & project. Now, it will open New Project Window.

MVC

You can select ASP.NET Web Application on Framework 4.6. Enter the name of the project in Solution name textbox, followed by clicking OK button.

MVC

One more Window should be appearing. Select MVC template in this popup & click Ok button. Now, you can start.

Configure an Angular Idle

We will download the idle plug in from

Ng-Idle
UI-Bootstrap

Open the _Layout.cshtml and must refer the .js file from downloaded folder to this view page

<script src="~/Plugin/angular/angular.min.js"></script>
<script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/Plugin/angular-idle/angular-idle.js"></script>
<script src="~/Plugin/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

Link My File

<script src="~/App/App.module.js"></script>
<script src="~/App/App.config.js"></script>
<script src="~/App/CarController.js"></script>
<script src="~/App/LoginConttroller.js"></script>

Angular Module

You will need to include the module as a dependency on your Application.

var uiroute = angular
.module('uiroute', ['ui.router', 'ngIdle', 'ui.bootstrap'])

Angular Config

You should also set your options, using the KeepaliveProvider, IdleProvider in your angular config file.

uiroute.config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) {
IdleProvider.idle(10);
IdleProvider.timeout(10);
KeepaliveProvider.interval(10);
}]);

Angular Controller

You can set what action will be performed on the user idle times. Here, I will be shown a warning message & notified of the session logout .

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 = $uibModal.open({
templateUrl: 'warning-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.$on('IdleEnd', function() {
closeModals();
});
$scope.$on('IdleTimeout', function() {
closeModals();
$scope.timedout = $uibModal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});

Angular Run

After configuring the angular.idle.js, you must initiate the function in your angular Run function.

uiroute.run(['Idle', function(Idle) {
Idle.watch();
}]);

HTML code

Go to set HTML warning dialog & time out dialog given below.

<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header small danger">
<h3>Your are Idle.</h3>
</div>
<div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
<uib-progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</uib-progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header small warning">
<h3>You have Timed Out!</h3>
</div>
<div class="modal-body">
<h2> You were idle too long. you'll be reset. </h2>
</div>
<div class="modal-footer"> <button class="btn btn-warning" ui-sref="login">Logout</button> </div>
</script>

This code should configure your main Angular Controller & where we need to go to show this idle screen.

Angular Route

uiroute.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
// State managing
.state('login', {
url: '/login',
templateUrl: '/App/Test/login.html',
controller: 'LoginController'
})
//Manager Role
.state('manager', {
url: '/manager',
templateUrl: '/App/Manager/home.html'
}).state('manager.list', {
url: '/list',
templateUrl: '/App/Test/dataList.html',
controller: 'CarController'
});

Here, I have used Angular UI route to navigate the URL.

If you have any doubts about this configuration, visit the article links given below.

Learn Basics Of MVC Using AngularJS
Learn MVC Using Angular UI-Route
Learn MVC Using Angular Role Based Login
Learn MVC Using Angular Datatable
Learn MVC Using Angular Crystal Report
Learn MVC Using Angular Pie Chart
Learn MVC Using Angular Flot Chart
Learn MVC Using Angular xEditable

Run the Application. Now, it will appear in the Browser & you can see the result.

Output 1

You need to refer to the login controller for login user name & password.

if ($scope.UserName.toUpperCase() == 'MANAGER') {
if ($scope.Password == '1') {
$state.go('manager')
}
}

Output 2

After Login Manager, home page will appear, as shown below.

MVC

Output 3

Stay idle for 5 seconds. Now, click or touch in screen to reset your idle state.

MVC

Output 4

Over your idle minutes, it will ask you to Logout.

MVC

Output 5

Suppose, a user can be busy with some other tab in any Browse but idle count down & expired information will load on top of the Browser tab.

MVC

MVC

Conclusion

In this article, we have seen MVC, using Angular Idle. If you have any queries, please tell me in the comments section. Your comments are very valuable.

5 Comments

Join the conversation! Your thoughts help the community grow.

Former member9y ago
Not clear idea about these code "ne. IdleProvider.idle(10); IdleProvider.timeout(10); KeepaliveProvider.interval(10);"
Former member9y ago
Who will call these function IdleStart & IdleEnd ? because these function has been register with on function.
- Thiruppathi R9y ago
  No need, we are initiated idle. Watch() .
Former member9y ago
Please tell me what is the meaning of these below lne. IdleProvider.idle(10); IdleProvider.timeout(10); KeepaliveProvider.interval(10);
- Thiruppathi R9y ago
  Thanks for reading. This is key the key identifier of idle browser..