AngularJS 使用 HTML5 模式路由 404 错误 [英] AngularJS routing 404 error with HTML5 mode
问题描述
我刚开始使用 angular 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>
这里是浏览器输出
请给我一些解决方案.
推荐答案
HTML5 模式需要 URL 重写.
来自文档:
使用这种模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接(例如 index.html).需要
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
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
<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>
见，如何配置 IIS 以在 HTML5 模式下重写 AngularJS 应用程序的 URL?
RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^
参见，如何在 apache htaccess 中重写 url对于 angularjs 应用程序
文章:AngularJS - 在 NodeJS 和 IIS 中启用 HTML5 模式页面刷新而不会出现 404 错误.
这篇关于AngularJS 使用 HTML5 模式路由 404 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
