How to reload a page automatically after a given period of time if user is not active in angularjs

Question

I want to reload a page in every 5 min if a user is not active on that page.(I don't want reload a page while user is active).

I have a code for reloading a page while clicking on the button.

 <button ng-click="refreshDeliveries()">
               <span>Refresh Deliveries</span>
</button>


$scope.refreshDeliveries = function () {
    $window.location.reload();
};

But I just want if user is not active from past 5 min, page will automatically reloaded in Angularjs.

Thank you

You can use ng-idle library found at https://github.com/HackedByChinese/ng-idle — Ajay Kumar, Jul 23 '15 at 07:12
Hi @AjayKumar, I have saw this but I am not able to understand, Can you have a simple example or demo. So I can understand easily. Thank you — Naren-Mehta, Jul 23 '15 at 07:18
see my answer it might help you also i have given a link that helped me to check idle user.. you can mix both the codes and remove what ever you dont want from it and yes its simple — Meenesh Jain, Jul 23 '15 at 07:22

score 0 · Answer 1 · edited May 23 '17 at 12:06

You can use $interval method from angularJS

 function reloadPage() {
        var d = new Date();
        var curTime = d.getTime();  //n in ms

        $window.location.reload();
      }

to set in 5 minutes

setIntvl = $interval(reloadPage, 300000);

cancel a interval

 $interval.cancel(setIntvl);

This code works for me

and for auto idle refresh check

Auto logout with Angularjs based on idle user

score 0 · Answer 2 · answered Jul 23 '15 at 07:50

This code sample might be helpful for you. It uses Angular 1.3 and https://github.com/HackedByChinese/ng-idle library:

(function() {
    angular.module('myApp', ['ngIdle'])
        .controller('ctrl', homeController)
        .config(function(IdleProvider, KeepaliveProvider) {
            // configure Idle settings
            IdleProvider.idle(5); // in seconds
            IdleProvider.timeout(5); // in seconds
            KeepaliveProvider.interval(2); // in seconds
        })
        .run(function(Idle) {
            // start watching when the app runs. also starts the Keepalive service by default.
            Idle.watch();
        });

    function homeController($scope, Idle) {
        $scope.message = 'Check browser console to get idle info';
        $scope.events = [];

        $scope.$on('IdleStart', function() {
            console.log('Idle Start');
            // the user appears to have gone idle
        });

        $scope.$on('IdleWarn', function(e, countdown) {
            console.log(e, countdown);          
            // follows after the IdleStart event, but includes a countdown until the user is considered timed out
            // the countdown arg is the number of seconds remaining until then.
            // you can change the title or display a warning dialog from here.
            // you can let them resume their session by calling Idle.watch()
        });

        $scope.$on('IdleTimeout', function() {
            console.log('Idle Timeout');
            // the user has timed out (meaning idleDuration + timeout has passed without any activity)
            // this is where you'd log them
            // ------You can reload the page here------
        });

        $scope.$on('IdleEnd', function() {
            console.log('Idle End');
            // the user has come back from AFK and is doing stuff. if you are warning them, you can use this to hide the dialog
        });

        $scope.$on('Keepalive', function() {
            console.log('Keep me Alive');
            // do something to keep the user's session alive
        });
    }

}());

How to reload a page automatically after a given period of time if user is not active in angularjs

2 Answers2