Angular JS IE9 Hashbang URL重写

Question

Quite an odd situation here.

So I have two routes: /RouteA ( / also defaults to here) and /RouteB

/RouteA actually uses client side routing while /RouteB does not if that matters.

When I try navigating to /RouteB , the URL is initially /RouteB which is correct.

Since IE9 doesn't support HTML5, Angular rewrites the url with a hashbang to /#/RouteB

When the rewriting occurs, it forces a browser refresh (can we stop this behavior?) which sends me right back to / (which is ultimately /RouteA .

Is there a way to prevent the browser from resending the request when the url is rewritten?

The base tag is currently <base href="/"/> .

I tried doing something like this which allows me to land on the page, but breaks the anchor tag in the main menu thats trying to send me back to /RouteA :

  if (window.history && window.history.pushState) {
     $locationProvider.html5Mode(true);
  }
  else {
     window.location.hash = '/';       
     $locationProvider.html5Mode(false);
  }

eg /#/RouteB becomes /RouteB/#/ . Then clicking on a link back to /RouteA , the route ends up becoming /RouteB/RouteA which obviously breaks.

So I tried the solution from a similar question but it yielded the same results as above. $location / switching between html5 and hashbang mode / link rewriting

Does anyone have any ideas?

Thanks in advance!

Answer 1

I managed to get it working. It isn't pretty, but since there is no client side routing happening in /RouteB so it is good enough.

Before the two different apps shared an angular module. Instead I created two different modules and had those depend on the previously shared module.

angular.module('sharedModule', ['dependancy1', ...]);

<!-- RouteA app -->
<div ng-app="sharedModule">...

<!-- RouteB app -->
<div ng-app="sharedModule">...

Became

angular.module('sharedModule', ['dependancy1', ...]);
angular.module('routeAModule', ['sharedModule']);
angular.module('routeBModule', ['sharedModule']);


<!-- RouteA app -->
<div ng-app="routeAModule">...

<!-- RouteB app -->
<div ng-app="routeBModule">...

Then in routeBModule I used the fix from this post: $location / switching between html5 and hashbang mode / link rewriting that was also mentioned above in my question.

Now when navigating to /RouteB the route gets rewritten to /RouteB#/ which wont reload / and dumping me back a different page.

There were two gotcha's with this solution.

1. Navigating to this page with a trailing / can mess up relative links. eg /RouteB#/ becomes /RouteB/#/ so trying to link to /NewRoute would end up linking to /RouteB/NewRoute
2. Anchor tags on this page with a href="#" cause the page to refresh.

There are likely many improvements that can be made to this and if I make them ill try to remember to update this answer.

Also if anyone has a better solution please feel free to post it.

<3 IE9

Answer 2

What do your links to the routes look like? I think you need a full path to any routes going outside your application. You might try something like:

<a href="RouteA">Route A</a>
<a href="/RouteB">Route B</a>