Solution:
<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>
0 Comments