仿W3Schools示例的Angular Routing无法生效，求排查原因

我正在进行AngularJS路由基础实验，代码基本照搬示例，但除了非AngularJS路由的purchase.html链接外，其余路由均无法生效，ng-view容器内容始终不变，对应htm文件已放在同一目录。完整代码如下：

<html>
<head>
    <!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app = "myApp">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    
    <ul class="nav navbar-nav" style = "text-align: center;">
     
      <li><a href="#/!">About</a></li>
      <li><a href="#!chars">Characters</a></li>
      <li><a href="purchase.html">Purchase</a></li>
      <li><a href="#!contact">Contact</a></li>
    </ul>
  </div>
</nav>

<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "about.htm"
  })
  .when("/chars", {
    templateUrl : "chars.htm"
  })
  .when("/contact", {
    templateUrl : "contact.htm"
  });
});
</script>

</body>
</html>

核心原因：路由链接格式与AngularJS 1.6+默认配置不匹配 #

AngularJS从1.6.x版本开始，将$locationProvider的hashPrefix默认值从!改为了空字符串，导致你代码中的链接格式（#!chars、#/!）与路由配置的路径（/、/chars）无法匹配，路由因此无法触发。

解决方法 #

方法1：修改链接格式，适配默认路由配置

将导航链接的href修改为不带!的格式，与路由配置保持一致：

<ul class="nav navbar-nav" style="text-align: center;">
  <li><a href="#/">About</a></li>
  <li><a href="#/chars">Characters</a></li>
  <li><a href="purchase.html">Purchase</a></li>
  <li><a href="#/contact">Contact</a></li>
</ul>

方法2：配置hashPrefix为!，保留原有链接格式

如果希望继续使用#!格式的链接，在路由配置中添加$locationProvider.hashPrefix('!')：

app.config(function($routeProvider, $locationProvider) {
  // 配置hash前缀为!
  $locationProvider.hashPrefix('!');
  $routeProvider
    .when("/", { templateUrl: "about.htm" })
    .when("/chars", { templateUrl: "chars.htm" })
    .when("/contact", { templateUrl: "contact.htm" });
});

同时修正About链接的格式，保持统一：

<li><a href="#!/">About</a></li>

额外检查项 #

• 确认about.htm、chars.htm、contact.htm文件名拼写正确（注意大小写，部分系统区分文件名大小写），且与主页面在同一目录。
• 打开浏览器控制台（F12），检查angular-route.js是否加载成功，无404错误。

内容的提问来源于stack exchange，提问作者DennisM