angularjs路由教程bug不路由

Question

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

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>

scripts.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

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

Answer 1

问题是您使用的是 angular 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

阅读更多关于其他活动的信息：

angularjs路由教程bug不路由

angularjs routing tutorial bug not routing

angularjs

ngroute

angularjs-1.6