AngularJS关于带有html5mode页面刷新错误的页面[重复]
Posted
技术标签:
【中文标题】AngularJS关于带有html5mode页面刷新错误的页面[重复]【英文标题】：AngularJS about page with html5mode page refresh error [duplicate] 【发布时间】：2018-08-26 13:30:33 【问题描述】：我正在使用 w3schools 路由示例来制作一个简单的网站。我的项目文件夹是wamp/www/angular/7 和base href="/angular/7/"。但是当我在angular/7/red 上刷新我的页面时，页面刷新显示未找到。请建议或纠正我的错误，以下是代码。
<!DOCTYPE html>
<html ng-app="myApp">
<base href="/angular/7/">
<!--script>document.write('<base href="' + document.location + '" >');</script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>
<a href="./">Main</a> | <a href="./red">Red</a> | <a href="green">Green</a> | <a href="blue">Blue</a>
<div ng-view></div>
<script src="script.js"></script>
</body>
</html>
var app = angular.module("myApp", ["ngRoute"]);
document.getElementsByTagName("base")[0].href = location.href;
app.config(function($routeProvider, $locationProvider)
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.when("/",
templateUrl : "template/main.html",
controller : "mainController"
)
.when("/red",
templateUrl : "template/red.html",
controller : "redController"
)
.when("/green",
templateUrl : "template/green.html",
controller : "greenController"
)
.when("/blue",
templateUrl : "template/blue.html",
controller : "blueController"
);
);
app.controller("mainController", function ($scope)
$scope.msg = "Main Page";
);
app.controller("redController", function ($scope)
$scope.msg = "Red Page";
);
app.controller("greenController", function ($scope)
$scope.msg = "Green Page";
);
app.controller("blueController", function ($scope)
$scope.msg = "Blue Page";
);
页面是 index.html、red.html、green.html、blue.html、main.html
.ht访问代码
<ifModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %REQUEST_FILENAME -f [OR]
RewriteCond %REQUEST_FILENAME -d
RewriteRule ^ - [L]
RewriteRule ^ angular/7/index.html [L]
</ifModule>
【问题讨论】：
这是我尝试过的 5 种 .htaccess 重写解决方案之一。这是第一个没有问题的工作。谢谢！ 【参考方案1】：您需要重写 URL，以便将任何以 /angular/7 开头且不是文件或目录的 url 重写为 /wamp/www/angular/7/index.html
搜索[your server software] SPA (single page app) rewrite。如果您使用 Apache，可以使用 .htaccess 文件来完成，并且您需要启用 mod-rewrite。
【讨论】：
code以上是关于AngularJS关于带有html5mode页面刷新错误的页面[重复]的主要内容，如果未能解决你的问题，请参考以下文章
GitHub 页面上的 AngularJS html5mode 支持
Laravel 5 + AngularJS html5Mode
将 AngularJS html5mode 与 nodeJS 和 Express 一起使用