我正在编写一些简单的代码来练习角度路由。我有一个 index.html 文件，其中包含访问相应模板的链接和一个用于显示模板的div 元素。但是，单击链接时不会显示模板，并且 URL 未按预期显示。
网址显示为： http://localhost/angproj/#!#%2Fhome 而不是预期的 http://localhost/angproj#/home
这是代码：
索引.html
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<title>Home</title>
<link rel="stylesheet" href ="styles.css">
<script src="angular/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
<meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
<header><h2>Website Header</h2></header>
<div class="column">
<div class="links">
<a href="#/home">Home</a><br>
<a href="#/services">Our services</a><br>
<a href="#/technologies">Technologies</a><br>
</div>
</div>
<div class="content" ng-view></div>
<footer><h3>Website footer</h3></footer>
</body>
</html>
脚本文件
var myApp = angular
.module("myModule",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home",{
template:"About Us"
})
.when("/services",{
template:"Our Services"
})
.when("/technologies",{
template:"Our Technologies"
})});
问题是用于$location哈希爆炸 URL 的默认哈希前缀是 ('！'(，这就是为什么您的 URL 中有其他不需要的字符的原因。
如果您实际上希望没有哈希前缀并使示例正常工作，则可以通过向应用程序添加配置块来删除默认哈希前缀("！"字符(。
因此，您的脚本文件将是：
var myApp = angular
.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
$locationProvider.hashPrefix(''); // add configuration
$routeProvider
.when("/home", {
template: "About Us"
})
.when("/services", {
template: "Our Services"
})
.when("/technologies", {
template: "Our Technologies"
})
});
完整的工作示例：
var myApp = angular
.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
$locationProvider.hashPrefix(''); // add configuration
$routeProvider
.when("/home", {
template: "About Us"
})
.when("/services", {
template: "Our Services"
})
.when("/technologies", {
template: "Our Technologies"
})
});<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<title>Home</title>
<link rel="stylesheet" href ="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-route.min.js"></script>
<meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
<header><h2>Website Header</h2></header>
<div class="column">
<div class="links">
<a href="#/home">Home</a><br>
<a href="#/services">Our services</a><br>
<a href="#/technologies">Technologies</a><br>
</div>
</div>
<div class="content" ng-view></div>
<footer><h3>Website footer</h3></footer>
</body>
</html>