AngularJS关于HTML5模式页面刷新错误的页面_Angularjs_Ngroute_Html5mode

AngularJS关于HTML5模式页面刷新错误的页面

angularjs

AngularJS关于HTML5模式页面刷新错误的页面,angularjs,ngroute,html5mode,Angularjs,Ngroute,Html5mode,我正在使用W3Route示例制作一个简单的网站。我的项目文件夹是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 hre

我正在使用W3Route示例制作一个简单的网站。我的项目文件夹是

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";
});


|  |  | 
var-app=angular.module（“myApp”[“ngRoute”]）；
document.getElementsByTagName（“base”）[0].href=location.href；
app.config（函数（$routeProvider，$locationProvider）{
$locationProvider.html5Mode（true）.hashPrefix（“！”）；
$routeProvider
.当（“/”时{
templateUrl:“template/main.html”，
控制器：“主控制器”
})
.when（“/red”{
templateUrl:“template/red.html”，
控制器：“红色控制器”
})
.when（“/绿色”{
templateUrl:“template/green.html”，
控制器：“绿色控制器”
})
.when（“/blue”{
templateUrl:“template/blue.html”，
控制器：“蓝色控制器”
});
});
应用控制器（“主控制器”，功能（$scope）{
$scope.msg=“主页”；
});
应用控制器（“红色控制器”，功能（$scope）{
$scope.msg=“红色页面”；
});
应用控制器（“绿色控制器”，功能（$scope）{
$scope.msg=“绿色页面”；
});
应用控制器（“blueController”，功能（$scope）{
$scope.msg=“蓝色页面”；
});

页面有index.html、red.html、green.html、blue.html、main.html

.htaccess代码

<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>


重新启动发动机
#不要重写文件或目录
RewriteCond%{REQUEST_FILENAME}-f[或]
RewriteCond%{REQUEST_FILENAME}-d
重写规则^-[L]
重写规则^angular/7/index.html[L]

您需要重写URL，以便将以/angular/7开头且不是文件或目录的任何URL重写为/wamp/www/angular/7/index.html

搜索

[您的服务器软件]SPA（单页应用程序）重写。如果您使用Apache，可以使用.htaccess文件来完成，并且您需要启用mod rewrite。
code
RewriteEngine on#不要重写文件或目录RewriteCond%{REQUEST\u FILENAME}-f[or]RewriteCond%{REQUEST\u FILENAME}-d RewriteRule^-[L]RewriteRule^angular/7/index.html[L]上面是.htaccess这是我尝试过的5.htaccess重写解决方案之一。这是第一个没有问题的工作。谢谢