CODEWITHSUNDEEP
javascriptangularjsbrowser-historyhtml5-history
A. Murray
A. Murray

Reputation: 2801

History API/Angular: how to go back to predetermined URL

I have a requirement within my Angular app which uses the Angular UI Router, to go back from one screen (URL) to a previously visited screen (URL). There are several screens (URLs) where it's possible to visit the destination page. It's not quite as straight forward as a simple history.back() operation though` because I have several interim states that can occur in any order and any number. To get around this I have implemented a wrapper around the Angular $location service, like so:

(function () {
    'use strict';
    angular
        .module('myApp')
        .factory('locn', ['$location', '$state',
            function ($location, $state) {
                var states = [];
                return {
                    go: function (url) {
                        $location.path(url);
                    },
                    pushandgo: function (state, params) {
                        states.push({ name: $state.current.name, params: $state.params });
                        $state.go(state, params);
                    },
                    push: function (url) {
                        states.push(url);
                    },
                    pop: function () {
                        var state = states.pop();
                        $state.go(state.name, state.params);
                    },
                    search: function (searchDict) {
                        $location.search(searchDict);
                    }
                };
            }]);

})();

As you can see, this stores the state in a javascript local variable of the locn service. I can call pushandgo and that means when I subsequently call pop I can return to the page I came from (regardless of what page that was).

This works OK, until the user refreshes the page when they are on the destination page.

The states array is recreated loosing all previously pushed states.

I'm struggling to come up with a nice solution to this other than using cookies or local storage (yuck).

Upvotes: 0

Views: 1637

Answers (3)

William Azevedo
William Azevedo

Reputation: 1

I know it is an old question, but i have developed a simple solution for this and other history problems:

https://github.com/adamantioengcomp/ada-hsitory

This method stacks the state changing, with its url parameters, so it simulates the Stack navigation between screens in Android. This prevents undesirable behaviors when navigating.

by instaling this module and injecting the service "History", there are 3 usefull mehtods:

History.back() -> Goes back to the previous screen (and remove the atual screen from the stack)

History.backTo(route) -> Goes back to a specific route and cleans the history until that route (see note below)

History.clear() -> Clear all the history.

Both History.back() and History.backTo() methods can receive a object as argument with parameters to be put in the URL.

Example:

History.back({productId:1}) -> goes back to the previous screen with all its original parameters plus the parameter productId = 1; This parameter can be taken with $location.search()

NOTE: This module uses another history object, and do not affect the browser history

Upvotes: 0

A. Murray
A. Murray

Reputation: 2801

I've found a more palatable solution to using cookies or local storage - session storage!

My locn service now looks like this.

(function () {
    'use strict';
    angular
        .module('csApp')
        .factory('locn', ['$location', '$state', '$window',
            function ($location, $state, $window) {
                return {
                    go: function (url) {
                        $location.path(url);
                    },
                    pushandgo: function (state, params) {
                        $window.sessionStorage.setItem("prev", JSON.stringify({ name: $state.current.name, params: $state.params }));
                        $state.go(state, params);
                    },
                    pop: function () {
                        var state = JSON.parse($window.sessionStorage.getItem("prev"));
                        $window.sessionStorage.removeItem("prev");
                        $state.go(state.name, state.params);
                    },
                    search: function (searchDict) {
                        $location.search(searchDict);
                    }
                };
            }]);

})();

Upvotes: 1

Tui Popenoe
Tui Popenoe

Reputation: 2114

Use $locationProvider to support deep linking. The documentation is rather sparse, but it allows switching between interim states, and page-refreshes that link back to an interim state. If you want to utilize HTML5 history mode, you can use $locationProvider.html5Mode(true)

Upvotes: 1

Related Questions