Confirmation on Leaving the Current Page in an Angular.js App

Sometimes when you have a big form, you want to make sure that a user who is leaving the page and loosing some changes knows about it and its not doing it by mistake.

Previously we would manage it with something like this:

window.onbeforeunload = function (e) {
   return "Are you sure you want to navigate away from this page";      
};

This approach does work but does not take into considerations SPA (Single Page Applications), when you navigate in a SPA the onbeforeuload event its not fired, so if you only use this approach you would be missing the confirmation when navigate to other page inside your application.

In order to solve that problem with Angular you can use the Event $locationChangeStart.

 $scope.$on('$locationChangeStart', function (event, next, current) {
     if (check(next+current)) {
         var answer = confirm(Are you sure you want to navigate away from this page);
       if (!answer) {
           event.preventDefault();
       }
   }    
});

In here we receive the event plus the URL where you are trying to go (next) and the current URL, in this case in the check we do some validations that according to where we are going and were we are sometimes we don't want to show the confirmation.

Other important thing is in the first option you need to make sure that if you have a condition to decide if you show or not the confirmation, when you don't want to show it you have to return undefined this fix a problem with IE that without it, it never show the confirmation.

 window.onbeforeunload = function (e) {
if(check(document.URL))
   return check(document.URL);      
else 
 return undefined;
 };