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)