1

我刚刚创建了一个简单的项目来学习角度路由，我的项目如下：

index.html：

<!DOCTYPE html>
<html ng-app="app">
<body>
    <div>
        <a href="#/">Home</a>
        <a href="#/hi">Hi</a>
        <a href="#/bye">bye</a>
    </div>
    <div class="ng-view"></div>
    <script src="https://code.angularjs.org/1.6.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.3/angular-route.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>


脚本.js：

var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "home.html"
    })
    .when("/hi", {
        templateUrl: "hi.html"
    })
    .when("/bye", {
        templateUrl: "bye.html"
    });
});


hi.html: <h1>Hi</h1>
bye.html: <h1>bye</h1>
home.html: <h1>Home</h1>

上面的三个 html 只包含一个 h1 标签以保持简单

我的代码的一个 plunker：http: //plnkr.co/edit/uNZicTuRKDkR7ATwdFE0

我正在关注本教程：https ://www.w3schools.com/angular/angular_routing.asp

不知道是否过时或为什么它不起作用，谢谢

4

1 回答 1

1

问题是您使用的是角度 1.6，而教程使用的是 1.4。由于 1.6 版中的新哈希前缀，您的链接应该是这样的：

  <div>
    <a ng-href="#!/">Home</a>
    <a ng-href="#!/hi">Hi</a>
    <a ng-href="#!/bye">bye</a>
  </div>

见 plunker。
http://plnkr.co/edit/qUYYcFjfwi9kEGxa7zOu?p=preview

阅读更多关于还有什么可以做的：https ://stackoverflow.com/a/41655831/6682369

于 2017-03-30T16:31:31.780 回答