如果 base href 设置为“/"以外的值，则 AngularJS 漂亮 url 无法在页面刷新时工作 [英] AngularJS pretty-url not working on page refresh if base href is set to other than '/'
问题描述
我是 AngularJS 的新手.我目前在为我的视图编写漂亮的 url 时遇到问题.我已设置 $locationProvider.html5Mode(true); 以从地址栏中显示的 url 中删除 #.但是，这样做后我无法重新路由到所需的视图.我不断收到错误 Cannot GET/login
I am new to AngularJS. I am currently facing problem in writing pretty urls for my views.I have set $locationProvider.html5Mode(true); to remove # from the urls displayed in the address bar. However,upon doing so I am unable to reroute to desired views.
I keep getting the error Cannot GET /login
第一次启动应用程序时，我得到了主页 /login，但是当我刷新页面时，我得到了同样的错误.
I get the home page /login when the app is launched first time , but when I refresh the page I get the same error.
这里是应用程序的主页(index.html)
Here the main page of application (index.html)
<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
<!-- endbuild -->
</head>
<body ng-app="F1FeederApp" class="col-md-8">
<ng-view></ng-view>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/loginHttpBackend.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/driver.js"></script>
<script src="scripts/controllers/drivers.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->
我的 app.js 文件(重新路由发生的地方)看起来像这样
My app.js file(where rerouting takes place) looks like this
angular.module('F1FeederApp.controllers', []);
angular.module('F1FeederApp',
[ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ])
.config([ '$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$location) {
console.log('---------------inside config----------------');
console.log($routeProvider);
$routeProvider.when("/login", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/login"
});
$locationProvider.html5Mode(true);
} ]);
我也做了以下重要观察
- 如果我将 index.html 上的 base href 设置为
<base href='/'>
并执行重新路由
$routeProvider.when("/", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/"
});
我的应用程序在这里工作正常.但我希望/login"成为我的默认页面.请指导我哪里出错了，或者是 AngularJS 本身的问题.
my app works fine here.But I want '/login' to be my default page. Kindly guide me on where I am going wrong or is it an issue with AngularJS itself.
推荐答案
除了启用 html5Mode 外，您还需要更新服务器端以重定向所有请求，例如 /login 或 /home 等到单个入口点，如 index.html.
Other than enabling html5Mode on, you also need to update your server-side to redirect all the request like /login or /home etc to a single entry-point, like an index.html.
服务器端
使用这种模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接(例如 index.html)
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)
搜索服务器端"在此文档页面上:
Search for "Server side" on this documentation page:
这篇关于如果 base href 设置为“/"以外的值，则 AngularJS 漂亮 url 无法在页面刷新时工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
