<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<base href="/">
<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="testlab/angular/sample/26_routing_without_hashing.html">Home</a>
<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"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/red", {
template: "<h2 style='color:red;'>Red Color</h2>"
/*
templateUrl : "red.html",
controller : "myCtrl"
*/
})
.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>"
});
$locationProvider.html5Mode(true);
});
</script>
</html>