Search code examples
javascriptangularjsbrowser-history

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

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.

Solution

  • 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;
});