How to detect back button click event using angular?

Question

Is it possible to detect that a user has entered a page using the back button in his browser? Preferably, I want to detect this action using angular.js.

I do not want to use angular routing. It should also work if the user submits the form and after successful submission to the server and redirects should also be possible if the user returns to the form using the browser's back button.

Answer 1

Here is a solution with Angular.

myApp.run(function($rootScope, $route, $location){ //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.path(); }); $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) { if($rootScope.actualLocation === newLocation) { alert('Why did you use history back?'); } }); }); 

I use a launcher to run this. First I save the actual location in $ rootScope.actualLocation, then I listen to $ locationChangeSuccess, and when that happens, I update the actualLocation with the new value.

In $ rootScope, I observe changes in the location path, and if the new location is equal to the previous one, this is because $ locationChangeSuccess was not started, that is, the user used the history back.

Answer 2

If you need a more accurate solution (back and forth detection), I have expanded the solution provided by Bertrand :

 $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.path(); }); $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) { //true only for onPopState if($rootScope.actualLocation === newLocation) { var back, historyState = $window.history.state; back = !!(historyState && historyState.position <= $rootScope.stackPosition); if (back) { //back button $rootScope.stackPosition--; } else { //forward button $rootScope.stackPosition++; } } else { //normal-way change of page (via link click) if ($route.current) { $window.history.replaceState({ position: $rootScope.stackPosition }); $rootScope.stackPosition++; } } }); 

Answer 3

For ui-routing, I use the code below.

Inside App.run() use

  $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) { if (toState.name === $rootScope.previousState ) { // u can any 1 or all of below 3 statements event.preventDefault(); // to Disable the event $state.go('someDefaultState'); //As some popular banking sites are using alert("Back button Clicked"); } else $rootScope.previousState= fromState.name; }); 

You can get the value of "previousState" in the event "$ stateChangeSuccess" also as follows if you want.

  $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) { $rootScope.previousStatus = fromState.name; }); 

Answer 4

JavaScript has its own history object.

 window.history 

Check MDN for more information; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

Not sure how good it is in supporting multiple browsers.

Update

It seems that I named above only for browsers like Gecko.

For other browsers, use history.js ; https://github.com/browserstate/history.js

Answer 5

I know this is an old question. Anyway:)

Bem's answer looks great. However, if you want to make it work with "normal" URLs (without a hash, I think), you can compare the absolute path, not the one returned by $location.path() :

 myApp.run(function($rootScope, $route, $location){ //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.absUrl(); }); $rootScope.$watch(function () {return $location.absUrl()}, function (newLocation, oldLocation) { if($rootScope.actualLocation === newLocation) { alert('Why did you use history back?'); } }); }); 

Answer 6

My solutio for this problem

 app.run(function($rootScope, $location) { $rootScope.$on('$locationChangeSuccess', function() { if($rootScope.previousLocation == $location.path()) { console.log("Back Button Pressed"); } $rootScope.previousLocation = $rootScope.actualLocation; $rootScope.actualLocation = $location.path(); }); }); 

Answer 7

when the angular button is pressed, only the $ routeChangeStart event is triggered , $ locationChangeStart does not start.