10

I am doing my frontend routing with angular ui router, and I am seemingly unable to get my browser's back button to take me to most recent URL.

Let me demonstrate.

Let's say I start here

/#/myapp/

And after some clicks, I have dynamically adjusted my URL to become

 /#/myapp/12345

Let's say I click a datepicker while remaining on the page

/#/myapp/12345?start=2016-01-21&end=2016-01-28

I am able to do this by using $scope'd functions in tandem with $location.url

Awesome. So far, so good.

Let's say I navigate away from this by clicking

<a href="#"> My App </a>

Which, due to the way I have set up my routing

myApp.config([
    '$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider.state('myapp',
            url : '/myapp/*id?start&end',
            templateUrl : '<path to my template>',
            controller : '<name of my controller>'
        );

        // more routes

        $urlRouterProvider.otherwise('/myapp/');

    }
]);

will default back to the initial state 

/#/myapp

Ok, still so far, so good. However, when I click my browser's back button, I am taken back to

/#/myapp

instead of what I would expect

/#/myapp/12345?start=2016-01-21&end=2016-01-28

I can only guess that the intermediate urls that I have generated while navigating around my page were not captured by my browser's history... which I guess makes sense. How do I get my browser to recognize these intermediate steps so that I can backtrace properly?

Zack
  • 13,454
  • 24
  • 75
  • 113
  • 1
    Have you tried to enable html5 mode? You are currently using hashbang mode. In your app configuration, add `$locationProvider.html5Mode(true).hashPrefix('!');` You'll have to change your links in your html. Here is a link to use it with ui-router https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode – gr3g Feb 07 '16 at 17:05

2 Answers2

1

Please take a look at the following SO answer there are four steps to take

  1. Unique Urls
  2. A session service
  3. A state history
  4. And a location service
Community
  • 1
  • 1
Jordy van Eijk
  • 2,718
  • 2
  • 19
  • 37
  • "Unique URLs" So, would "/#/myapp/12345?start=2016-01-21&end=2016-01-28" and "/#/myapp/12345?end=2016-01-28&start=2016-01-21" ... would these be considered different urls? They have the same pieces but the variables are in different orders – Zack Feb 01 '16 at 19:32
  • I'm not completely sure if switching the params will make another URL or is still the same... You have to check that yourself, but i think it is not unique – Jordy van Eijk Feb 02 '16 at 09:52
  • 1
    How would I check if the urls are unique? They do not look unique to me (that is, I think the varying order of optional parameters does not constitute 2 "unique" urls)... I honestly don't know how I would go about determining if they are "officially" unique or not... both urls show what I would expect to see on the page..? – Zack Feb 02 '16 at 15:24
  • maybe cut the `search` part if you use `$location` service up and check the different order of the querystring parameters if this is different from what is already in the stack add or do not add it to the stack.. It depends on how you want to go back i think. – Jordy van Eijk Feb 03 '16 at 14:39
1

You may use window.history.back(); to go to back page.

Mohammed mansoor
  • 743
  • 3
  • 11
  • 18