AngularJS routing hijacking non base URLs when page reload is expected

Question

I'm building an AngularJS app that is not located in the root location domain.tld/blog. I have routing setup for everything on the /blog base. I included the base tag in the head of the page <base href="/blog">. html5Mode is set to true. Within the app everything works as expected. However, when I click a non-angular URL outside of the base location the page isn't loaded. It seems that this location is caught by the otherwise function in the router:

ROUTER.otherwise({
  redirectTo : '/blog'
});

So when I click any url, i.e. domain.tld/somewhere-else it redirects to domain.tld/blog. Obviously this is what you would expect: for every URL that is not found in the router, redirect it to the 'homepage'. In my app this is not the desired behavior. All urls that are not in the router should be treated as a normal url and fire a page reload to that url.

So what I need is something like this:

ROUTER.otherwise(
     window.location = theRequestedUrl;
);

This doesn't work obviously. But somehow I need to get inside the otherwise part of the router and tell it to redirect to page with a page reload.

The following question is related: angular routing something weird happening

The following jsFiddle demonstrates the problem (thanks @rdjs!) http://fiddle.jshell.net/43tub/6/show/light/ . Click on the /outside link should do a full page refresh...

Answer 1

As per Angular documentation

In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

• Links that contain target element
  Example: <a href="/ext/link?a=b" target="_self">link</a>
• Absolute links that go to a different domain
  Example: <a href="http://angularjs.org/">link</a>
• Links starting with '/' that lead to a different base path when base is defined
  Example: <a href="/not-my-base/link">link</a>

See if this helps you

Answer 2

Looking at the code, it looks important that the base is "/blog/" rather than "/blog". Once I changed that I was able to refer to links relatively:

  <a href="./Book/Moby">Moby</a> |
  <a href="./Book/Gatsby">Gatsby</a> |
  <a href=".">base root</a> |
  <a href="/Outside">Outside</a> |  // gets a nice 404

My jsfiddle, note that location.pathname is always setting "[path]/", this also works hardcoded /_display/ while editing, but jsfiddle switches between _display/ and workingdir/show/ when running edited and save fiddles.

Answer 3

You could also do something like this:

var redirect = function(skip, url) {
    console.log("Redirecting to ", url);
    window.location.href = url
};
$routeProvider
    .when('/inside-router', { templateUrl: 'something.html' })
    .when('/get-me-away.html', { redirectTo: redirect })
    .when('/static/:file', { redirectTo: redirect })

Here is a JSFiddle with a working example.

Basically you're abusing that AngularJS will call a function given in the redirectTo property and then do nothing more if the function doesn't return a string.