角度路由不起作用

Question

我在学习教程时遇到了 Angular 路由示例。我试过作为教程，但它不会工作。但是当我从教程中复制代码时，它可以完美运行。谁能帮我解决这个问题。

这是我的主页

<div ng-controller="routingCtrl">
    <div>
        <ul>
            <li><a href="#home">Home</a> </li>
            <li><a href="#other">Oher</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div>
            <p>{{message}}</p>
        </div>
        <ng-view></ng-view>
    </div>
</div>

这是我的脚本文件 script.js

    var routingApp = angular.module('sampleRouting', ['ngRoute'])
              .controller('routingCtrl', function ($scope) {
                  $scope.message = "Main Page";
              })
              .config(function ($routeProvider, $locationProvider) {
                  $routeProvider
                  .when('/', {
                      templateUrl: 'home.html',
                      controller: 'homeCtrl'
                  })
                  .when('/other', {
                      templateUrl: 'other.html',
                      controller: 'otherCtrl'
                  })
                  .when('/contact', {
                      templateUrl: 'contact.html',
                      controller: 'contactController'
                  })
                  .otherwise({ redirectTo: '/' }); 
                  })
                  .controller('homeCtrl', function ($scope) {
                      $scope.homeMessage = "Welcome to home !"
                  })
                  .controller('otherCtrl', function ($scope) {
                      $scope.otherMessage = "Welcome to other !"
                  })
                  .controller('contactController', function ($scope) {
                      $scope.contactMessage = "Welcome to Contacts !"
                  })

这是other.html

    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

另外两个home.html和contact.html也包含这样的随机文字。

问题是 home.html 视图在开始时已加载到 index.html 中，但是当我单击指向 Other 的超链接时联系内容不会有机会。由于 home.html 已加载，我认为 ngRoute 运行良好。但是另外两个就不行了。谁能帮我解决这个问题？非常感谢。

Answer 1

在您的配置中尝试使用# 删除路由

$locationProvider.html5Mode(true);

在你的 html 中删除 #

<li><a href="home">Home</a> </li>
<li><a href="other">Oher</a></li>
<li><a href="contact">Contact</a></li>

Answer 2

这可能是因为您使用的是 angular 1.6，而本教程使用的是旧版本的 angular，这就是为什么在您复制代码时它可以工作的原因。

您可以通过更改来验证是否是这种情况：

<li><a href="#other">Oher</a></li>

到

<li><a href="#!other">Oher</a></li>

1.6 中的默认哈希前缀发生了变化。 有关此问题的可能解决方案，请查看：AngularJS: ngRoute Not Working

如果您想将其恢复为教程版本，您应该使用链接中的选项 3 并手动设置哈希前缀。

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);