Learn MVC Using Angular Idle

This article demonstrates MVC, using Angular Idle with UI Bootstrap. Angular Idle can use an Angular module to detect and respond to idle users.

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

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

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

Link My File

  1. <script src="~/App/App.module.js"></script>  
  2. <script src="~/App/App.config.js"></script>  
  3. <script src="~/App/CarController.js"></script>  
  4. <script src="~/App/LoginConttroller.js"></script>   

Angular Module

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

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

Angular Config

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

  1. uiroute.config(['KeepaliveProvider''IdleProvider'function(KeepaliveProvider, IdleProvider) {  
  2.     IdleProvider.idle(10);  
  3.     IdleProvider.timeout(10);  
  4.     KeepaliveProvider.interval(10);  
  5. }]);  

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 .

  1. function closeModals() {  
  2.     if ($scope.warning) {  
  3.         $scope.warning.close();  
  4.         $scope.warning = null;  
  5.     }  
  6.     if ($scope.timedout) {  
  7.         $scope.timedout.close();  
  8.         $scope.timedout = null;  
  9.     }  
  10. }  
  11. $scope.$on('IdleStart'function() {  
  12.     closeModals();  
  13.     $scope.warning = $uibModal.open({  
  14.         templateUrl: 'warning-dialog.html',  
  15.         windowClass: 'modal-danger'  
  16.     });  
  17. });  
  18. $scope.$on('IdleEnd'function() {  
  19.     closeModals();  
  20. });  
  21. $scope.$on('IdleTimeout'function() {  
  22.     closeModals();  
  23.     $scope.timedout = $uibModal.open({  
  24.         templateUrl: 'timedout-dialog.html',  
  25.         windowClass: 'modal-danger'  
  26.     });  
  27. });  

Angular Run

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

  1. uiroute.run(['Idle'function(Idle) {  
  2.     Idle.watch();  
  3. }]);  

HTML code

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

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

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

Angular Route

  1. uiroute.config(function($stateProvider, $urlRouterProvider) {  
  2.             $urlRouterProvider.otherwise('/login');  
  3.             $stateProvider  
  4.                 // State managing  
  5.                 .state('login', {  
  6.                     url: '/login',  
  7.                     templateUrl: '/App/Test/login.html',  
  8.                     controller: 'LoginController'  
  9.                 })  
  10.                 //Manager Role  
  11.                 .state('manager', {  
  12.                     url: '/manager',  
  13.                     templateUrl: '/App/Manager/home.html'  
  14.                 }).state('manager.list', {  
  15.                     url: '/list',  
  16.                     templateUrl: '/App/Test/dataList.html',  
  17.                     controller: 'CarController'  
  18.                 });  

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.

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

Output 1

MVC

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

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

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.