angularjs routing tutorial bug not routing

Issue

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

Solution

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

Answered By – Anders Vestergaard

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply