ng-view 未在引导页面中加载答案

【问题标题】：ng-view not loading in bootstrap pageng-view 未在引导页面中加载
【发布时间】：2021-04-16 16:54:22
【问题描述】：

这是我的 index.html 页面。 red.html、green.html 和 blue.html 页面没有被路由。

我确定这是代码中某处令人尴尬的语法错误，作为初学者我忽略了，请帮助。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.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-animate.js"></script>
</head>
<body ng-app="myApp">
  <div class="list-group">
    <a href="#/!" class="list-group-item">Main</a>
    <a href="#!red"
       class="list-group-item">Red </a>
    <a href="#!blue"
       class="list-group-item">Blue</a>
    <a href="#!green"
       class="list-group-item">Green</a>
  </div>
  <div ng-view>
  </div>
  <script>
  var app=angular.module("myApp",["ngRoute"]);
  app.config(["$routeProvider",function($routeProvider) {

  $routeProvider
  .when("/", {
    templateUrl : "main.html"
  })
  .when("/red", {
    templateUrl : "red.html"
  })
  .when("/green", {
    templateUrl : "green.html""
  })
  .when("/blue", {
    templateUrl : "blue.html"
  })
  }]);
</script>

</body>

【问题讨论】：

标签： javascript html css angularjs bootstrap-4

【解决方案1】：

你有两个错误。如果您打开浏览器 devtools 并查看控制台，您可以看到它们。首先是语法错误：

  .when("/green", {
    templateUrl : "green.html""
  })

你有一个额外的结束语，应该是

  .when("/green", {
    templateUrl : "green.html"
  })

第二个错误是this link，这有助于解释另一个问题：ngRoute 在 v1.2.0 中从主 Angular 包中分离出来，因此您需要单独加载它：

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

【讨论】：