使用 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) 时,相对链接路径被破坏