使用 BASE 标记和 HTML5Mode 时如何在 Angular 中设置根路径?

Posted

技术标签:

【中文标题】使用 BASE 标记和 HTML5Mode 时如何在 Angular 中设置根路径?【英文标题】:How do I set root path in Angular when using BASE tag and HTML5Mode? 【发布时间】:2013-01-06 09:58:19 【问题描述】:

鉴于我在 <base href="/test/"> 目录中的 Angular 应用程序的基本示例,将应用程序发送回主(或根)路径的最佳方法是什么?菜单 sn-p(如下)中的所有链接都有效,但是,“主页”链接会导致 IE 在后续请求中重新加载应用程序(具体来说是HomeCtrl)。

app.js

var basic = '<h1>title</h1><p>body</p>';

var app = angular.module('website', []);

app.config( function($routeProvider, $locationProvider) 
    $routeProvider.
        when('/',  template: basic, controller: HomeCtrl ).
        when('/about',  template: basic, controller: AboutCtrl ).
        when('/experiments',  template: basic, controller: ExperimentsCtrl ).
        when('/:alias',  template: basic, controller: PageCtrl, resolve:  alias: resolveAlias  ).
        otherwise( redirectTo: '/' );

    $locationProvider.html5Mode('true');
 );

menu.html

<base href="/test/">
....
<div id="menu">
    <a href="./" class="btn">Home</a>
    <a href="./about" class="btn">About</a>
    <a href="./experiments" class="btn">Experiments</a>
    <a href="./unicorn" class="btn">Unicorn</a>
</div>

更新

对根的每次请求,在IE9中,都会重新运行JS文件,然后触发两次路由事件。

LOG: MainCtrl Loaded!
LOG: routeChangeStart[object Arguments]
LOG: routeChangeSuccess[object Arguments]
LOG: routeChangeStart[object Arguments]
LOG: routeChangeSuccess[object Arguments]
LOG: HomeCtrl Called!

【问题讨论】:

只是为了好玩,更改您的其他指令以重定向到其他地方,看看会发生什么...... 【参考方案1】:

来自文档:

redirectTo – (string|function())= – value to update $location path with and trigger route redirection.

所以浏览器重定向是你调用的函数的一部分。

代替:

 redirectTo: '/' 

尝试使用与家乡相同的路线:

 template: basic, controller: HomeCtrl 

我还没有尝试过,因为我现在无法尝试,但如果它有效,请告诉我。

【讨论】:

以上是关于使用 BASE 标记和 HTML5Mode 时如何在 Angular 中设置根路径?的主要内容,如果未能解决你的问题,请参考以下文章

将 AngularJS html5mode 与 nodeJS 和 Express 一起使用

带有 Html5Mode 的 Angular-UI-Router 刷新页面问题

Laravel 5 + AngularJS html5Mode

AngularJS:打开 html5mode(true) 时,相对链接路径被破坏

使用 HTML5Mode 配置多个 AngularJS2 项目的 Nginx 配置

AngularJS - ui-router - MVC 5 - html5mode