<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body ng-app="myApp">
<aside>
<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>
<a href="#default">Default</a>
</aside>
<section ng-view></section>
</body>
<script>
var app = angular.module("myApp", ["ngRoute"]); // where ngRoute is a dependent module
app.config(function ($routeProvider) {
$routeProvider
.when("/red", {
template: "<h2 style='color:red;'>Red Color</h2>"
})
.when("/green", {
template: "<h2 style='color:green;'>Green Color</h2>"
})
.when("/blue", {
template: "<h2 style='color:blue;'>Blue Color</h2>"
})
.otherwise({
template: "<h2>Default Black Color</h2>"
});
});
</script>
</html>