<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script >
var myApp = angular.module("AngularApp",['ngRoute']);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/test1', {templateUrl: 'test1.html'})
.when('/test2', {templateUrl: 'test2.html'})
.when('/test3',{templateUrl:'test3.html'});
}
]);
myApp.controller('exampleController', function($scope) {
$scope.text = 'Hello';
});
</script>
</head>
<body ng-app="AngularApp">
<div ng-controller="exampleController">
<script type="text/ng-template" id="test1.html">
This list denotes the first list element.
</script>
<script type="text/ng-template" id="test2.html">
<h3>This is the header of the second list.</h3>
</script>
<script type="text/ng-template" id="test3.html">
<b>The ng-template directive is magical</b>
</script>
<ul>
<li><a href="#/test1">list1</a></li>
<li><a href="#/test2">list2</a></li>
<li><a href="#/test3">list3</a></li>
</ul>
<div ng-view>
Loading...
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */