Scribd
Upload
16 views

AngularJS_Slip_Solutions

Uploaded by

adwaghmare450
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

AngularJS_Slip_Solutions

Uploaded by

adwaghmare450
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Program1.

html

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('userCtrl', ['$scope', function ($scope) {
$scope.showGames = function () {
$scope.games = [
{ GameName: 'Cricket', PlayerName: 'sachin', GameType: 'outdoor' },
{ GameName: 'Chess', PlayerName: 'V.Anand', GameType: 'Indoor' },
{ GameName: 'Tennis', PlayerName: 'Pet Sampras', GameType: 'outdoor' }];
}
}]);

</script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<form>
<div ng-app="myApp" ng-init="Text='Displaying Games array Elements!'">

<p ng-bind="Text"></p>
</div>
<div ng-controller="userCtrl">
<div ng-repeat='game in games'>
{{game.GameName}}
{{game.PlayerName}}
{{game.GameType}}
</div>
</div>
<input type="button" ng-click="showGames()" value="Click Here"> </button>
</form>

</body>
</html>

Program2.html

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('userCtrl', ['$scope', function ($scope) {
$scope.showCourses = function () {
$scope.ugcourse = [
{ id: 'i', courseName: 'BBA(CA)' },
{ id: 'ii', courseName: 'BCA(Science' },
{ id: 'iii', courseName: 'B.Sc(Computer Science' },
];
$scope.pgcourses = [
{ id: 'i', courseName: 'M.Sc(Computer Science' },
{ id: 'ii', courseName: 'M.Sc.(CA)' },
{ id: 'iii', courseName: 'MCA' },

];
}
}]);

</script>
</head>

<body ng-app="myApp" ng-controller="userCtrl">


<form>
<div ng-controller="userCtrl">
UnderGraduate Courses<br>
<div ng-repeat='x in ugcourse'>
{{x.id}}
{{x.courseName}}
</div>
Post Graduate Courses
<div ng-repeat='x in pgcourses'>
{{x.id}}
{{x.courseName}}
</div>
</div>
<input type="button" ng-click="showCourses()" value="Click Here"> </button>
</form>

</body>

</html>
program3.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body ng-app="myApp" ng-controller="StudController">


<h1>Displaying Students Details </h1>
<table border=2>
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Class</th>
<th>City</th>

</tr>
</thead>
<tr ng-repeat="x in StudDetails">
<td> {{x.rollno}} </td>
<td> {{x.name}} </td>
<td> {{x.class}} </td>
<td> {{x.city}} </td>
</tr>
</table>

</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'StudController', function ($scope) {

$scope.StudDetails = [{
rollno: 1,
name: 'suresh sinde',
class: 'fybba ca',
city: 'pune',

}, {
rollno: 2,
name: 'ramesh more',
class: 'fybba ca',
city: 'mumbai',

}, {
rollno: 3,
name: 'rajesh jadhav',
class: 'sybba ca',
city: 'nashik',

}, {
rollno: 4,
name: 'amol dubey',
class: 'sybba ca',
city: 'nagpur',

}, {
rollno: 5,
name: 'sanjeev mishra',
class: 'tybba ca',
city: 'kanpur',

},
{
rollno: 6,
name: 'rajeev mishra',
class: 'sybba ca',
city: 'lucknow',

},
{
rollno: 7,
name: 'aniket bhosale',
class: 'fybba ca',
city: 'ahmednagar',

},
{
rollno: 8,
name: 'aniket chavan',
class: 'fybba ca',
city: 'ahmednagar',

},
{
rollno: 9,
name: 'abhay deshmukh',
class: 'fybba ca',
city: 'pune',

},
{
rollno: 10,
name: 'ajay deshmukh',
class: 'tybba ca',
city: 'pune',

}
];

});
</script>

</html>

program4.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body ng-app="myApp" ng-controller="myController">


<h1>Displaying Bank Details </h1>
<table border=2>
<thead>
<tr>
<th>Bank Name</th>
<th>MICR Code</th>
<th>IFSC Code</th>
<th>Address</th>

</tr>
</thead>
<tr ng-repeat="bank in BankDetails">
<td> {{bank.bankname}} </td>
<td> {{bank.micr}} </td>
<td> {{bank.ifsc}} </td>
<td> {{bank.address}} </td>
</tr>
</table>

</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'myController', function ($scope) {

$scope.BankDetails = [{
bankname: 'SBI',
micr: '123456789',
ifsc: 'SBIN001122',
address: 'pune',

}, {
bankname: 'HDFC Bank',
micr: '1122334455',
ifsc: 'HDFC001122',
address: 'mumbai',
}
];

});
</script>

</html>

program5.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>

<body ng-app="myApp" ng-controller="myController">


<h4>using ng-model directive</h4>
<div ng-app="myApp" ng-controller="myController" ng-init="number1=20; number2=30">
Number 1: <input type="number" ng-model="number1">
Number 2: <input type="number" ng-model="number2">
Result: {{ number1 + number2 }}
</div>

<br><br>
<h4>using ng-bind directive</h4>
<div ng-app="myApp" ng-controller="myController">
Number 1: <input type="number" ng-model="number3" ng-change="add()"/>
Number 2: <input type="number" ng-model="number4" ng-change="add()"/>
<b>Addition=:</b> <span ng-bind="result1"></span>
</div>
<br><br>
<div ng-app="myApp" ng-init="myButton=true">
<button ng-disabled="myButton">Click Me!</button>
<br /><br />
<input type="checkbox" ng-model="myButton"/>Button
<br /><br />
Disabled : {{ myButton }}
</div>
<div ng-app="myApp" ng-controller="myController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'myController', function ($scope) {
$scope.number3 = 1;
$scope.number4 = 1;
$scope.add = function () {
$scope.result1 = ($scope.number3 + $scope.number4);
}
$scope.IsVisible = false;

$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
</script>

</html>

program6.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">
<p>SYBBA CA SYLLABUS CBCS 2019 PATTERN"</p>

<p><a href="#/!home!">Main Page</a></p>


<ul>
<li><a href="#!dm">CA 301 Digital Marketing</a><br></li>
<li><a href="#!ds">CA 302 Data Structure</a><br></li>
<li><a href="#!se">CA 303 Software Engineering</a><br></li>
<li><a href="#!angular">CA 304 Angular JS </a><br></li>
<li><a href="#!php">CA 304 PHP</a><br></li>
<li><a href="#!bigdata">CA 305 bigdata</a><br></li>
<li><a href="#!blockchain">CA 305 blockchain</a><br></li>
</ul>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/dm", {
templateUrl : "digitalmarketing.html"
})
.when("/ds", {
templateUrl : "datastructure.html"
})
.when("/se", {
templateUrl : "softwareengg.html"
})
.when("/angular", {
templateUrl : "angular.html"
})
.when("/php", {
templateUrl : "php.html"
})
.when("/bigdata", {
templateUrl : "bigdata.html"
})
.when("/blockchain", {
templateUrl : "blockchain.html"
})
});

</script>

</body>
</html>

digitalmarketing.html
<!DOCTYPE html>
<html>
<body>
<p>
Unit1
E-Commerce<br>
1.1 Introduction
1.2 Understanding Internet Marketing
1.3 Search Engine Optimization
1.4 Search Engine Marketing
1.5 Email Marketing
1.6 Digital Display Marketing
2. Introduction to New Age Media (Digital) Marketing<br>
2.1 What is Digital Marketing
2.2 Digital vs. Real Marketing
2.3 Digital Marketing Channels
2.4 Types of Digital Marketing(Overview)-Internet Marketing
,Social Media Marketing, Mobile Marketing
3. Creating Initial Digital Marketing Plan<br>
3.1 Content management
3.2 SWOT analysis: Strengths, Weaknesses, Opportunities, and
Threats
3.3 Target group analysis
EXERCISE: Define a target group
4. Marketing using Web Sites<br>
4.1 Web design
4.2 Optimization of Web sites
4.3 MS Expression Web
EXERCISE: Creating web sites, MS Expression
5. Search Engine Optimization<br>
5.1 SEO Optimization
5.2 Writing the SEO content
EXERCISE: Writing the SEO content
6. Customer Relationship Management<br>
6.1 Introduction to CRM
6.2 CRM platform
6.3 CRM models
7.Social Media Marketing<br>
7.1 Understanding Social Media Marketing
7.2 Social Networking (Facebook, Linkedin, Twitter, etc.)
Social Media (Blogging, Video Sharing - Youtube,
Photosharing – Instagram, Podcasts)
7.3 Web analytics - levels
7.4 Modes of Social Media Marketing-
7.4.1 Creating a Facebook page Visual identity of a
Facebook page , Types of publications, Facebook Ads ,
Creating Facebook Ads , Ads Visibility
7.4.2 Business opportunities and Instagram options
Optimization of Instagram profiles , Integrating
Instagram with a Web Site and other social networks,Keeping up with posts
7.4.3 Business tools on LinkedIn Creating campaigns on
LinkedIn , Analyzing visitation on LinkedIn
7.4.4 Creating business accounts on YouTube YouTube,Advertising , YouTube Analytics
7.4.5 E-mail marketing E-mail marketing plan , E-mail marketing campaign analysis , Keeping up
with
conversions
7.5 Digital Marketing tools: Google Ads, FaceBook Ads, Google Analytic, Zapier, Google Keyword
Planner
EXERCISE: Social Media Marketing plan.
EXERCISE: Making a Facebook page and Google Ads
8.Digital Marketing Budgeting<br>
8.1 Resource planning
8.2 Cost estimating
8.3 Cost budgeting
8.4 Cost control

</p>
</body>
</html>

Program8.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Angular JS Forms</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body ng-controller="studentController">

<h2>Student Registration Details</h2>


<div ng-app="mainApp" ng-controller="studentController">

<form name="studentForm" novalidate>


<table border="1">
<tr>
<td>Enter first name:</td>
<td><input name="firstname" type="text" ng-model="firstName" ng-pattern="/^[a-zA-Z]*$/"
required>
<span style="color:red"
ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input name="lastname" type="text" ng-model="lastName" ng-pattern="/^[a-zA-Z]*$/"
required>
<span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.
$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>
Enter Age:
</td>
<td>
<input type="text" ng-model="age" name="age"
ng-pattern="/^(?:1[8-9]|[2-5][0-9]|50)$/" required/>
<span style="color:red" ng-show="studentForm.age.$dirty && studentForm.age.$invalid">
<span ng-show="studentForm.age.$error.required">age is required.</span>
<span style="color:red" ng-show="studentForm.age.$error.pattern">*Invalid Age. Valid
18-50</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid||studentForm.age.$invalid && studentForm.age.$dirty" ng-
click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<div>
<input type="number" ng-model="value"><br>
<span>{{ value | greet}}</span>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.reset = function () {
$scope.firstName = "Suresh";
$scope.lastName = "Shinde";
}
$scope.reset();
});
mainApp.filter('greet', function() {
return function(input) {
if (input < 12) {
return 'Good Morning';
} else if (input >= 12 && input <= 17) {
return 'Good Afternoon';
} else if (input > 17 && input <= 24) {
return 'Good Evening';
} else {
return "I'm not sure what time it is!";
}
};
});
</script>
</body>
</html>

program9.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Employee Registration Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="empController">

<h2>Employee Registration Form</h2>


<div ng-app="mainApp" ng-controller="empController">

<form name="employeeForm" novalidate>


<table border="1">
<tr>
<td>Enter Date of Birth:</td>
<td><input name="dob" type="text" ng-model="dob" ng-pattern="/^[0-9]/" required>
<span style="color:red" ng-show="employeeForm.dob.$dirty && employeeForm.dob.$invalid"></
span>
<span ng-show="employeeForm.dob.$error.required">Date of Birth is required.</span>
<span ng-show="employeeForm.dob.$error.pattern">Not a valid date of birth !</span>
</td>
</tr>
<tr>
<td>Enter the Joining Date: </td>
<td><input name="jdate" type="text" ng-model="jdate" ng-pattern="/^[0-9]/" required>
<span style="color:red" ng-show="employeeForm.jdate.$dirty && employeeForm.jdate.$invalid">
<span ng-show="employeeForm.jdate.$error.required">Joining Date is required.</span>
<span ng-show="employeeForm.jdate.$error.pattern">Not a valid joining date!</span>
</td>
</tr>
<tr>
<td>
Enter the Salary:
</td>
<td>
<input type="text" ng-model="salary" name="salary" ng-pattern="/^[0-9]/" required />
<span style="color:red" ng-show="employeeForm.salary.$dirty && employeeForm.salary.
$invalid">
<span ng-show="employeeForm.salary.$error.required">salary is required.</span>
<span ng-show="employeeForm.salary.$error.pattern">Not a valid number!</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="employeeForm.dob.$dirty &&
employeeForm.dob.$invalid || employeeForm.jdate.$dirty &&
employeeForm.jdate.$invalid||employeeForm.salary.$invalid && employeeForm.salary.$dirty"
ng-click="submit()">Submit</button>
</td>
</tr>
</table>
<div>
<form>
<label> Enter First Value</label><input type="number" name="first" ng-model="number1"><br>
<label>Enter Second Value</label><input type="number" name="second" ng-model="number2">
<br>
<br>select operation<br>Addition<input type="radio" value="+" name="arith" ng-
model="status"><br>
Substraction<input type="radio" value="-" name="arith" ng-model="status"><br>
Multiplication<input type="radio" value="*" name="arith" ng-model="status"><br>
Division<input type="radio" value="/" name="arith" ng-model="status"><br>

</form>
<hr>
<div ng-switch="status">
<div ng-switch-when="+">
<h2>{{number1 + number2}} </h2>
</div>
<div ng-switch-when="-">
<h2>{{number1 - number2}} </h2>
</div>
<div ng-switch-when="*">
<h2> {{number1*number2}}</h2>
</div>
<div ng-switch-when="/">
<h2> {{number1/number2}}</h2>
</div>
</div>
</div>
</form>
</div>

<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('empController', function ($scope) {
$scope.reset = function () {
$scope.dob = "";
$scope.jdate = "";
$scope.salary = "";
}
$scope.reset();
});
</script>
</body>
</html>
program10.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">
<center><h2>HOTELS IN PUNE</h2></center>

<p><a href="#/!">HOME Page</a></p>


<ul>
<li><a href="#!mariott">J W MARRIOTT</a><br></li>
<li><a href="#!royalorchid">Royal Orchid</a><br></li>
<li><a href="#!lemontree">Lemon Tree</a><br></li>
<li><a href="#!tcr">The Corinthians Resort </a><br></li>
<li><a href="#!pride">Pride Hotel</a><br></li>
</ul>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/mariott", {
templateUrl : "marriott.html"
})
.when("/royalorchid", {
templateUrl : "royalorchid.html"
})
.when("/lemontree", {
templateUrl : "lemontree.html"
})
.when("/tcr", {
templateUrl : "tcr.html"
})
.when("/pride", {
templateUrl : "pride.html"
})

});

</script>
</body>
</html>

pride.html
<!DOCTYPE html>

<html>
<body>
<h1>Welcome to Pride Hotel</h1>
<p>Address:5, University Rd, Narveer Tanaji Wadi, Shivajinagar, Pune, Maharashtra 411005</p>
<p>Contact:020 66471741</p>
</body>
</html>

lemontree.html
<!DOCTYPE html>

<html>
<body>
<h1>Welcome to Lemon Tree Hotel</h1>
<p>Address: P4, Phase 1, Hinjewadi Rajiv Gandhi Infotech Park, Hinjawadi, Pune, Maharashtra
411057</p>
<p>Contact:020 4423 2323</p>
</body>
</html>

marriott.html

<!DOCTYPE html>

<html>
<body>
<h1>Welcome to JW Marriott Hotel</h1>
<p>Address: Senapati Bapat Rd,
Laxmi Society, Model Colony, Shivajinagar, Pune, Maharashtra 411053</p>
<p>Contact:66833333</p>
</body>
</html>

royalorchid.html
<!DOCTYPE html>

<html>
<body>
<h1>Welcome to Royal Orchid Hotel</h1>
<p>Address: Marisoft Annexe, Kalyani Nagar, Pune, Maharashtra 411014</p>
<p>Contact:020 4000 3000</p>
</body>
</html>

program11.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<body ng-app="myApp">
<div class="container-fluid">
<center><h3>Historical places in india</h3></center>
</div>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#!aurangabad">Aurangabad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!pune">Pune</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!agra">Agra</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!jodhpur">Jodhpur</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!hyderabad">Hyderabad</a>
</li>
</ul>
</nav>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html"
})
.when("/aurangabad", {
templateUrl: "aurangabad.html"
})
.when("/pune", {
templateUrl: "pune.html"
})
.when("/agra", {
templateUrl: "agra.html"
})
.when("/jodhpur", {
templateUrl: "jodhpur.html"
})
.when("/hyderabad", {
templateUrl: "hyderabad.html"
})
});
</script>
</body>

</html>

aurangabad.html

<!DOCTYPE html>
<html>
<body>
<p>aurangabad page</p>
<img src = "ajanta.jpg"
alt = "Ajanta Elora Caves" />
</body>
</html>

pune.html

<!DOCTYPE html>
<html>
<body>
<img src = "pune.jpeg"
alt = "Pune City" />
<p>pune page</p>
</body>
</html>

agra.html

<!DOCTYPE html>
<html>
<body>
<p>agra page</p>
</body>
</html>

jodhpur.html

<!DOCTYPE html>
<html>
<body>
<p>jodhpur page</p>
</body>
</html>

hyderabad.html
<!DOCTYPE html>
<html>
<body>
<p>hyderabad page</p>
</body>
</html>

program12.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>
var invoice = angular.module('invoice', []);
invoice.controller('InvoiceController', function($scope){
$scope.invoice = {
items: [{
name: '',
contactno: '',
gender: '',
favorite:'',
}]
};
$scope.total = function(){
var total = 0;
angular.forEach($scope.invoice.items, function(item){
total += item.qty * item.price;
})
return total;
}
});
</script>
</head>
</html>
<div ng-app="invoice">
<h1>Customer Invoice Example</h1>
</section>
<section class="row" ng-controller="InvoiceController">
<table>
<thead>
<tr>
<th>Name</th>
<th>contactno</th>
<th>gender</th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in invoice.items">
<td><input type="text" ng-model="item.name" /></td>
<td><input type="number" ng-model="item.contactno"/></td>
<td><input type="text" ng-model="item.gender" /></td>
<td><select ng-model="item.favorite" id="mySelect">
<option>Tshirt</option>
<option>Jeans</option>
<option>Watch</option>
<option>Shoes</option>
</select></td>
<td><input type="number" name="price" ng-model="item.price"></td>
<td><input type="number" ng-model="item.qty" /></td>
<td>{{item.qty * item.price}} Rs</td>
<td></td>
<td>Amout to be Paid : </td>
<td>{{total()}} Rs</td>
</tr>
</tbody>
</table>
</section>
</div>

program13.html

<html>

<head>
<meta charset="UTF-8">
<title>Students Marksheet Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="studentController" >


<h2>Student Marksheet Program</h2>
<div>
<form name="form1">
<table border="1">
<tr>
<td>Enter roll number</td>
<td><input type="number" ng-model="rollno"></td>
</tr>
<tr>
<td>Enter student name: </td>
<td>
<input type="text" name="sname" ng-model="studName">
</td>
</tr>
<tr>
<td>Enter Class </td>
<td><input type="text" name="sclass" ng-model="class1"> </td>
</tr>
<tr>
<td>Enter Subject1 Marks</td>
<td> <input type="number" name="subject1" ng-model="sub1"></td>
</tr>
<tr>
<td>Enter Subject2 Marks</td>
<td> <input type="number" name="subject2" ng-model="sub2"></td>
</tr>
<tr>
<td>Enter Subject3 Marks</td>
<td> <input type="number" name="subject3" ng-model="sub3"></td>
</tr>
<tr>
<td> <input type="button" value="Display Result" ng-click="isShowHide('show')">
</td>
</tr>
</table>
</form>
</div>
<div ng-show="showval" >
<br><br>
Mark Sheet of Student<br><br>
<form name="form2" controller="studentController">
<table border="2">
<thead>
<td>rollno</td>
<td>name</td><td>class</td><td>subject1</td><td>subject2</td><td>subject3</td><td>Total</
td><td>percentage</td><td>grade</td>
</thead>
<tr>
<td>{{rollno}}</td>
<td>{{studName}}</td>
<td>{{class1}}</td>
<td>{{sub1}}</td>
<td>{{sub2}}</td>
<td>{{sub3}}</td>
<td>{{sub1 + sub2 + sub3}}</td>
<td>{{(( sub1+sub2+sub3)/300)*100;}}</td>
<td><input type="text" name="grade" ng-model="grade"></td>
</tr>
</table>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.showval=false;
$scope.isShowHide = function (param) {
if (param=="show") {
$scope.showval = true;
}
if($scope.per=74 && $scope.per<=100)
$scope.grade="A";
else if($scope.per=60 && $scope.per<74)
$scope.grade="First";
else if($scope.per>=45 && $scope.per<59)
$scope.grade="Second";
else if($scope.per>=35 && $scope.per<45)
$scope.grade="Pass";
else
$scope.grade="fail";
}
});
</script>

</body>

</html>

program14.html

<html>

<head>
<meta charset="UTF-8">
<title>Students Marksheet Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="custController">
<h2>Customer Information for Plain Booking</h2>
<div>
<form name="form1">
<table border="1">
<tr>
<td>Enter name of Customer</td>
<td><input type="text" name="custname" ng-model="custname"></td>
</tr>
<tr>
<td>Enter address of Customer </td>
<td>
<input type="text" name="custaddr" ng-model="custaddr">
</td>
</tr>
<tr>
<td>Enter Contact No </td>
<td><input type="number" name="custcontact" ng-model="custcontact"> </td>
</tr>
<tr>
<td>Enter Gender </td>
<td> <input type="text" name="custgender" ng-model="custgender"></td>
</tr>
<tr>
<td>Enter Date of Booking</td>
<td> <input type="date" name="custdob" ng-model="custdob"></td>
</tr>
<tr>
<td>Enter Date of Journey</td>
<td> <input type="date" name="custdoj" ng-model="custdoj"></td>
</tr>
<tr>
<td>Enter No.of Passenger</td>
<td> <input type="number" name="custpass" ng-model="custpass"></td>
</tr>
<tr>
<td> <input type="button" value="Display Result" ng-click="isShowHide('show')">
</td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
<h3> eTicket of Passenger for Plain</h3><br><br>
<form name="form2" controller="custController">
<table border="2">
<thead>
<td>name</td>
<td>address</td>
<td>contactno</td>
<td>gender</td>
<td>Date of Booking</td>
<td>Date of Journey</td>
<td>No. of passengers</td>
</thead>
<tr>
<td>{{custname}}</td>
<td>{{custaddr}}</td>
<td>{{custcontact}}</td>
<td>{{custgender}}</td>
<td>{{custdob}}</td>
<td>{{custdoj}}</td>
<td>{{custpass}}</td>
</tr>
</table>
</form>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('custController', function ($scope) {


$scope.showval = false;
$scope.isShowHide = function (param) {
if (param == "show") {
$scope.showval = true;

}
}
});
</script>
</body>

</html>

program15.html

<html>
<head>
<meta charset="UTF-8">
<title>Students Marksheet Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="busController as bus">


<h2>Bus Reservation System</h2>
<div>

<table border="1">
<tr>
<td>Enter the Name of Passenger</td>
<td><input type="text" name="name1" ng-model="bus.name"></td>
</tr>
<tr>
<td>Enter your Address </td>
<td>
<input type="text" name="baddress" ng-model="bus.address">
</td>
</tr>
<tr>
<td>Enter Contact No </td>
<td><input type="text" name="bcontactno" ng-model="bus.contactno"> </td>
</tr>
<tr>
<td>Enter Source Station</td>
<td><select name="source" ng-model="bus.source">
<option>Pune</option>
<option>Mumbai</option>
<option>Nashik</option>
<option>Kolhapur</option>
</select></td>
</tr>
<tr>
<td>Enter Destination Station</td>
<td><select name="dest" ng-model="bus.dest1">
<option>Pune</option>
<option>Mumbai</option>
<option>Nashik</option>
<option>Kolhapur</option>
</select></td>
</tr>
<tr>
<td>Enter Date of booking</td>
<td> <input type="date" name="dob" ng-model="bus.dob"></td>
</tr>
<tr>
<td>Enter Date of journey</td>
<td> <input type="date" name="doj" ng-model="bus.doj"></td>
</tr>
<tr>
<td>Enter No of Passengers</td>
<td> <input type="number" name="noofpass" ng-model="bus.noofpass"></td>
</tr>

<tr>
<td> <input type="button" value="Display eTicket" ng-click="isShow('show')">
</td>
</tr>
</table>
</div>
<div ng-show="showval">
<br><br>
e-Ticket of Person<br><br>
<table border="2">
<thead>
<td>
name
</td>
<td>address</td>
<td>contactno</td>
<td>source</td>
<td>destination</td>
<td>date of booking</td>
<td>date of journey</td>
<td>number of Passengers</td>

</thead>
<tr>
<td>{{bus.name}}</td>
<td>{{bus.address}}</td>
<td>{{bus.contactno}}</td>
<td>{{bus.source}}</td>
<td>{{bus.dest1}}</td>
<td>{{bus.dob}}</td>
<td>{{bus.doj}}</td>
<td>{{bus.noofpass}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('busController', function ($scope) {


$scope.showval = false;
$scope.isShow = function (param) {

if (param == "show") {
$scope.showval = true;

}
}

});
</script>

</body>
</html>

program16.html

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('studCtrl', ['$scope', function ($scope) {
$scope.showStudent = function () {
$scope.stud = [
{ name: 'suresh', city: 'pune' },
{ name: 'ramesh', city: 'pune' },
{ name: 'rajesh', city: 'mumbai' },
{ name: 'sachin', city: 'mumbai' },
];
}
}]);

</script>
</head>

<body ng-app="myApp" ng-controller="studCtrl">


<form>
<div ng-controller="studCtrl">
List of students living in pune<br>
<table border="2">
<tr ng-repeat="x in stud | filter:'pune'">
<td>{{x.name}}</td>
<td>
{{x.city}}
</td>
</tr>
</table>

</div>

</div>
<input type="button" ng-click="showStudent()" value="Click Here"> </button>
</form>

</body>

</html>

program17.html

<html>

<head>
<meta charset="UTF-8">
<title>Searching name in Angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="FilterController">


<div ng-controller="FilterController">
<div>
Enter the character:
<input type="text" name="searchname" ng-model="searchname">
<div ng-hide="users"></div>
<table>
<tr ng-repeat="a in users | filter : searchname"ng-show="searchname">

<td>{{a.name}}</td>
</tr>
</table>
</div>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller("FilterController", function ($scope) {

$scope.users = [{

name: "Samarth kulkarni",


}, {
name: "abhay deshmukh",
},{
name: "ramesh jadhav",
}, {
name: "sachin dubey",
}, {
name: "Ajay kamthe",
}];

});
</script>
</body>

</html>

program18.html

<!doctype html>
<html ng-app="myApp">

<head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

</head>

<body>
<h1>welcome to our College Department</h1>
<br><br>
<div class="row">
<div class="col">
<ul>
<li> <a href="#!Staff1">Staff1</a></li>
<li> <a href="#!Staff2">Staff2</a></li>
<li> <a href="#!Staff3">Staff3</a></li>
<li><a href="#!Staff4">Staff4</a></li>
</ul>
</div>
<div ng-view></div>

<div class="col">
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/Staff1", {
templateUrl: "Staff1.html"
})
.when("/Staff2", {
templateUrl: "Staff2.html"
})
.when("/Staff3", {
templateUrl: "Staff3.html"
})
.when("/Staff4", {
templateUrl: "Staff4.html"
})

});
</script>
</div>
</div>
</body>

</html>

Staff1.html

<!DOCTYPE html>
<body>
<img src = "faculty.jpeg"
alt = "Faculty Image" />
<p>welcome to staff1 web page</p>
</body>
</html>

Staff2.html

<!DOCTYPE html>
<body>
<img src = "faculty.jpeg"
alt = "Faculty Image" />
<p>welcome to staff2 web page</p>
</body>
</html>

program19.html

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('empCtrl', ['$scope', function ($scope) {
$scope.showEmployee = function () {
$scope.emp = [
{ name: 'suresh', city: 'pune',salary:'5000' },
{ name: 'ramesh', city: 'pune',salary:'6000' },
{ name: 'rajesh', city: 'mumbai',salary:'7000' },
{ name: 'sachin', city: 'mumbai',salary:'8000'},
];
}
}]);

</script>
</head>

<body ng-app="myApp" ng-controller="empCtrl">


<form>
<div ng-controller="empCtrl">
List of employees order by salary<br>
<table border="2">
<tr ng-repeat="x in emp| orderBy:'salary'">
<td>{{x.name}}</td>
<td>
{{x.city}}
</td>
<td>{{x.salary}}</td>
</tr>
</table>

</div>
<br>
<br>
<br>
<br>

</div>
<input type="button" ng-click="showEmployee()" value="Click Here"> </button>
</form>

</body>

</html>

program20.html

<html>

<head>
<meta charset="UTF-8">
<title>Angular JS Validation Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="personController">


<h2>Angular JS Person Information</h2>
<div>
<form name="personform" novalidate="true">
<table border="1">
<tr>
<td>Enter the Name of Person</td>
<td><input type="text" name="name1" ng-model="name1" ng-pattern="/^[a-zA-Z]*$/"
required></td>
<td><span style="color:red" ng-show="personform.name1.$dirty &&
personform.name1.$invalid"></span>
<span ng-show="personform.name1.$error.required">Name is required.</span>
<span ng-show="personform.name1.$error.pattern">only characters are allowed.</span>

</td>

</tr>
<tr>
<td>Enter your MobileNo </td>
<td><input type="number" name="mobile" ng-model="mobile" ng-pattern="/^[7-9][0-9]{9}$/" ng-
minlength="10" ng-maxlength="10"
required></td>
<td> <span ng-show="personform.mobile.$error.required">Phone number is required</span>
<span ng-show=" personform.mobile.$error.pattern"> Valid phone number is required</span>
</td>
</tr>
<tr>
<td>Enter Pin Code</td>
<td><input type="number" name="pincode" ng-model="pincode" ng-pattern="/^[0-5]{6}$/" ng-
minlength="6" ng-maxlength="6" required> </td>
<td> <span ng-show="personform.pincode.$error.required">pin code is required</span>
<span ng-show="personform.pincode.$error.pattern">Valid pin code is required</span>
</td>
</tr>
<tr>
<td>Enter Email ID</td>
<td> <input type="email" name="email" ng-model="email" ng-maxlength="100" required></td>
<td><span style="color:red" ng-show="personform.email.$dirty && personform.email.
$invalid"></span>
<span ng-show="personform.email.$error.required">Email is required.</span>
<span ng-show="personform.email.$error.email">Invalid email address.</span>
</td>
</tr>
<tr>
<td> <input type="button" value="Display Person Info" ng-click="isShow('show')">
</td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
Information of Person<br><br>
<table border="2">
<thead>
<td>name</td>
<td>Mobile</td>
<td>Pincode</td>
<td>Email</td>

</thead>
<tr>
<td>{{name1}}</td>
<td>{{mobile}}</td>
<td>{{pincode}}</td>
<td>{{email}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('personController', function ($scope) {


$scope.showval = false;
$scope.isShow = function (param) {

if (param == "show") {
$scope.showval = true;

}
}

});
</script>
</body>

</html>

program21.html

<html>

<head>
<meta charset="UTF-8">
<title>Students Marksheet Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="docController">


<h2>Doctor Information Details Form</h2>
<div>

<table border="1">
<tr>
<td>Enter the Doctor Number</td>
<td><input type="number" name="docno" ng-model="docno"></td>
</tr>
<tr>
<td>Enter the Doctor Name </td>
<td>
<input type="text" name="docname" ng-model="docname">
</td>
</tr>
<tr>
<td>Enter the Doctor Address </td>
<td><input type="text" name="docaddress" ng-model="docaddress"> </td>
</tr>
<tr>
<td>Enter Phone Number</td>
<td> <input type="number" name="phone" ng-model="phone"></td>
</tr>
<tr>
<td>Enter the Doctor Specialization</td>
<td> <input type="text" name="docspl" ng-model="docspl"></td>
</tr>
<tr>
<td> <input type="button" value="Doctor Details" ng-click="isShow('show')">
</td>
</tr>
</table>
</div>
<div ng-show="showval">
<br><br>
Doctor Details<br><br>
<table border="1">
<thead>
<td>Doctor No</td>
<td>Doctor Name</td>
<td>Doctor Address</td>
<td>Doctor Phone</td>
<td>Doctor Specialization</td>
</thead>
<tr>
<td>{{docname}}</td>
<td>{{docname}}</td>
<td>{{docaddress}}</td>
<td>{{phone}}</td>
<td>{{docspl}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('docController', function ($scope) {


$scope.showval = false;
$scope.isShow = function (param) {

if (param == "show") {
$scope.showval = true;

}
}

});
</script>

</body>

</html>

program22.html

<html>

<head>
<meta charset="UTF-8">
<title>Angular JS Validation Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="voterController">


<h2>Voter Details Form</h2>
<div>
<form name="voterform" novalidate="true">
<table border="1">
<tr>
<td>Enter the Name of voter</td>
<td><input type="text" name="name1" ng-model="name1" ng-pattern="/^[A-Z]*$/" ng-
required="true"></td>
<td><span style="color:red" ng-show="voterform.name1.$dirty && voterform.name1.$invalid"></
span>
<span ng-show="voterform.name1.$error.required">Voter Name is required.</span>
<span ng-show="voterform.name1.$error.pattern">only Uppercase characters are allowed.</span>
</td>
</tr>
<tr>
<td>Enter the voters age </td>
<td><input type="number" name="age" ng-model="age" ng-pattern="/^(?:1[8-9]|[2-5][0-9]|100)$/"
ng-required="true"></td>
<td> <span ng-show="voterform.age.$error.required">voter age is required</span>
<span ng-show=" voterform.age.$error.pattern"> Voter age should be more than 18</span>
</td>
</tr>
<tr>
<td>Enter the Nationality</td>
<td><input type="text" name="nat" ng-model="nat" ng-required="true"> </td>
<td> <span ng-show="voterform.nat.$error.required">Nationality is required</span>
<span ng-show="voterform.pincode.$error.pattern">Nationality should be Indian</span>
</td>
</tr>
<tr>
<td> <input type="button" value="Voter Info" ng-click="isShow('show')">
</td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
voter Information<br><br>
<table border="1">
<thead>
<td>name</td>
<td>Age</td>
<td>Nationality</td>
</thead>
<tr>
<td>{{name1}}</td>
<td>{{age}}</td>
<td>{{nat}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('voterController', function ($scope) {


$scope.showval = false;
$scope.isShow = function (param) {

if (param == "show") {
$scope.showval = true;

}
}

});
</script>
</body>
</html>

program23.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myController">


<form name="loginform" ng-submit="save(this)" novalidate>
Enter Username<input placeholder="User Name" name="name" ng-model="theName" ng-
minlength="3"
ng-required="true" /><br>
<br>
<span ng-show="loginform.name.$dirty && loginorm.name.$invalid"></span>
<span ng-show="loginform.name.$error.required">User Name is required</span><br><br>
Enter Password <input placeholder="Password" name="pass1" ng-model="thePwd"
type="password"
ng-minlength="8" ng-required="true" /><br><br>
<span ng-show="loginform.pass1.$dirty && loginorm.pass1.$invalid"></span>
<span ng-show="loginform.pass1.$error.required">Password is required.</span><br><br>

<input type="submit" name="submit" value="submit">

</form>
<script>
var mainApp = angular.module("myApp", []);
mainApp.controller('myController', function ($scope) {
$scope.save = function ($this) {
if ($this.loginform.name.$error.minlength) {
alert("Username is too short");
}
else if($this.loginform.pass1.$error.minlength)
{
alert("password should be eight chars");
}
else if($this.loginform.name.$valid && $this.loginform.pass1.$valid)
alert("valid credentials");
}
});
</script>

</body>

</html>

program24.html

<html>

<head>
<meta charset="UTF-8">
<title>Searching name in Angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="FilterController">
<div ng-controller="FilterController">
<div>
Enter the Search Keyword:
<input type="text" name="searchname" ng-model="searchname">
<div ng-hide="users"></div>
<table>
<tr ng-repeat="a in users | filter : searchname" ng-show="searchname">

<td>{{a.name}}</td>
</tr>
</table>
</div>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller("FilterController", function ($scope) {

$scope.users = [{

name: "Education",
}, {
name: "Sports",
}, {
name: "Bollywood",
}, {
name: "Politics",
}];

});
</script>
</body>

</html>

program25.html

<html>

<head>
<meta charset="UTF-8">
<title>Angular JS Validation Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="mainApp" ng-controller="personController">


<h2>Login Applicationn</h2>
<div>
<form name="personform" novalidate="true">
<table border="1">
<tr>
<td>Enter Email ID</td>
<td> <input type="email" name="email" ng-model="email" ng-required="true"></td>
<td><span style="color:red" ng-show="personform.email.$dirty && personform.email.
$invalid"></span>
<span ng-show="personform.email.$error.required">Email is required.</span>
<span ng-show="personform.email.$error.email">Invalid email address.</span>
</td>
</tr>
<td>Enter Password </td>
<td><input placeholder="Password" name="pass1" ng-model="thePwd" type="password"
ng-minlength="8" ng-required="true" /></td>
<td>
<span ng-show="personform.pass1.$dirty && personorm.pass1.$invalid"></span>
<span ng-show="personform.pass1.$error.required">Password is required.</span>
<span ng-show="personform.pass1.$error.minlength">Password should be 8 chars</span></td>
<tr>
<td><input type="submit" value="submit" name="submit"></td>
</tr>
</table>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('personController', function ($scope) {


});
</script>
</body>

</html>

program26.html

<!doctype html>
<html ng-app="myApp">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">E Learning System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#!/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!/management">Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!/staff">Staff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!/about">About Us</a>
</li>
</ul>
</div>
</nav>

<div ng-view></div>

<script>
var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider

.when('/home', {
templateUrl : 'home.html',
})

.when('/management', {
templateUrl : 'management.html',
})
.when('/staff', {
templateUrl : 'staff.html',
})
.when('/about', {
templateUrl : 'about.html',
})

.otherwise({redirectTo: '/'});
});

app.controller('HomeController', function($scope) {
$scope.message = 'Hello Welcome to Home page';
});

</script>
</body>
</html>

home.html

<!DOCTYPE html>
<html>
<body>
<h1>welcome is Home page</p>

</body>
</html>

management.html

<!DOCTYPE html>
<html>
<body>

<h1>welcome to management page</h1>

</body>
</html>

staff.html

<!DOCTYPE html>
<html>
<body>
<p>welcome to staff page</p>

</body>
</html>

about.html
<!DOCTYPE html>
<html>
<body>
<h1>this is abous us page</h1>
<p>For technical queries kindly contact following nos</p>
<br>
<p>9811223344,</p>
<p>[email protected]</p>
</body>
</html>

You might also like