我正在尝试制作 Angular 路由应用程序。这是我的代码。
<html ng-app="LumenApp">
<head>
<title>LumanAngular v1.0</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row" ng-view>
</div>
</div>
</body>
Angular 脚本..
var app = angular.module('LumenApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
app.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
app.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
home.html
<h1>Home Page</h1>
{{message}}
about.html
<h1>About Page</h1>
{{message}}
联系.html
<h1>Contact Page</h1>
{{message}}
不，这一切都可以完美地工作，并将 home.html、about.html 和 contact.html 注入(inject)模板中。
但我想从 URL 中删除 hash(#) 标记，如下所示。
我搜索了很多，得到了这样的解决方案，在路由配置功能中添加以下代码。
$locationProvider.html5Mode({
requireBase: false,
enabled: true
});
之后，哈希标签被删除，但页面注入(inject)模板不起作用..
为什么会出现这样的情况。当我删除上面的位置代码时，正如我已经解释的那样，它工作得很好。
如何解决这个问题？
谢谢。
最佳答案
如果您使用 Apache 服务器托管您的应用，请在根文件夹中添加 .htaccess 文件:
.htaccess
RewriteEngine on
RewriteBase /restapi/app/
# 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]
并在您的index.html文件head中添加一个base标签:
<base href="/restapi/app/" />
关于javascript - Angular 路由漂亮 URL 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37026956/