AngularJS, using routes without refreshes on back button

Question

I\'m using angularJS to build a simple single page application using AJAX, but I\'m running into a problem when users use the native back button.

an         


        

Answer 1

Use a service to keep a singleton state, which exposes functions to get/reload/etc. Here is a very simple example, just to get you started:

.factory('FeedService', ['$http', function($http){
    var state = {};

    var loadFeed = function(){
        $http.get('http://api.example.com').then(function(result){
            state.feed = result.items;                
        });
    };

    // load the feed on initialisation
    loadFeed();

    return {
        getState: function(){
            return state;
        }
    };
}])

.controller('MenuCtrl', ['$scope', 'FeedService', function($scope, FeedService) {        
    // assign the feed container to any scope that you want to use for view
    $scope.cont = FeedService.getState();
})

Again, this is very basic, and is simply showing you how you can use a service to store a persistent state between routes.

Answer 2

Yep, the Back button and the the Refresh button are a real pain. You have two choices:

1. You keep things simple and just allow your state to be fetched for each location change. This treats a user triggered back button click or a refresh as any normal location change. Data re-fetching can be mitigated by http caching.

2. You maintain your own state on the client and restore it when required, possibly using SessionStorage to keep things clean.

I chose the latter option and it all works just fine for me. See these self answered questions for detailed code examples.

• How do I get the Back Button to work with an AngularJS ui-router state machine?
• How do I handle page refreshing with an AngularJS Single Page Application

Answer 3

if your parameter 'id' in the route contains any character that is being decoded during the http request (like ' ' => '%20') then your route will not work. try to perform encodeURIComponent() on your string before using it for the routing.