angularjs路由教程错误不路由答案

【问题标题】：angularjs routing tutorial bug not routingangularjs路由教程错误不路由
【发布时间】：2017-08-24 16:55:58
【问题描述】：

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

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标签以保持简单

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

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

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

【问题讨论】：

angularjs 1.6.0 (latest now) routes not working的可能重复
URL hash-bang (#!/) prefix instead of simple hash (#/)的可能重复

标签： angularjs ngroute angularjs-1.6

【解决方案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

阅读更多关于其他活动的信息：https://stackoverflow.com/a/41655831/6682369

【讨论】：

lol，谢谢，我还以为是个bug，好像几乎所有的教程都用了angular 1.4，非常感谢：D