angularjs routing tutorial bug not routing


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


<!DOCTYPE html>
<html ng-app="app">
        <a href="#/">Home</a>
        <a href="#/hi">Hi</a>
        <a href="#/bye">bye</a>
    <div class="ng-view"></div>
    <script src=""></script>
    <script src=""></script>
    <script src="scripts.js"></script>


var app = angular.module("app", ["ngRoute"]);
app.config(function ($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:

I’m following this tutorial:

Dunno if outdated or why its not working, thanks


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:

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

See plunker.

Read more about what else to do at:

Answered By – Anders Vestergaard

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.