AngularJS add to browser history without page reload and without HTML5 pushstate

Question

I have a search page that allows the user to drill-down into 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 have this page add entries to the browsers history for each of these actions. I cannot use HTML5 pushstate.

Answer 1

I found I can do this by changing the query string parameters without reloading the page by using the answer about reloadOnSearch from here :

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

And then, from that same answer, setting the query string using:

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

And finally detecting route changes by using the answer from here :

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

Answer 2

You can turn off the HTML5 mode with $locationProvider.html5Mode(false) .

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

Answer 3

I don't believe it's possible to add entries to the browser history without using HTML5 pushstate (at least, without actually changing the current location).

The MDN page discusses the introduction of pushstate and how it enables this new functionality (implying it wasn't 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 HTML5 pushstate is because of browser support, see this polyfill: https://github.com/browserstate/history.js

Answer 4

Along with the reloadOnSearch below code 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;
   });

Though it might help for someone.