How to get Angular UI Router to respect "non-routed" URLs

Question

This is my first experience with AngularUI Router, so I guess I'm making a newbie error and hope somebody can guide me.

I've configured a single-page application to use Angular UI Router in HTML5 mode and it all seems to work as expected.

.config([
    "$stateProvider", "$urlRouterProvider", "$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state("concept", {
            url: "/concepts/:conceptKey",
            templateUrl: "/templates/concept-view.html",
            controller: "conceptViewController",
            resolve: {
                concept: [
                    "$stateParams", "conceptsApi",
                    function ($stateParams, conceptsApi) {
                        return conceptsApi.getConcept($stateParams.conceptKey);
                    }
                ]
            }
        });

        $urlRouterProvider.otherwise("/");

        $locationProvider.html5Mode(true);
    }
])

However, the same page also contains some links to other static pages on the same site, using relative URLs. Prior to installing Angular routing, these links worked correctly, but now they are broken. Specifically, clicking any one of these links correctly changes the browser address bar, but does not trigger navigation to that destination page.

I assume I need to add something to tell the routing configuration to ignore certain URL patterns, but I haven't found any information that shows me how to do this. Any suggestions please?

Thanks, Tim

Answer 1

After some investigation I discovered that this issue is not specifically related to Angular UI Router. The same behavior is also present in the native AngularJS routing mechanism and is caused by the link rewriting logic implemented by $location, as described in this documentation.

Further discussion of the problem is here.

I found two possible solutions, both of which seem to work well:

Explicitly target links to static pages: By including the attribute target="_self" in any links to static pages (i.e. pages that fall outside the defined Angular routing scheme) they will be ignored by AngularJS and thus rendered correctly.

Disable link re-writing: When configuring Angular routing in HTML5 mode, two syntax formats are supported. The simplest format ...

$locationProvider.html5Mode(true);

... enables HTML5 mode with the default configuration. However, the long-form syntax provides access to additional configuration properties, one of which solves the above problem by disabling Angular's default behavior of intercepting and re-writing link URLs:

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    rewriteLinks: false
});

I used the 2nd solution and it appears to have no adverse effect on the behavior of URLs defined in the routing scheme. This solution appears to work equally well with Angular UI Router and with native AngularJS routing.