angularjs routing tutorial bug not routing

Question

I just created a simple project to learn angular routing, my project is the following:

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>

The three html from above only contains a h1 tag to keep it simple

A plunker of my code: http://plnkr.co/edit/uNZicTuRKDkR7ATwdFE0

I'm following this tutorial: https://www.w3schools.com/angular/angular_routing.asp

Dunno if outdated or why its not working, thanks

Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) — georgeawg, Mar 30 '17 at 17:00
Possible duplicate of [URL hash-bang (#!/) prefix instead of simple hash (#/)](http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash) — Mistalis, Mar 31 '17 at 07:51

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

The problem is that you are using angular 1.6 and the toturial is using 1.4. Your links should be like this because of the new hash prefix in version 1.6:

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

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

Read more about what else to do at: https://stackoverflow.com/a/41655831/6682369

edited May 23 '17 at 12:10

Community

1
1

answered Mar 30 '17 at 16:31

Anders Vestergaard

1,139
1
14
21

lol, thanks I thought it was a kind of bug, seems to be that almost all the tutorials out are using angular 1.4, Thank you very much :D – Angel Silva Mar 30 '17 at 16:46

angularjs routing tutorial bug not routing

1 Answers1