我目前在AngularJS html5Mode上遇到问题。我正在一个托管在我的localhost WAMP服务器上的博客站点上工作。我在index.html文件中定义了一个基本URL，并且我在app.js文件的config部分中将html5Mode设置为true，并且我的目录中也有一个.htaccess文件。
这是我的网址在没有启用html5模式的情况下的样子。 http://localhost/Blog/index.html/#posts
如果我像这样加载我的网站： 本地主机/博客/ 要么 localhost / Blog / index.html它将重定向 至 localhost / Blog / posts这就是我想要的。
但是，如果我尝试手动输入此网址或刷新页面，则会转到localhost / dashboard，如果我点击其他链接，则会转到 本地主机/ nameOfLink
我不是100％肯定，但我认为问题可能出在.htaccess文件中
这是我的index.html文件
<!DOCTYPE html>
<html lang="en" ng-app="blog" class="no-js" ng-cloak>
<head>
<base href="/Blog/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#29B6F6">
<meta name="msapplication-navbutton-color" content="#29B6F6">
<meta name="apple-mobile-web-app-status-bar-style" content="#29B6F6">
<title>Phone reviews</title>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
<link rel='stylesheet' id='primary-font-css' href='http://fonts.googleapis.com/css?family=Karla:300,400,500,700' type='text/css' media='all' />
<link rel="stylesheet" href="http://blackrockdigital.github.io/startbootstrap-sb-admin/font-awesome/css/font-awesome.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav0">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="login.html" class="navbar-brand">Phone Reviews</a>
</div>
<div class="collapse navbar-collapse" id="nav0" ng-controller="NavCtrl">
<ul class="nav navbar-nav navbar-right">
<li ng-click="scroll()" ng-class="{ active: isActive('/posts')}"><a href="#/posts">Home</a></li>
<li ng-click="scroll()" ng-class="{ active: isActive('/contact')}"><a href="#/contact">Contact Us</a></li>
<li ng-click="scroll()" ng-class="{ active: isActive('/registration')}"><a href="#/registration">Register</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">My Account <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" ng-init="userInit(<?php echo $_SESSION['name'] $_SESSION['role']; ?>)">
<li><a href="#">{{user}}</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Favourites</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<header class="header">
<h1>Phone Reviews</h1>
</header>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>You have successfully registered! Go to your email to confirm account.</p>
</div>
<div class="social-icons">
<ul>
<li><a href="#" class="icon facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icon instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="#" class="icon youtube"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" class="icon twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icon pinterest"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="container-fluid" id="wrapper">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 content"><div ng-view></div></div>
<div ng-include="'includes/sidebar.html'"></div>
</div>
<div ng-include="'includes/footer.html'"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-sanitize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="ui-bootstrap.js"></script>
<script src="page.js"></script>
<script src="app.js"></script>
</body>
</html>
这是我的app.js文件
var app = angular.module('blog', ['ngRoute', 'ngSanitize', 'ui.bootstrap.tpls', 'angularUtils.directives.dirPagination'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/posts', { templateUrl: 'includes/main.html', controller: 'MainCtrl' }).
when('/posts/:postUrl', { templateUrl: 'includes/post.html', controller: 'PostCtrl' }).
when('/contact', { templateUrl: 'includes/contact.html', controller: 'ContactCtrl' }).
when('/registration', { templateUrl: 'includes/register.html', controller: 'RegistrationCtrl'}).
otherwise({redirectTo: '/posts'});
}]);
这是我的.htaccess文件
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]