AngularJS使用HTML5模式路由404错误 [英] AngularJS routing 404 error with HTML5 mode
问题描述
我刚开始使用角度js，我尝试了路由并且工作得很好。问题是当我刷新页面时显示404错误，因为它检查我的实际目录而不是检查路由。
I just got started with angular js , i tried routing and worked pretty well .The problem is when i refresh the page it is showing 404 error since it is checking in my actual directory rather than checking in routes.
这里是完整的代码
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<base href="/" />
<a href="blue">blue</a>
<a href="green">green</a> //blue.html and green.html are in same directory as index.html
<p>Click on the links to load blue or green.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/blue/:name?", {
templateUrl: "blue.html",
controller: "blue_control"
})
.when("/green", {
templateUrl: "green.html",
controller: "green_control"
})
$locationProvider.html5Mode({
enabled: true
});
});
app.controller("blue_control", function($scope) {
$scope.msg = "this is blue";
});
app.controller("green_control", function($scope) {
$scope.msg = "this is green";
});
</script>
</body>
</html>
这里是浏览器输出
here are the browser outputs
请给我一些解决方案。
推荐答案
HTML5模式需要重写URL。
来自文档：
HTML5 mode requires URL rewriting.
From the Docs:
HTML5模式
服务器端
使用此模式需要在服务器端重写URL ，基本上你必须重写所有链接到您的应用程序的入口点（例如index.html）。要求
< base>标记对于这种情况也很重要，因为它允许AngularJS区分作为应用程序库的url部分和应该是的路径由应用程序处理。
HTML5 Mode
Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a
<base>tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application.
- AngularJS开发人员指南 - 使用$ location（HTML5模式服务器端）
对于NodeJS和ExpressJS
For NodeJS and ExpressJS
var express = require('express');
var path = require('path');
var router = express.Router();
// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));
// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
res.sendFile(path.resolve('app/index.html'));
});
module.exports = router;
适用于Windows上的IIS
For IIS on Windows
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
参见，如何在HTML5模式下为URL重写AngularJS应用程序配置IIS？
RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^
参见，如何在apache htaccess中为angularjs应用重写网址
文章： AngularJS - 在NodeJS和IIS中启用没有404错误的HTML5模式页面刷新。
这篇关于AngularJS使用HTML5模式路由404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
