Angular js Slips Question and answer SYBBA(CA)
|
|
Slip 1 - D) Write an
AngularJS script to display list of games stored in an array on click of
button using ng-click. And also Demonstrate ng-init, ng-bing directive of
AngularJS. |
|
|
Solution: |
|
|
<html> |
|
|
<head> |
|
|
<title> |
|
|
Angular JS Assignment
2 Question 1 |
|
|
</title> |
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> |
|
|
</script> |
|
|
<div
ng-app="myApp" ng-controller="myCtrl"
ng-init="Games=[]"> |
|
|
<script> |
|
|
var app =
angular.module('myApp',[]); |
|
|
app.controller('myCtrl',function($scope)
{ |
|
|
$scope.displayGames=function()
{ |
|
|
$scope.Games=[
{gameName:'Cricket',playerName:'Anurag Kumar',gameType:'Outdoor'}, |
|
|
{gameName:'Call Of
Duty',playerName:'Tushar Soni' ,gameType:'Indoor'}, |
|
|
{gameName:'PUBG',playerName:'Abhishek
Yadav',gameType:'Indoor'}, |
|
|
{gameName:'Football',playerName:'Ranjeet',gameType:'Outdoor'} |
|
|
]; |
|
|
} |
|
|
} |
|
|
); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div
ng-app="myApp" ng-init="mytext=' GameName
 PlayerName  GameType'"> |
|
|
<form> |
|
|
<div
ng-controller="myCtrl"> |
|
|
<h1>List Of
Sports :</h1><br> |
|
|
<h3
ng-bind="mytext"></h3> |
|
|
<div ng-repeat='x
in Games'> |
|
|
<ul> |
|
|
<li>{{
x.gameName + " ,  " + x.playerName + " , 
" + x.gameType}} </li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<input
type="button" ng-click="displayGames()"
value="Show"></input> |
|
|
</form> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
Q 2
|
|
<!-- |
|
|
Write a HTML code
using AngularJS to generate the following output |
|
|
Undergraduate Courses
(hint : use ng-repeat, ng-init directive) |
|
|
i. BBA(CA) |
|
|
ii. BCA(Science) |
|
|
iii. B.Sc.(Computer
Science) |
|
|
Post Graduate Courses |
|
|
i. M.Sc.(Computer
Science) |
|
|
ii. M.Sc.(CA) |
|
|
iii. MCA |
|
|
--> |
|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> |
|
|
|
|
|
<head> |
|
|
<title>Slip
2</title> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div
ng-app="" ng-init="UG=['BBA(CA)', 'BCA(Science)',
'B.Sc(Computter Science)']; PG=['M.Sc.(Computer Science)', 'M.SC.(CA)',
'MCA']"> |
|
|
|
|
|
<b><p><i>Undergraduate
Courses: </i></p></b> |
|
|
<ol type="i"> |
|
|
<li
ng-repeat="x in UG"> |
|
|
{{x}} |
|
|
</li> |
|
|
</ol> |
|
|
|
|
|
<b><p><i>Postgraduate
Courses: </i></p></b> |
|
|
<ol
type="i"> |
|
|
<li
ng-repeat="x in PG"> |
|
|
{{x}} |
|
|
</li> |
|
|
</ol> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
Q.3
Slip 3 - D) Using AngularJS display the 10
student details in Table format (using ng-repeat directive use Array to store
data)
Solution:
<html>
<head>
<title>Angular JS practical slip 3</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.studentdetails=[
{name:'Tushar',class:'SY-BCA',rollno:'62',college:'Ness wadia'},
{name:'Anurag',class:'SY-BCA',rollno:'5',college:'Ness wadia'},
{name:'Abhishek',class:'SY-BCA',rollno:'1',college:'Ness wadia'},
{name:'Amode',class:'SY-BCA',rollno:'25',college:'Ness wadia'},
{name:'Rohit',class:'SY-BCA',rollno:'52',college:'Ness wadia'},
{name:'Mihir',class:'SY-BCA',rollno:'19',college:'Ness wadia'},
{name:'Amit',class:'SY-BCA',rollno:'9',college:'Ness wadia'},
{name:'Taha',class:'SY-BCA',rollno:'42',college:'Ness wadia'},
{name:'Aman',class:'SY-BCA',rollno:'7',college:'Ness wadia'},
{name:'Tarush',class:'SY-BCA',rollno:'57',college:'Ness wadia'}
];
});
</script>
</div>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
<table style="width:30%" border="2">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll
No</th>
<th>College</th>
</tr>
<tr ng-repeat="x in
studentdetails">
<td>{{x.name}}</td>
<td>{{x.class}}</td>
<td>{{x.rollno}}</td>
<td>{{x.college}}</td>
</tr>
</table>
</body>
</html>
Q.4
Slip 4 - D) Write an AngularJS script to
print details of bank (bank name, MICR code, IFC code, address etc.) in tabular
form using ng-repeat
Solution:
<html>
<head>
<title>
Angular JS SLIP-4
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
</head>
<body ng-app="">
<table cellpadding="3"
cellspacing="0" border="1" align="center"
width="100%" >
<tr style="text-align:center">
<td bgcolor="white"><h1><u>BANK
NAME</u></h1>
<td bgcolor="white"><h1><u>IFC
code</u></h1>
<td
bgcolor="white"><h1><u>MICR code</u></h1>
<td
bgcolor="white"><h1><u>ADDRESS</u></h1>
</tr>
<div
ng-init="Details=[
{bname:'HDFC',mcode:'987654321',icode:'abhdfcmumbai',add:'Mumbai'},
{bname:'ICICI',mcode:'147258369',icode:'abicicidelhi',add:'Delhi'},
{bname:'SBI',mcode:'633456789',icode:'bhsbipuneqw',add:'Pune'}
]">
<tr style="text-align:center" ng-repeat="x in
Details">
<td bgcolor="olive" ><h2> {{ x.bname }}
</h2>
<td bgcolor="olive" ><h2> {{ x.icode }}
</h2>
<td bgcolor="olive" ><h2> {{ x.mcode }}
</h2>
<td bgcolor="olive" ><h2> {{ x.add }} </h2>
</tr>
</div>
</table>
</body>
</html>
Q.5
<!--
Write an AngularJS script for addition of two numbers using ng-init,
ng-model & ng-bind. And also Demonstrate ng-show, ng-disabled, ng-click
directives on button component.
-->
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<head>
<title>Slip 5</title>
</head>
<body>
<div ng-app="" ng-init="no1=0; no2=0; ans=0;
clicked=true">
<h2>Enter first number: <input type="number"
ng-model="no1"></h2>
<h2>Enter second number: <input type="number"
ng-model="no2"></h2>
<br><br>
<button ng-click="ans=no1+no2">Add!</button>
<h2>Addition is <span
ng-bind="ans"></span></h2>
<br><br>
<div ng-show="clicked">
Final Addition (Disabled):
<input ng-disabled="clicked" type="text"
value={{ans}}>
</div>
</div>
</body>
</html>
Q.6
Slip 7 - D) Using AngularJS Create a SPA
that show Syllabus content of all subjects of SYBBA (CA)(use ng-view)
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>
Q.7
Slip 8 - D) Create an HTML form using
AngularJS that contain the Student Registration details and validate Student
first and last name as it should not contain other than alphabets and age
should be between 18 to 50 and display greeting message depending on current
time using ng-show (e.g. Good Morning, Good Afternoon, etc.)(use AJAX).
Solution:
<html ng-app="mainApp">
<head>
<script src="angular.min.js"></script>
</head>
<body
ng-controller="studentController">
<h2>Student Registration
Details</h2>
<div>
<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 style="color:red"
ng-show="studentForm.firstName.$error.pattern">*Invalid First
name.</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 style="color:red"
ng-show="studentForm.lastName.$error.pattern">*Invalid Last
name.</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='Adhira';
$scope.lastName='Ranjegaonkar';
$scope.age='';
}
$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>
Q.8
Slip 9 - D) Create an HTML form using
AngularJS that contain the Employee Registration details and validate DOB,
Joining Date, and Salary and also create a simple arithmetic calculator using
radio buttons (use ng-switch, ng-switch-when)
Solution:
<html>
<head> <script
src="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>
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>
Add<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>
Q.9
Slip 10 - D) Using AngularJS Create a SPA
that show address and contact details of Some 5-10 top Hotels which are in pune
location.(use ng-view)
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>
Q.10
Slip 11 - D) Using AngularJS Create a SPA
that show History of some(4-8) Historical Places (use MVC).
Solution:
<!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>
Q.11
Slip 13 - D) Using AngularJS create a SPA
that accept the details of student and display mark sheet ( roll_ no, student_
name, class, sub1, sub2, sub3, total, percentage, grade)
Solution:
<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>
Q.12
Slip 14 - D) Using AngularJS Create a SPA
to take the information of a customer for booking a plan consisting of fields
such as name, address, contact no., gender, Date of booking, date of journey,
no of passenger, name of passenger etc. Display the e –Ticket.
Solution:
<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>
Q.13
Slip 15 - D) Using AngularJS Create a SPA
for Bus Ticket Reservation consisting of fields : Name, Address, contact no,
source station(Dropdown list), Destination station, Date of booking, date of
journey, no of passenger, name of passenger, gender of passenger etc. Display
the e –Ticket.
Solution:
<html>
<head><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script></head>
<body ng-app="mainApp"
ng-controller="custController">
<h1 align='center'>Customer
Information for Bus Booking</h1>
<div>
<form name="form1">
<table border="1">
<tr>
<td>Name</td>
<td><input type="text"
name="custname" ng-model="custname"></td>
</tr>
<tr>
<td>Address </td>
<td><input type="text"
name="custaddr" ng-model="custaddr"></td>
</tr>
<tr>
<td>Contact No </td>
<td><input type="number"
name="custcontact" ng-model="custcontact"> </td>
</tr>
<tr>
<td>Enter Gender </td>
<td> <select
ng-model="custgender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr>
<td>Source Station </td>
<td> <select ng-model="sstation">
<option value="Pune">Pune</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Jaipur">Jaipur</option>
</select></td>
</tr>
<tr>
<tr>
<td>Destination Station </td>
<td> <select ng-model="dstation" >
<option value="Pune">Pune</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Jaipur">Jaipur</option>
</select></td>
</tr>
<tr>
<td>Date of Booking</td>
<td> <input type="date"
name="custdob" ng-model="custdob"
placeholder="dd-mm-yyyy"></td>
</tr>
<tr>
<td>Date of Journey</td>
<td> <input type="date"
name="custdoj" ng-model="custdoj"
placeholder="dd-mm-yyyy"></td>
</tr>
<tr>
<td>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()"></td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
<h1 align='center'> e-Ticket
</h1><br><br>
<form name="form2"
controller="custController">
<table border="2">
<thead>
<td>Name</td>
<td>Address</td>
<td>Contactno</td>
<td>Gender</td>
<td>Source Station</td>
<td>Destination Station</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><div
ng-switch="sstation">
<div ng-switch-when="Pune">From Pune</div>
<div ng-switch-when="Mumbai">From Mumbai</div>
<div ng-switch-when="Delhi">From Delhi</div>
<div ng-switch-when="Jaipur">From Jaipur</div>
</div>
</td>
<td>
<div ng-switch="dstation">
<div ng-switch-when="Pune">To Pune</div>
<div ng-switch-when="Mumbai">To Mumbai</div>
<div ng-switch-when="Delhi">To Delhi</div>
<div ng-switch-when="Jaipur">To Jaipur</div>
</div></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 () {
$scope.showval = true;
}
});
</script>
</body>
</html>
Q.15
Slip 15 - D) Using AngularJS Create a SPA
for Bus Ticket Reservation consisting of fields : Name, Address, contact no,
source station(Dropdown list), Destination station, Date of booking, date of
journey, no of passenger, name of passenger, gender of passenger etc. Display
the e –Ticket.
Solution:
<html>
<head><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script></head>
<body ng-app="mainApp"
ng-controller="custController">
<h1 align='center'>Customer
Information for Bus Booking</h1>
<div>
<form name="form1">
<table border="1">
<tr>
<td>Name</td>
<td><input type="text"
name="custname" ng-model="custname"></td>
</tr>
<tr>
<td>Address </td>
<td><input type="text"
name="custaddr" ng-model="custaddr"></td>
</tr>
<tr>
<td>Contact No </td>
<td><input type="number"
name="custcontact" ng-model="custcontact"> </td>
</tr>
<tr>
<td>Enter Gender </td>
<td> <select
ng-model="custgender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr>
<td>Source Station </td>
<td> <select ng-model="sstation">
<option value="Pune">Pune</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Jaipur">Jaipur</option>
</select></td>
</tr>
<tr>
<tr>
<td>Destination Station </td>
<td> <select ng-model="dstation" >
<option value="Pune">Pune</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Jaipur">Jaipur</option>
</select></td>
</tr>
<tr>
<td>Date of Booking</td>
<td> <input type="date"
name="custdob" ng-model="custdob"
placeholder="dd-mm-yyyy"></td>
</tr>
<tr>
<td>Date of Journey</td>
<td> <input type="date"
name="custdoj" ng-model="custdoj"
placeholder="dd-mm-yyyy"></td>
</tr>
<tr>
<td>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()"></td>
</tr>
</table>
</form>
</div>
<div ng-show="showval">
<br><br>
<h1 align='center'> e-Ticket </h1><br><br>
<form name="form2"
controller="custController">
<table border="2">
<thead>
<td>Name</td>
<td>Address</td>
<td>Contactno</td>
<td>Gender</td>
<td>Source Station</td>
<td>Destination Station</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><div
ng-switch="sstation">
<div ng-switch-when="Pune">From Pune</div>
<div ng-switch-when="Mumbai">From Mumbai</div>
<div ng-switch-when="Delhi">From Delhi</div>
<div ng-switch-when="Jaipur">From Jaipur</div>
</div>
</td>
<td>
<div ng-switch="dstation">
<div ng-switch-when="Pune">To Pune</div>
<div ng-switch-when="Mumbai">To Mumbai</div>
<div ng-switch-when="Delhi">To Delhi</div>
<div ng-switch-when="Jaipur">To Jaipur</div>
</div></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 () {
$scope.showval = true;
}
});
</script>
</body>
</html>
Q.16
Slip 16 - D) Using AngularJS display the student details who are live
in pune in Table format (using ng-repeat directive, use Array to store data,
use filter )
Solution:
<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('studCtrl', ['$scope', function ($scope)
{
$scope.showStudent = function ()
{
$scope.stud = [
{ name: 'Amit', city: 'pune' },
{ name: 'Sumit', city: 'pune'
},
{ name: 'Rahul', city: 'mumbai'
},
{ name: 'sachin', city:
'mumbai' }
];
}
}]);
</script>
</head>
<body ng-app="myApp"
ng-controller="studCtrl">
<form>
<div ng-controller="studCtrl">
<h1>List of students living in pune</h1><br>
<table border="2">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr ng-repeat="x in stud | filter:'pune'">
<td>{{x.name}}</td>
<td>{{x.city}}</td>
</tr>
</table>
</div>
</div>
<br><input type="button"
ng-click="showStudent()" value="Click Here">
</form>
</body>
</html>
Q.17
Slip 19 - D) Using AngularJS display the Employee details order by
salary in Table format (using ng-repeat directive, use Array to store data, use
filter)
Solution:
<html>
<head>
<title> Angular JS ASS7Q2
</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',
['$scope',function($scope) {
$scope.myarr=[
{ename:'Tushar',ecno:'32238',eadd:'Delhi',esal:'2500'},
{ename:'Mihir',ecno:'12345',eadd:'Pune',esal:'4000'},
{ename:'Anurag',ecno:'67890',eadd:'Mumbai',esal:'2000'},
{ename:'Abhishek',ecno:'47223',eadd:'Pimpri',esal:'3000'}
];
}]);
</script>
</head>
<body ng-app="myApp">
<div
ng-controller="myCtrl">
<h1>Employee
Table Acording To Salary : </h1><br>
<table>
<tr>
<td><h2><u>E-Name</u>  </h2>
<td><h2><u>E-Contact
no.</u>  </h2>
<td><h2><u>E-Address</u>  </h2>
<td><h2><u>E-Salary</u>  </h2>
</tr>
<tr ng-repeat="x in myarr | orderBy : 'esal' ">
<td><h3> {{ x.ename }} </h3>
<td><h3> {{ x.ecno }} </h3>
<td><h3> {{ x.eadd }} </h3>
<td><h3> {{ x.esal }} </h3>
</tr>
</table>
</div>
</body>
</html>
Q.18
Slip 22 - D) Using AngularJS create a SPA that accept Voters details
and check proper validation for (name, age, and nationality) as Name should be
in upper case letters, Age should not be less than 18 yrs and Nationality
should be Indian.
Solution:
<html>
<head><script src="
angular.min.js"></script></head>
<center>
<body ng-app="mainApp" ng-controller="voterController">
<h2 style="color:blue">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>
</center>
</html>
Q.19
Slip 23 - D) Using AngularJS create a SPA to carry out validation for
a username entered in textbox. If the textbox is blank, alert ‘Enter username’.
If the number of characters is less than three, alert ’ Username is too short’.
If value entered is appropriate the print ‘Valid username’ and password should
be minimum 8 characters.
Solution:
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate >
User Name: <input type="text" name="uname"
ng-model="uname" ng-minlength="3"
ng-required="true">
<span ng-show="studentForm.uname.$touched &&
studentForm.uname.$error.required" style="color:red">
Username
is required.</span>
<span
ng-show="studentForm.uname.$error.minlength"style="color:red">
Username
is too short.</span>
<span ng-show="studentForm.uname.$valid"
style="color:green">
Valid
Username.</span><br><br>
Password:
<input type="text" name="pass" ng-model="pass"
ng-minlength="8" ng-required="true">
<span ng-show="studentForm.pass.$touched &&
studentForm.pass.$error.required" style="color:red">
Password
is required.</span>
<span
ng-show="studentForm.pass.$error.minlength"style="color:red">
Password
is too short.</span><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Q.20
Slip 24 - D) Using AngularJS create a SPA to fetch suggestions when is
user is typing in a textbox. (eg like google suggestions. Hint create array of
suggestions and matching string will be displayed).
Solution:
<html>
<head><script
src="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: "Apple",
}, {
name: "Berry",
}, {
name: "Orange",
}, {
name: "Pinnaple",
}];
});
</script>
</body>
</html>
Q.21
Slip 25 - D) Create an HTML form Using
AngularJS for Login system and validate email ID using Regular Expression and
password should be minimum 8 characters.
Solution:
<html>
<head><script src="
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>
1)
Create a angular
JS Application that greet the User (Use $timeout Service)
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"
charset="utf-8">
</script>
<script
src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"
charset="utf-8">
</script>
<script
type="text/javascript">
var
app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.text
= 'Welcome to the website.';
$timeout(function()
{
$scope.text
=
'Message
changes after 4000 milliseconds of delay.';
},
4000);
});
</script>
</head>
<body style="text-align:
center">
<h1
style="color: green">GeeksforGeeks</h1>
<h3>AngularJS
$timeout service</h3>
<div
ng-app="myApp" ng-controller="myCtrl">
<p>AngularJS - $timeout</p>
<b>{{text}}</b>
</div>
</body>
</html>
1)
Using angular js create a SPA that to accept the details such as name,
mobile number, pin- code and email address and make validation. Name should
contain character only, mobile number should contain only 10 digit, Pin code
should contain only 6 digit, email id should contain only one @, . Symbol.
<html>
<head><script
src="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>
){kind=link}
0 Comments