javascript - Angularjs 不路由 href

Question

我正在尝试路由到我的 html 文件，但当我单击导航链接到给定页面(第 1 页、第 2 页和第 3 页)时，没有任何反应，也没有控制台错误。我正在使用本地通过命令提示符连接到服务器。我的应用程序在 html 标记 - html ng-myApp 中指定。我已经在该网站上查看了类似的问题，但无法弄清楚为什么不起作用。谢谢您的帮助。

这是导航栏:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
        </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/">Page1</a></li>
                <li><a href="#/">Page2</a></li>
                <li><a href="#/">Page3</a></li>

            </ul>
            </div>
        </div>
</nav>

这是将在 ng-view 中使用index.html显示的页面

Page1.html

<div>
    <h1>{{titlePage1}}</h1>
</div>

Page2.html

<div>
    <h1>{{titlePage2}}</h1>
</div>

Page3.html

<div>
    <h1>{{titlePage3}}</h1>
</div>

Controller .js

angular.module('RouteControllers', [])
.controller('firstController', function($scope) {
    $scope.firstTitle = "First page is Blue"

   })
.controller('secondController', function($scope) {
    $scope.secondTitle = "Second page is White"

   })
.controller('thirdController', function($scope) {
    $scope.thirdTitle = "Third page is Orange"

   });

App.js

       angular.module("myApp", ["ngRoute", "RouteControllers"]);

       angular.module("myApp").config(function($routeProvider) {
             $routeProvider.when("/", {
                  template: "<div main-slide-show></div>"<!--This is background template please ignore it -->
      })
.when("/page1", {
    templateUrl : "templates/page1.html",
    controller : "firstController"
})
.when("page2", {
    templateUrl : "templates/page2.html",
    controller : "secondController"
})
        .when("page3", {
                 templateUrl : "templates/page3.html",
                 controller : "thirdController"
        });

Answer 1

您的代码中有一些错误。您忘记传递正确的 href 并在 Controller 中使用了变量名firstTitle，而在模板中使用了不同的变量。尝试这样

angular.module("myApp", ["ngRoute","RouteModule"])

  .config(function($routeProvider,$locationProvider) {
  
  $locationProvider.hashPrefix('');
      $routeProvider.when("/", {
          template: "<div main-slide-show></div>"
        })
        .when("/page1", {
          templateUrl: "page1.html",
          controller: "firstController"
        })
        .when("/page2", {
          templateUrl: "page2.html",
          controller: "secondController"
        })
        .when("/page3", {
          templateUrl: "page3.html",
          controller: "thirdController"
        })
}) 
     
angular.module('RouteModule', []).controller('firstController', function($scope) {
          $scope.firstTitle = "First page is Blue"

        })
        .controller('secondController', function($scope) {
          $scope.secondTitle = "Second page is White"

        })
        .controller('thirdController', function($scope) {
          $scope.thirdTitle = "Third page is Orange"

        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<div ng-app="myApp" ng-controller="firstController">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header"> <a class="navbar-brand" href="#/">Logo</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#/page1">Page1</a></li>
        <li><a href="#/page2">Page2</a></li>
        <li><a href="#/page3">Page3</a></li>

      </ul>
    </div>

  </nav>
  <ng-view></ng-view>

<script type="text/ng-template" id="page1.html">
  <div>
    <h1>{{firstTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page2.html">
  <div>
    <h1>{{secondTitle}}</h1>
  </div>
</script>
<script type="text/ng-template" id="page3.html">
  <div>
    <h1>{{thirdTitle}}</h1>
  </div>
</script>