我正在尝试制作角度路由应用程序。这是我的密码。
<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>
角度脚本。。
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}}
contact.html
<h1>Contact Page</h1>
{{message}}
没有,这个控件可以完美地工作,并将home.html、about.html和contact.html注入到模板中。
但是我想从url中删除hash(#)标记作为下一步。
我搜索了很多,得到了这样的解决方案,在路由配置函数中添加以下代码。
$locationProvider.html5Mode({
requireBase: false,
enabled: true
});
之后,散列标记被删除,但将页面注入模板的操作不起作用。。
为什么会这样。当我删除上面的位置代码时,它的工作非常完美,正如我已经解释过的那样。
如何解决此问题?
谢谢。
如果您使用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/" />
要使用它,您需要一个express js后端来为具有Angular脚本依赖项的基本索引页提供服务
它随附在每个请求中,以便您的应用程序知道如何路由。
如果没有发送其他路由,则创建一个路由,在每个请求上发送索引。