[英]AngularJS routing 404 error with HTML5 mode
我刚开始使用angular js，我尝试了路由并且工作得很好。问题是当我刷新页面时它显示404错误，因为它正在检查我的实际目录而不是在检查路由。
这是完整的代码
<!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 ，基本上，您必须重写所有指向应用程序入口点的链接（例如index.html）。 在这种情况下，需要
<base>标记也很重要，因为它允许AngularJS区分作为应用程序基础的url部分和应由应用程序处理的路径。
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;
<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模式下用URL重写AngularJS应用程序？
RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^
请参见， 如何为angularjs应用程序在apache htaccess中重写url
使用http服务器和本地网络服务器时，我遇到了同样的问题，这是html5的一个已知问题，并在angular-ui / ui-router FAQ中进行了详细介绍。
我使用以下/etc/nginx/sites-enabled/default切换到Nginx（通过apt-get安装）
server {
listen 80 default_server;
listen [::]:80 default_server;
#root /var/www/html;
root /home/conor/workspace/code_institute/route_test;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
#server_name _;
server_name localhost;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
#try_files $uri $uri/ =404;
try_files $uri $uri/ /index.html;
}
}
更改后开始/停止/重新加载；
sudo service nginx <start|stop|status>
该常见问题解答还涵盖了Apache / Express / asp.NET
问题是您没有将变量$ routeProvider分配给控制器，这导致控制器无法访问变量$ routeParams
试试吧
/*app.controller("blue_control", function($scope) {
$scope.msg = "this is blue";
});
app.controller("green_control", function($scope) {
$scope.msg = "this is green";
});*/
app.controller("blue_control", function($scope,$routeParams) {
console.log( $routeParams.term_user);
$scope.msg = "this is blue";
});
app.controller("green_control", function($scope,$routeParams) {
$scope.msg = "this is green";
});
更新
我认为您不能使用带有较低版本angulajs的路由版本，例如，请更改较高版本的angularjs
/* <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.6.4/angular.min.js"></script>
<!DOCTYPE html> <html> <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.4.8/angular-route.js"></script> <body ng-app="app"> <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("app", ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when("/blue/:name?", { templateUrl: "blue.html", controller: "blue_control" }) .when("/green", { templateUrl: "green.html", controller: "green_control" }) }); app.controller("blue_control", ['MyFirstController',function($scope, $routeParams) { $scope.msg = "this is blue"; }]); app.controller("green_control", ['MyFirstController2',function($scope, $routeParams) { $scope.msg = "this is green"; }]); </script> </body> </html>
angularjs路由/ html5mode和htaccess给出404错误
[英]angularjs routing / html5mode and htaccess giving 404 error
使用htaccess重写URL会收到404错误-AngularJS html5模式
[英]URL rewrite with htaccess gets 404 error - AngularJS html5 mode
启用AngularJS HTML5模式后，重新加载页面显示404错误消息
[英]Reloading Page Shows 404 error message after Enabling AngularJS HTML5 mode
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.