如何让Angular UI Router尊重"非路由"URL

Question

这是我第一次使用AngularUI路由器,所以我想我正在制作一个新手错误,并希望有人可以指导我.

我已经配置了一个单页面应用程序,以便在HTML5模式下使用Angular UI路由器,它似乎都按预期工作.

.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路由之前,这些链接可以正常工作,但现在它们已经坏了.具体来说,单击这些链接中的任何一个都会正确更改浏览器地址栏,但不会触发导航到该目标页面.

我假设我需要添加一些东西来告诉路由配置忽略某些URL模式,但我没有找到任何信息告诉我如何执行此操作.有什么建议吗？

蒂姆,谢谢

Answer 1

经过一番调查后,我发现这个问题与Angular UI Router没有特别的关系.原生AngularJS路由机制中也存在相同的行为,并且由本文档中$location描述的链接重写逻辑引起.

这个问题的进一步讨论在这里.

我找到了两种可能的解决方案,这两种解决方案似乎都很有效:

显式地指向静态页面的链接:通过将属性包含在target="_self"静态页面的任何链接中(即超出定义的Angular路由方案的页面),AngularJS将忽略它们,从而正确呈现.

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

$locationProvider.html5Mode(true);

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

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

我使用了第二个解决方案,它似乎对路由方案中定义的URL的行为没有任何负面影响.此解决方案似乎与Angular UI路由器和本机AngularJS路由同样有效.