1

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);
  }

e.g. /#/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!

Community
  • 1
  • 1
Garrett Stevenson
  • 126
  • 2
  • 9
  • I don't see what's the big problem with it reloading on first visit back to `/#/RouteB`. At some point it's going to have to go back to that anyway otherwise you'll end up with urls like `/RouteB/#/RouteA`. The hashbang is a workaround for browsers that don't support pushstate, it's not going to be as pretty as pushstate. – Kevin B Apr 10 '15 at 15:04
  • I could care less about the reload if it didn't redirect me back to `/RouteA`. The problem is that anything after the `#` is ignored when a page is refreshed. So refreshing `someSite.com/#/RouteB` is the same as going to `someSite.com` as everything after the `#` is ignored. – Garrett Stevenson Apr 10 '15 at 15:11
  • So, the problem is, if you link them directly to /RouteB it's rewriting to /RouteA? it should be taking you to /#/RouteB. If that's rendering RouteA instead, I'd like to see your routing. – Kevin B Apr 10 '15 at 15:15
  • something wrong in your routing design. Sounds like you are expecting a single page app to work on multiple server routes which doesn't make sense – charlietfl Apr 10 '15 at 15:18
  • Its two separate single page apps on two separate server routes. Server side there is a specific route for `RouteA` and `RouteB` with the default route of `/` also leading to `RouteA`. `RouteA` is the default SPA that is hit when you navigate to this site. Hence why the refresh of `foo.com/#/RouteB` is sending me back to `RouteA`. Unfortunately that behavior cannot change. – Garrett Stevenson Apr 10 '15 at 15:40
  • server-side all routes should go to /index.html, angular will handle the routing. – Kevin B Apr 10 '15 at 16:33

2 Answers2

0

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. e.g. /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

Community
  • 1
  • 1
Garrett Stevenson
  • 126
  • 2
  • 9
-1

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>
Nicholas Hirras
  • 2,592
  • 2
  • 21
  • 28