1

I'm working on my first AngularJS Router using Brackets editor for me to test it on a localhost (I understand it will not work on my local machine). The include files works OK, but It will not load all 5 HTML files. Please see all of the codes on Plunker. I don't understand what's missing.

HTML

<head>
<title>Welcome!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="myApp">

<!-- header section -->
<div ng-include="'header.html'"></div>

<br><br>

<!-- views section -->
<div ng-view>View pages here...</div>

<br><br>

<!-- footer section -->
<div ng-include="'footer.html'"></div>

</body>

script.js

var app = angular.module('myApp', ['ngRoute'])

.config(function($routeProvider) {
$routeProvider.when('/1', {
    templateUrl: '1.html'
})
$routeProvider.when('/2', {
   templateUrl: '2.html'
})
$routeProvider.when('/3', {
    templateUrl: '3.html'
})
$routeProvider.when('/4', {
   templateUrl: '4.html'
})
$routeProvider.when('/5', {
    templateUrl: '5.html'
})
});
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Christian Luneborg
  • 493
  • 7
  • 19
  • The question shows AngularJS V1.6 but the PLNKR use V1.2. Is this a V1.6 question or a V1.2 question? This is important because the default hashbang prefix has changed between the two versions. – georgeawg Aug 04 '18 at 02:57

1 Answers1

2

Just change href="#/1" to href="#!1"

<div>
    <a href="#!1">One</a>
    <a href="#!2">Two</a>
    <a href="#!3">Three</a>
    <a href="#!4">Four</a>
    <a href="#!5">Five</a>
</div>
Luillyfe
  • 6,183
  • 8
  • 36
  • 46