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.



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



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.



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.



Output 3

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



Output 4

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



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.





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.