How to handle / prevent browser navigation or reload in angularjs?

Question

I would like to detect in my angular app when a user is navigating away from or reloading a page.

App (that uses some login process) should then distinguish that it was re-loaded, so user won't lose his auth data and app should be able to restore then necessary information from localStorage.

Please suggest some best techniques to "handle" browser reloading / navigation.

Answer 1

All of your javascript and in memory variables disappear on reload. In js, you know the page was reloaded when the code is running again for the first time.

To handle the reload itself (which includes hitting F5) and to take action before it reloads or even cancel, use 'beforeunload' event.

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    // do whatever you want in here before the page unloads.        

    // the following line of code will prevent reload or navigating away.
    event.preventDefault();
});

Answer 2

I had the same problem, but Ben's answer didn't work for me.

This answer put me on the right track. I wanted to add a warning on some states but not all of them. Here is how I did it (probably not the cleanest way) :

window.onbeforeunload = function(event) {
   if ($state.current.controller === 'ReloadWarningController') {
      // Ask the user if he wants to reload
      return 'Are you sure you want to reload?'
   } else {
      // Allow reload without any alert
      event.preventDefault()
   }
 };

(in the ReloadWarningController definition, which had the $state injected)