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"> HOTELS IN PUNE</H1>
<div ng-view></div>
<body>
<div ng-app = "mainApp">
<p><a href ="#jw">J W MARRIOTT</a></p>
<p><a href ="#ro">Royal Orchid</a></p>
<p><a href ="#ph">Pride Hotel</a></p>
<div ng-view></div>
<script type ="text/ng-template" id ="jw.html">
<h1 style="background-color:powderblue;"> Welcome to JW Marriott Hotel</h1>
<p>Address: Senapati Bapat Rd,
Laxmi Society, Model Colony, Shivajinagar, Pune, Maharashtra 411053</p>
<p>Contact:8976567897</p>
{{message}}
</script>
<script type ="text/ng-template" id ="ro.html">
<h1 style="background-color:red;">Welcome to Royal Orchid Hotel</h1>
<p>Address: Marisoft Annexe, Kalyani Nagar, Pune, Maharashtra 411014</p>
<p>Contact:6789765467</p>
{{message}}
</script>
<script type ="text/ng-template" id ="ph.html">
<h1 style="background-color:green;">Welcome to Pride Hotel</h1>
<p>Address:5, University Rd, Narveer Tanaji Wadi, Shivajinagar, Pune, Maharashtra 411005</p>
<p>Contact:7890987654</p>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/jw', {
templateUrl: 'jw.html',controller: 'jwController'
})
.when('/ro', {
templateUrl: 'ro.html',controller: 'roController'
})
.when('/ph', {
templateUrl: 'ph.html',controller: 'phController'
})
}]);
mainApp.controller('jwController', function($scope) {
$scope.message = "Welcome J W MARRIOTT";
});
mainApp.controller('roController', function($scope) {
$scope.message = "Welcome Royal Orchid Hotel";
});
mainApp.controller('phController', function($scope) {
$scope.message = "Welcome Pride Hotel";
});
</script>
</body></html>
0 Comments