[英]stateProvider using htm5Mode cannot GET error
I am using stateProvider with $locationProvider.html5Mode: 我将stateProvider与$ locationProvider.html5Mode结合使用:
// Redirect any unmatched url
$urlRouterProvider.otherwise("/cool");
$stateProvider
// Dashboard
.state('cool', {
url: "/cool",
templateUrl: "views/cool.html"
});
$locationProvider.html5Mode(true);
But when I http://localhost:8080/cool
I will get Cannot GET /cool
error. 但是当我
http://localhost:8080/cool
我会收到Cannot GET /cool
错误。 http://localhost:8080/
and http://localhost:8080/#/cool
is working correctly. http://localhost:8080/
和http://localhost:8080/#/cool
正常工作。
After some research I found out the problem is because of grunt connect. 经过一番研究,我发现问题是由于连接不畅。 so I added modRoute to route all url to index.html:
所以我添加了modRoute将所有网址路由到index.html:
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
modRewrite([
'!\\.\\w+$ /'
]),
but now the problem is every url like http://localhost:8080/uncool to http://localhost:8080/cool . 但是现在的问题是每个URL都像http:// localhost:8080 / uncool到http:// localhost:8080 / cool 。
First, make sure you have the "base"-tag in your head. 首先,请确保您的脑袋中有“基本”标签。
<base href="/">
Then make sure that your "/cool"-page serves the same thing as your "/". 然后确保您的“ / cool”页面与“ /”具有相同的作用。 If not, the server will send back 404 (as expected).
如果没有,服务器将发送回404(按预期)。 This has to be true for all your "sub pages".
所有“子页面”都必须如此。
To test if this is the case – create a link with a href to "/cool", angular should handle this "internally" with a pushState
, which differs from just "browsing" to that page. 要测试是否存在这种情况–创建一个带有href到“ / cool”的链接,angular应该使用
pushState
“内部”处理此状态,这不同于仅“浏览”该页面。 Meaning, when you click the link, the page will serve as expected, but if you reload ( CTRL + R ), you will get the error. 这意味着,当您单击链接时,该页面将按预期运行,但是如果重新加载( CTRL + R ),则会收到错误消息。
If you use html5mode
you have to include <base>
tag in your head
part in document. 如果使用
html5mode
,则必须在文档的head
包含<base>
标记。 You can set requireBase
to false and use html5mode
without <base>
tag. 您可以将
requireBase
设置为false并使用不带<base>
标记的html5mode
。 Please have a look at angular documentation and ui-router documentation 请查看角度文档和ui-router文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.