Browser back button doesn't trigger reload after using Angular's $location.path() update

Question

Situation:

On one of the views of my AngularJS app I have two pagination buttons that use $http to request the next and previous data. I'm using ng-click="getNext(url)" rather than an anchor tag with href="#/items/:itemId" . The reason I'm doing this is so that I can quickly page through my content asynchronously w/o triggering a page reload. This works just fine, but using this method bypasses updating the page's URL so its possible to have your current content out of sync with your URL's id (ie path is #/items/3 but you're currently viewing item 9). This can be easily fixed by updating the URL in the JS using $location.path('items/' + rsp.id) . Now I can fetch data in an async manner and still be able to refresh, bookmark, send links and have the correct/current item display.

Problem:

The problem with this is if a user hits getNext() a few times and then tries to go back using the browser's back button the URL updates like it should but for some reason the browser doesn't perform a refresh–it just sits there and updates the URL. This only occurs with when the item in history is from the same view and I have updated the ID with the location service.

Any ideas would be appreciated.

What I tried so far

Promises + Flags

I've been playing with window.onpopstate , but as of right now I don't have any way to have window.onpopstate differentiate between a browser click and a UI click that updates the URL with $location.path() ; Right now it fires the event regardless of the source. So I tried setting a flag to assume that every time this event fires its a browser event, but when its a UI-based event I can disabled that flag because my _myRequestFn() will handle it. Even with this promise setup it still fires the window.onpopstate when _myRequestFn() is fired.

var flag = true; // Assume all requests are browser-based

    window.onpopstate = function() {
      if (flag) {
        $route.reload();
      }
      console.log('onpopstate fired');
    };

    _myRequestFn = function(id) {
        someService.getMyData(id)
          .then(function(rsp) {
           // Do a bunch of stuff including...
           $location.path('items/' + rsp.id);
           return rsp;
          })
          .then(function() {
             // Everything is done reset flag
             flag = true;
          });
    };

$scope.getNext(url) {
   flag = false;
   _myRequestFn(url);
};

Spoofing

Hitting back through #/item/5 > #/item/4 > #/item/3 just updates the URL and not the path, but if the history has a different param #/thing/2 > #/item/2 that triggers a page refresh. Since the browser back button works if the history is from a different param I wanted to see if I loaded a different param it would work. So I created an #/item-a and #/item-b route that loaded the same template and used the same controllers, just toggled from a/b with each request. I would never recommend this solution to someone, I was more just seeing if I could get the refresh to trigger.

Update Lots of people on IRC are suggesting that I use UI-Router. I'm really trying to use the out of the box Angular solution. Refactoring my whole routing setup to use UI-Router is not an optimal solution.

Answer 1

app.config(['$locationProvider',
    function($locationProvider) {
       // Enable html5 mode
       $locationProvider.html5Mode(true);
    }]);

From the docs:

In HTML5 mode, the $location service getters and setters interact with the browser URL address through the HTML5 history API . This allows for use of regular URL path and search segments, instead of their hashbang equivalents.