AngularJS adds to browser history without page reloading and without using HTML5 pushstate

Question

I have a search page that allows the user to expand the categories and / or enter search terms. I want to give the user the ability to use the back button to undo these actions. Using AngularJS, how can I add this page to my browsing history for each of these actions. I can not use pushstate HTML5.

Answer 1

I found that I can do this by changing the parameters of the query string without reloading the page using the reloadOnSearch response from here :

$routeProvider .when('/items', { controller: 'ItemsCtrl', templateUrl: '/templates/items', reloadOnSearch: false }, ... ); 

And then, based on the same answer, set the query string using:

 $location.search('id', 123); 

Finally, detecting route changes using the answer here :

 $scope.$on('$routeUpdate', function(){ $scope.sort = $location.search().sort; $scope.order = $location.search().order; $scope.offset = $location.search().offset; }); 

Answer 2

You can disable HTML5 mode with $locationProvider.html5Mode(false) .

Then just use hashbang urls like <a href="#!/search">Search</a> , they will be added to your browser history.

Answer 3

I do not consider it possible to add entries to the browser history without using pushstate HTML5 (at least without actually changing the current location).

The MDN page discusses the introduction of pushstate and how it incorporates this new functionality (assuming it was not possible before): https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

EDIT: If the reason you can't use pushstate HTML5 is related to browser support, see This polyfill: https://github.com/browserstate/history.js

Answer 4

Along with reloadOnSearch below, to track the location change event, worked for me.

 $scope.$on('$locationChangeSuccess', function () { $scope.sort = $location.search().sort; $scope.order = $location.search().order; $scope.offset = $location.search().offset; }); 

Although this may help someone.