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> SYBCA Syllabus</H1>
<div ng-view></div>
<body>
<div ng-app = "mainApp">
<p><a href ="#dm">301.Digital Marketing</a></p>
<p><a href ="#ds">302.Data Structure</a></p>
<p><a href ="#ajs">303.AngularJS</a></p>
<div ng-view></div>
<script type ="text/ng-template" id ="Digital Marketing.html">
<h2> Digital Marketing </h2>
<p>
Unit 1.Introduction of Digital Marketing <br>
Unit 2.<br>
Unit 3.<br>
</p>
{{message}}
</script>
<script type ="text/ng-template" id ="Data Structure.html">
<h2> Data Structure </h2>
<p>
Unit 1.Introduction of Data Structure<br>
Unit 2. <br>
Unit 3.<br>
</p>
{{message}}
</script>
<script type ="text/ng-template" id ="AngularJS.html">
<h2> AngularJS </h2>
<p>
Unit 1.Introduction of AngularJS<br>
Unit 2.<br>
Unit 3.<br>
</p>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/dm', {
templateUrl: 'Digital Marketing.html',
controller: 'dmController'
})
.when('/ds', {
templateUrl: 'Data Structure.html',
controller: 'dsController'
})
.when('/ajs', {
templateUrl: 'AngularJS.html',
controller: 'ajsController'
})
}]);
mainApp.controller('dmController', function($scope) {
$scope.message = "This page will be used to disply Digital Marketing";
});
mainApp.controller('dsController', function($scope) {
$scope.message = "This page will be used to disply Data Structure";
});
mainApp.controller('ajsController', function($scope) {
$scope.message = "This page will be used to disply AngularJS";
});
</script>
</body>
</html>
0 Comments