Q:

Prompt confirm before Leaving edited html form

If user tries to leave unsaved edited form, a message box pop-up
"This page is asking you to confirm that you want to leave - data you have entered may not be saved.
Leave Page and Stay on Page"
Can we invoke this confirmation box through some special function of browser? I want to implement it in AngularJS application

A:

Warlock's answer is partly right, but in doing so, you'd break testability. 
In Angular, you'd want to use $window, and you'll want to watch $dirty on your form. You'll need to have a named form, notice name="myForm" below. Then you can $watch $dirty on the form in your $scope:
app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';
  var win = $window;
  $scope.$watch('myForm.$dirty', function(value) {
    if(value) {
      win.onbeforeunload = function(){
        return 'Your message here';
      };
    }
  });
});

HTML
<form name="myForm">
  Name: <input type="text" ng-model="name"/>
</form>

Here's a plunk to demonstrate: http://plnkr.co/edit/3NHpU1

A:

You could use the "onbeforeunload" event. The syntax is as follows:
window.onbeforeunload = function () {
    return "Your text string you want displayed in the box";
}

This event will popup that confirmation dialog that you described above asking whether or not the user truly wants to leave the page.
Hope this helps.

A:

If you want to cancel the route change when you determine your form is dirty, you can do this:
$rootScope.$on('$locationChangeStart', function(event) {
  event.preventDefault();
});

This will cancel the routing and keep you on the current page.

