Question

我正在尝试实现AngularJS的路由功能，但是当我尝试导航到页面时似乎有些错误，因为尽管routeProvider.when()工作正常，但我觉得routeProvider.otherwise()无法正常工作。

以下是Plunkr的链接

https://plnkr.co/edit/tu1C7k?p=info

以下是代码：

Index.html文件：

   <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
      <script data-require="angular.js@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
      <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
      <script src="script.js"></script>
      <link rel="stylesheet" href="style.css" />

    </head>

    <body>
      <h1>Hello Plunker!{{5+5}}</h1>
      <a href="#Next">Next Page</a>
      <a href="#Prev">Previous Page</a>
      <div ng-view></div>
      <p>After NG View</p>
    </body>

    </html>

NextPage.html

    <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
      <script data-require="angular.js@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
      <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>

    <body>
      <h1>This is the next Page</h1>

    </body>

    </html>

Script.JS文件

    // Code goes here
    var app=angular.module('myApp',["ngRoute"]);
    app.controller("loginController",function($scope){});
    app.config(function ($routeProvider) {
      $routeProvider.when('/Next',{
        templateUrl:'NextPage.html'
      }).when("/Prev",{
        templateUrl:"PrevPage.html"
      }).otherwise({redirectTo:"/Prev"})
        });

非常感谢任何形式的帮助。 PS：PreviousPage.html代码与NextPage.html

相同

由于

Answer 1

我创建了一个plunker https://plnkr.co/edit/oEDcMu4LnZUPOwXGPkbo?p=preview，我已在div中附加了锚标记，如下所示。

<div>
  <h1>Hello Plunker!{{5+5}}</h1>
 <a href="#Next">Next Page</a>
 <a href="#Prev">Previous Page</a>
</div>

此外，路由模板中不需要head和body标记。但那不是罪魁祸首。但这是不需要的东西。

角度路由无法正常工作

Index.html文件：

NextPage.html

Script.JS文件

1 个答案: