Having some trouble with my index.html page. The red.html, green.html, and blue.html pages are not being routed correctly.
I suspect there might be a simple syntax error in the code that I'm missing as a beginner. Any assistance would be greatly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body ng-app="myApp">
<div class="list-group">
<a href="#/!" class="list-group-item">Main</a>
<a href="#!red"
class="list-group-item">Red </a>
<a href="#!blue"
class="list-group-item">Blue</a>
<a href="#!green"
class="list-group-item">Green</a>
</div>
<div ng-view>
</div>
<script>
var app=angular.module("myApp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
}]);
</script>
</body>