<html>
<head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<h1
style="background-color:#900C3F" align="center">E-Learning
System</H1>
<div ng-view></div>
<body>
<div ng-app = "mainApp">
<p><a href
="#jw">Home</a></p>
<p><a href
="#ro">Management</a></p>
<p><a href
="#ph">Staff</a></p>
<div ng-view></div>
<script type
="text/ng-template" id ="home.html">
<h1
style="background-color:powderblue;">welcome is Home
page</p></h1>
{{message}}
</script>
<script type ="text/ng-template" id
="management.html">
<h1 style="background-color:red;">welcome
to management
page</h1>
{{message}}
</script>
<script type ="text/ng-template" id
="staff.html">
<h1
style="background-color:green;">Welcome to Staff page</h1>
{{message}}
</script>
</div>
<script>
var mainApp =
angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/jw', {
templateUrl: 'home.html',controller:
'jwController'
})
.when('/ro', {
templateUrl: 'management.html',controller:
'roController'
})
.when('/ph', {
templateUrl: 'staff.html',controller:
'phController'
})
}]);
mainApp.controller('jwController',
function($scope) {
$scope.message = "Welcome to
Home";
});
mainApp.controller('roController',
function($scope) {
$scope.message = "Welcome to
Management";
});
mainApp.controller('phController',
function($scope) {
$scope.message = "Welcome to Staff";
});
</script>
</body>
</html>
