Angular 路由不起作用

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 和 Contact 的超链接，内容不会出现。由于 home.html 已加载，我认为 ngRoute 运行良好。但是另外两个不行。谁能帮我解决这个问题？非常感谢。

Answer 1

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

您可以通过更改来验证情况是否如此：

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

到

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

1.6 中的默认 hash-prefix 发生了变化。有关此问题的可能解决方案，请查看：

如果您想将其还原为教程版本，您应该使用 link 中的选项 3 并手动设置 hash-prefix。

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

Answer 2

在您的配置中尝试使用 #

删除路由

$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>

Angular 路由不起作用

Angular Routing won't work

html

routing

angularjs

single-page-application

ngroute