How To Manage F5 Event In AngularJS

In this blog, you will learn how to manage F5 event in AngularJS.

Step 1

First of all, we will add a directive with the name shortcuts in a div tag, where all your HTML web page contents are placed .

In the .HTML page, execute the code given below.

<div shortcuts=”keyUp”> //Here in this div tag your html page content on which you want to perform F5 action
  </div>

Step 2

Add the Directive given below in your controller.js with Directive name shortcuts, which comes under your specific module.

Controller.js

Add this Directive=>shortcuts. 

angular.module(“SandipPatil’ sModule”).directive(‘shortcuts‘, [‘$document’, ‘$rootScope’, function($document, $rootScope) {
                $rootScope.shortcuts = [];
                $document.on(‘keydown keyup‘, function(e) {
                    // Skip if it focused in input tag.
                    if (event.target.tagName !== “INPUT”) {
                        $rootScope.shortcuts.forEach(function(eventHandler) {
                            // Skip if it focused in input tag.
                            if (event.target.tagName !== ‘INPUT’ && eventHandler) eventHandler(e.originalEvent, e)
                        });
                    }
                })
                return {
                    restrict: ‘A’,
                    scope: {‘
                        shortcuts’: ‘ & ’
                    },
                    link: function(scope, element, attrs) {
                        $rootScope.shortcuts.push(scope.shortcuts());
                    }
                };

Step 3

Now, whenever the user presses F5 key, it will fire Angular function given below. Thus, write the code given below for this purpose.

Use it in the format given below in any controller.js.

$scope.keyUp = function (key) {
//116 is for F5
if (key.keyCode==116)
$state.go(“common.login”);

Or

window.location.href=”/login”;

//e.g.Here user is navigated to login screen
};

Summary

When the user comes on the particular page and hits F5, the user will be redirected to login page.