在页面刷新不工作AngularJS pretty-URL如果基本href设置为非'/' [英] AngularJS pretty-url not working on page refresh if base href is set to other than '/'
问题描述
我是新来AngularJS。我目前面临的问题以书面pretty网址我views.I已设置 $ locationProvider.html5Mode（真）; 删除＃从地址栏中显示的URL。然而，在这样做，我无法重路由到期望的意见。
我不断收到错误拿不到/登录
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
我得到的主页 /登录时，应用程序启动第一次，但是当我刷新页面，我得到了同样的错误。
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基本href指向根为
＆LT;基本href ='/'＆GT;
- If I set the base href on index.html to point to the root as
<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 : "/"
});
我的应用程序工作正常here.But我想'/登录'是我的默认页。请指引我在哪里我错了或者是用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 ，你还需要更新你的服务器端重定向所有的请求像 /登录或 /家居等，以单一入口点，像索引。 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:
这篇关于在页面刷新不工作AngularJS pretty-URL如果基本href设置为非'/'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
