角路由漂亮URL错误
[英]Angular Routing Pretty URL Error
问题描述
I am trying to make angular routing application. 
我正在尝试制作角度路由应用程序。 here is my code. 这是我的代码。
<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 Scripts.. 角度脚本
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 home.html
<h1>Home Page</h1>
{{message}}
about.html about.html
<h1>About Page</h1>
{{message}}
contact.html contact.html
<h1>Contact Page</h1>
{{message}}
No wthis contiton its working perfectly and injecting the home.html, about.html and contact.html into the template. 这不能完美地工作并将home.html，about.html和contact.html注入模板。
But I want to remove the hash(#) tag from the url as next. 但我接下来要从网址中删除hash（＃）标记。
I searched a lot and get the solution like that to add the below code in routing configuration function. 我进行了很多搜索并获得了类似的解决方案，以便在路由配置功能中添加以下代码。
$locationProvider.html5Mode({
requireBase: false,
enabled: true
});
After that the hash tag was removed, but the injection of pages to template is not working.. 之后，删除了哈希标签，但是无法将页面注入模板。
Why this happen like this. 为什么会这样发生。 when I removed the above location code, its working perfectly as I already explained. 当我删除上面的位置代码后，它已经可以正常运行了。
How can I fix this issue ? 如何解决此问题？
Thanks. 谢谢。
2 个解决方案
解决方案1
3 已采纳 2016-05-06 04:58:51
If you are using Apache server for hosting your app, add a .htaccess file in your root folder: 如果您使用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]
And add a base tag in your index.html file head : 并在index.html文件head添加一个base标记：
<base href="/restapi/app/" />
解决方案2
0 2016-05-04 12:05:11
To use this you need an express js backend to serve the basic index page with Angular script dependencies 要使用此功能，您需要一个快速的js后端以使用Angular脚本依赖项来提供基本索引页
It comes with every request so that your app knows how to route. 它包含每个请求，以便您的应用知道如何进行路由。
Create a route that sends the index on every request if no other route is sent. 如果没有其他路由发送，则创建一个在每个请求上发送索引的路由。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.