Question: I've been looking into this issue, but there seems to be conflicting answers. I created a simple example in Plunker to understand how routers work in AngularJS, but I'm having trouble getting it to function properly...
Below is my index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accdc2cbd9c0cdde82c6dfec9d829982d4">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view></div>
<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>
</body>
Here is my app.js:
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
The content of red.html, blue.html, and green.html files are very basic, like this (for each color):
<p>red!</p>
However, the ng-view is not updating as expected. I also tried using the following HTML:
<a href="#/red">Red</a>
<a href="#/green">Green</a>
<a href="#/blue">Blue</a>
But nothing seems to be working...