如何为非根基 url 设置 AngularJS $locationProvider HTML5 模式？

Question

我有一个工作的 AngularJS (1.3.8) 应用程序，它在应用程序上下文 'app'.

中作为 Web 应用程序部署在 Tomcat 中

URLs 看起来像这样：

https://www.myserver.com/app/#/login 

https://www.myserver.com/app/#/register

等路由定义如下：

$routeProvider.when(
    'login',
    {templateUrl: 'partials/login.html?' + now, controller: 'LoginController'}
);

$routeProvider.when(
    'register',
    {templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'}
);

$routeProvider.otherwise(
    {redirectTo: 'login'}
);

一切正常。我现在需要做的是从 URLs 中删除 hashbangs 并使用 $location 的 HTML5 模式。到目前为止，我无法让它发挥作用。

我的假设是我只需要调用

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

现在应用程序 URL 更改为

https://www.myserver.com/app/login 

https://www.myserver.com/app/register

这是行不通的。当我请求 URL

https://www.myserver.com/app

Angular 重定向到

https://www.myserver.com/login

总的来说，这个变化打破了整个路由和资源加载。例如，路由定义中的partials URL 无法解析。它们仅在我添加“/app/”前缀时有效。

我尝试使用基本标签，将 $locationProvider 调用更改为

$locationProvider.html5Mode({
    enabled: true
});

并使用

<base href="/app">

令人惊讶的是，这没有效果。不过，输入 https://www.myserver.com/app leads to a AngularJS-redirect to https://www.myserver.com/login. The URL https://www.myserver.com/app/login 不可用。

这是我使用基本标签的方式：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <link href="css/mycss" rel="stylesheet" type="text/css">
    ...
    <script src="js/my.js"></script>
    <base href="/app">
</head>
<body class="ng-cloak">
    <ng-view></ng-view>
</body>
</html>

我也遇到了其他问题。例如，如果我像这样更改 HTML 文件中基本标记的位置：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <base href="/app">
    <link href="css/mycss" rel="stylesheet" type="text/css">
    ...
    <script src="js/my.js"></script>
</head>
<body class="ng-cloak">
    <ng-view></ng-view>
</body>
</html>

然后在加载过程中突然无法再解析 JS 和 CSS 文件。

有人可以解释我做错了什么吗？

Answer 1

我相信你一定有尾随 / inside base href

<base href="/app/">

如何为非根基 url 设置 AngularJS $locationProvider HTML5 模式？

How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

html

javascript

url-routing

angularjs

angularjs-routing