如何使Angular UI Router尊重“非路由的"路由器.网址 [英] How to get Angular UI Router to respect "non-routed" URLs

问题描述

这是我第一次使用AngularUI Router，所以我想我正在犯一个新手错误，希望有人可以指导我.

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

我已经配置了一个单页应用程序以在HTML5模式下使用Angular UI Router，并且一切似乎都能按预期工作.

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

但是，同一页面还使用相对URL包含一些指向同一站点上其他静态页面的链接.在安装Angular路由之前，这些链接可以正常工作，但是现在它们已断开.具体来说，单击这些链接中的任何一个都可以正确更改浏览器地址栏，但不会触发到该目标页面的导航.

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.

我假设我需要添加一些内容来告诉路由配置忽略某些URL模式，但是我还没有找到任何信息来说明如何执行此操作.有什么建议吗?

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?

谢谢， 蒂姆

推荐答案

经过一番调查，我发现此问题与Angular UI Router无关.相同的行为也出现在本地AngularJS路由机制中，并且是由$location实现的链接重写逻辑引起的，如中所述本文档.

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:

明确指向静态页面的链接:通过在所有指向静态页面的链接(即超出定义的Angular路由方案的页面)中包含属性target="_self"，它们将被AngularJS忽略，因此呈现正确.

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.

禁用链接重写:在HTML5模式下配置Angular路由时，支持两种语法格式.最简单的格式...

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

$locationProvider.html5Mode(true);

...以默认配置启用HTML5模式.但是，长格式语法提供了对其他配置属性的访问权限，其中一种配置通过禁用Angular拦截和重写链接URL的默认行为来解决上述问题:

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

我使用了第二种解决方案，它似乎对路由方案中定义的URL的行为没有不利影响.该解决方案似乎与Angular UI Router和本机AngularJS路由同样有效.

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.

这篇关于如何使Angular UI Router尊重“非路由的"路由器.网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！