这是第1页

Question

//您好我正在尝试学习角度路由。我只想从youtube尝试一个简单的例子。当我点击第1页和第2页链接时。我仍然留在同一页上。请帮忙

//This is index.html

<!DOCTYPE html>
<html ng-app>
    <head>
            <title>Angular Practice</title>[enter image description here][1]

            <script src = "app.js" type = "text/javascript"> </script>
    </head>

 <body>

<h1>This is Index.html page</h1> <br/>
<a href = "/#/page1"> This is page 1 </a> <br/>
<a href = "/#/page2"> This is page 2 </a> <br/>


<div ng-view> </div> 

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

 </body>

</html>

//这是app.js

    var myApp = angular.module('myApp',['ngRoute'])
    .config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
          $routeProvider.when('/page1', { templateUrl : 'partials/page1'});
          $routeProvider.when('/page1', { templateUrl : 'partials/page1'});
          $routeProvider.otherwise({ redirectTo : 'index.html'});

          $locationProvider.html5mode({enabled : true, requiredBase : false});
    }]);

//这是page1.html

这是第1页

//这是page2.html

这是第2页

  [1]: https://i.stack.imgur.com/WuleO.png

Answer 1

从链接中删除#。像这样<a href = "/page2"> This is page 2 </a>因为你启用了html5mode

<强> 修改

您应该将<html ng-app>更改为<html ng-app="myApp">

Answer 2

添加@HJz建议。

在app.js中，您在两个条件中都定义了 page1 的路径，并使用相应的templateUrl将其中一个更改为 page2

var myApp = angular.module('myApp',['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
      $routeProvider.when('/page1', { templateUrl : 'partials/page1.html'});
      $routeProvider.when('/page2', { templateUrl : 'partials/page2.html'});
      $routeProvider.otherwise({ redirectTo : 'index.html'});

      $locationProvider.html5mode({enabled : true, requiredBase : false});
}]);

Answer 3

首先，将您的html代码更新为

<a href = "#page1"> This is page 1 </a> <br/>

其次，删除其中一个 $ routeProvider for / page1 ，因为该行已被广告

$routeProvider.when('/page1', { templateUrl : 'partials/page1'});

Answer 4

您的代码中存在许多语法错误.....我将在下面的解释中进行描述。

首先，对于templateUrl属性，应该给出模板及其文件扩展名。假设您使用.html文件作为模板，TemplateUrl应该更改如下：

$routeProvider.when('/page1', { templateUrl : 'partials/page1.html'});
$routeProvider.when('/page2', { templateUrl : 'partials/page2.html'});

你做的第二个语法错误是在使用html5Mode.Remember时，html5Mode关键字函数是区分大小写的。

从html5mode更改为html5Mode

第三一个是将requiredBase属性更改为requireBase

 $locationProvider.html5Mode({enabled : true, requireBase : false});

最后一个是删除锚标记中的hasbang以通过链接。这样做是因为你启用了html5Mode。

<a href="/page1">This is page 1 </a>
  <br />
 <a href="/page2">This is page 2 </a>
  <br />

编辑1：

还将标记加载到head部分的app.js上方，如下所示

<head>
  <title>Angular Practice</title>[enter image description here][1]
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"> </script>
  <script src = "app.js" type = "text/javascript"> </script>

但是，在body标签中加载所有脚本是一个好习惯。要突出显示脚本的顺序，我已将脚本放在head标签中。

角度路由 - 显示未找到的页面

这是第1页

这是第2页

4 个答案: