AngularJS删除#并在刷新页面时出错 [英] AngularJS remove # and have error when refresh page
问题描述
我有AngularJS webapp，并从 Tomcat 7 启动.使用$locationProvider.html5Mode(true)我从网址中删除哈希'#'
I have AngularJS webapp and start it with Tomcat 7. Using $locationProvider.html5Mode(true) I remove hash '#' from url
localhost:8080/App/#/login -> localhost:8080/App/login
但是现在，当我刷新localhost:8080/App/login时，我有了404 error.如何配置Tomcat7进行localhost:8080/App/login刷新?
But now, when I refresh localhost:8080/App/login I have 404 error. How to configure Tomcat7 for localhost:8080/App/login refresh?
app.config:
app.config:
$urlRouterProvider.otherwise("/login/");
$stateProvider
.state('home', {
abstract: true,
templateUrl: 'dist/view/home.html',
controller: 'HomeCtrl'
});
$locationProvider.html5Mode(true);
index.html:
index.html:
<head>
<meta charset="utf-8">
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
推荐答案
这是因为执行完全重载时，您始终会使用当前URL向服务器发送请求.由于Angular尚未加载，因此它无法处理该路由，并且服务器不知道在angular中存在哪些路由，而对于不存在哪些路由
It's because when you do a full reload you always send a a request to the server with the current url. Since Angular has not loaded yet it can't handle the route, and the server doesn't know anything about what routes exist in angular and not
没有html5mode，Angular使用类型为www.example.com/#/page的分段url. #最初用于锚定链接，因此按照惯例，URL的片段部分将被服务器完全忽略.对于服务器，以上请求将与www.example.com/相同，这可能是index.html所在的位置.因此，在这种情况下，重新加载页面将获得index.html，它将加载Angular，而Angular将依次处理网址(#/page)的片段部分.
Without html5mode Angular uses fragmented urls of the type www.example.com/#/page. # was originally used for anchor-links so by convention the fragment part of the url is completely ignored by the server. To the server that above request would be the same as just www.example.com/, which is probably where you index.html is located. So reloading your page will in this case get your index.html, which will load Angular, which will in turn handle the fragment part of the url (#/page).
但是使用html5mode时，该片段被隐藏了，并且该URL看起来像普通的URL www.example.com/page.但是，当您重新加载页面时，服务器不会获得该片段，因此它会尝试查找/page下提供的任何内容，这可能什么都没有.给您一个404，由于未加载index.html，并且页面损坏，因此无法加载Angular.
With html5mode however the fragment is hidden, and the url looks like a normal url, www.example.com/page. But when you reload the page the server doesn't get the fragment so it tries to find whatever is served under /page, which is probably nothing. Giving you a 404, Angular cannot load since index.html is not loaded, and you have a broken page.
解决此问题的常用方法是让服务器在所有与静态资产(或模式之一)不匹配的网址下提供index.html.因此，如果您请求说一个图像，它将找到它并返回确定，但是，如果您请求/page(并且它不作为静态资产存在)，则它将返回index.html.然后Angular将启动，读取URL并触发正确的路由.
The usual way to fix this is to have the server serve index.html under all urls that does not match a static asset (or the pattern of one). So if you request say an image it will find it and return it ok, but if you request /page (and it does not exist as a static asset) then it returns index.html. Then Angular will start, read the url and trigger the correct route.
我只是在nginx中做到了这一点，所以我不知道Tomcat如何做到这一点，但是原理应该是相同的.
I have only done this in nginx so I don't know how Tomcat would do it, but the principle should be the same.
这篇关于AngularJS删除#并在刷新页面时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
