如何为非root基本URL设置AngularJS $ locationProvider HTML5模式? [英] How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?
问题描述
我有一个工作的AngularJS(1.3.8)应用程序,它在应用程序上下文app下部署为Tomcat中的Web应用程序。
I have a working AngularJS (1.3.8) application, which is deployed as a web app in Tomcat under an application context 'app'.
URL看起来像这个:
URLs look like this:
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'}
);
一切正常。我现在需要做的是从URL中删除hashbang并使用$ location的HTML5模式。到目前为止,我无法让这个工作。
Everything is working fine. What I now need to do is remove the hashbangs from the URLs and use the HTML5 mode of $location. So far, I can not get this to work.
我的假设是我只需要打电话
My assumption was that I just need to call
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
现在应用网址变为
https://www.myserver.com/app/login
https://www.myserver.com/app/register
这不起作用。当我请求URL时
This is not working. When I request the URL
https://www.myserver.com/app
Angular重定向到
Angular redirects to
https://www.myserver.com/login
总体而言,整个路由和资源加载因此更改而中断。例如,无法解析路由定义中的部分URL。它们仅在我添加'/ app /'前缀时才起作用。
Overall, the whole routing and resource loading is broken with this change. For example, the partials URLs in the routing definitions can not be resolved. They are only working when I add a '/app/' prefix.
我尝试使用基本标记,将$ locationProvider调用更改为
I tried to use the base tag, changing the $locationProvider call to
$locationProvider.html5Mode({
enabled: true
});
并使用
<base href="/app">
令人惊讶的是,这没有任何效果。仍然,输入 https://www.myserver.com/app 会导致AngularJS重定向到 https://www.myserver.com/login 。网址 https://www.myserver.com/app/login 不可用。
Surprisingly, this has no effect. Still, entering https://www.myserver.com/app leads to a AngularJS-redirect to https://www.myserver.com/login. The URL https://www.myserver.com/app/login is not available.
这就是我使用基本标签的方式:
This is how I use the base tag:
<!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文件中更改基本标记的位置,如下所示:
I also encounterd other problems. For example, if I change the location of the base tag inside the HTML file like this:
<!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文件。
then suddenly the JS and CSS files can not be resolved any more during load.
有人可以解释我做错了什么吗?
Can somebody explain what I am doing wrong?
推荐答案
我相信你一定有拖尾 /
in base href
I believe you must have trailing /
inside base href
<base href="/app/">
这篇关于如何为非root基本URL设置AngularJS $ locationProvider HTML5模式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!