Department of Artificial Intelligence and Data Science

Jnana Prabha , Virgo Nagar Post, Bengaluru-560049

Academic Year: 2023-24

LABORATORY MANUAL
SEMESTER : V
SUBJECT : AngularJS and Node JS
SUBCODE : 21CSL581

NAME:

USN:

SECTION:

BATCH:
 LABORATORY MANUAL CONTENTS

This manual is intended for the Third year students of Artificial

Intelligence & Data Science in the subject of Web Technology
Lab-2. This manual typically contains practical/Lab Sessions
related Web Application Development covering various aspects
related the subject to enhanced understanding.

Web Technology Lab-2 provides students the idea of creating

dynamic Web pages and application using HTML, JS, CSS ,
Jquery, Angular.js and Nodejs. Also to connect web application
with databases.

Students are advised to thoroughly go through this manual

rather than only topics mentioned in the syllabus as practical
aspects are the key to understanding and conceptual
visualization of all aspects of web application development.
Good Luck for your Enjoyable Laboratory Sessions
 ANGULARJS

Course Code 21CSL581/ 21CBL583 CIE Marks 50

Teaching Hours/Week (L:T:P: S) 0:0:2:0 SEE Marks 50
Credits 01 Total marks 100
Examination type (SEE) PRACTICAL
Course objectives:
• To learn the basics of AngularJS framework.
• To understand the AngularJS Modules, Forms, inputs, expression, data bindings and Filters
• To gain experience of modern tool usage (VS Code, Atom or any other] in developing Web applications

Sl.NO Experiments
1 Develop AngularJS program that allows user to input their first name and last name and display their full name. Note:
The default values for first name and last name may be included in the program.
2 Develop an AngularJS application that displays a list of shopping items. Allow users to add and remove items from the
list using directives and controllers. Note: The default values of items may be included in the program.

3 Develop a simple AngularJS calculator application that can perform basic mathematical operations
(addition, subtraction, multiplication, division) based on user input.
4
Write an AngularJS application that can calculate factorial and compute square based on given user input.

5 Develop AngularJS application that displays a details of students and their CGPA. Allow users to read the
number of students and display the count. Note: Student details may be included in the program.
6 Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and delete
tasks. Note: The default values for tasks may be included in the program.
7 Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete) for
managing users.
8 Develop AngularJS program to create a login form, with validation for the username and password fields.

9 Create an AngularJS application that displays a list of employees and their salaries. Allow users to search for
employees by name and salary. Note: Employee details may be included in the program.
10 Create AngularJS application that allows users to maintain a collection of items. The application should display the
current total number of items, and this count should automatically update as items are added or removed. Users should
be able to add items to the collection and remove them as needed.
Note: The default values for items may be included in the program.
11 Create AngularJS application to convert student details to Uppercase using angular filters.
Note: The default details of students may be included in the program.
12 Create an AngularJS application that displays the date by using date filter parameters

NOTE: Include necessary HTML elements and CSS for the above Angular applications.

Course outcomes (Course Skill Set):

At the end of the course the student will be able to:
1. Develop AngularJS programs using basic features
2. Develop dynamic Web applications using AngularJS modules
3. Make use of form validations and controls for interactive applications
4. Apply the concepts of Expressions, data bindings and filters in developing AngularJS programs
5. Make use of modern tools to develop Web applications
 Programme Outcomes (POs):

Engineering Graduates will be able to:

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knoledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant
to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
independent and life-long learning in the broadest context of technological change.
 INSTITUTE VISION AND MISSION
VISION

The East Point College of Engineering and Technology aspires to be a globally acclaimed excellence in

Engineering education, applied research and nurturing students for holistic development.

MISSION
M1: To create engineering graduates through quality education and to nurture innovation, creativity and
excellence in teaching, learning and research

M2:To serve the technical, scientific, economic and societal developmental needs of our communities

M3:To induce integrity, teamwork, critical thinking, personality development and ethics in students and to

lay the foundation for lifelong learning

 Department of Computer Science and Engineering

DEPARTMENT VISION AND MISSION

VISION
The department aspires to be a Centre of excellence in Computer Science & Engineering to develop
competent professionals through holistic development.

MISSION

M1:To create successful Computer Science Engineering graduates through effective pedagogies, the latest
and technologies, and excellence in teaching and learning.
M2:To augment experiment all learning skills to serve technical, scientific, economic, and social
developmental needs.

M3: To instill integrity, critical thinking, personality development, and ethics in students for a successful career

in Industries, Research, and Entrepreneurship

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

PEO1:To produce graduates who can perform technical roles to contribute effectively in software industries
and R&D Centre.
PEO 2:To produce graduates having the ability to adapt and contribute in key domains of computer science
and engineering to develop competent solutions.

PEO 3: To produce graduates who can provide socially and ethically responsible solutions while adapting to
new trends in the domain to carve a successful career in the industry
 PROGRAM SPECIFIC OUTCOMES (PSOs)
PSO1: To conceptualize, model, design, simulate, analyze, develop, test, and validate computing systems

and solve technical problems arising in the field of computer science & engineering.
PSO2: To specialize in the sub-areas of computer science & engineering systems such as cloud
computing, Robotic Process Automation, cyber security, big data analytics, user interface design,
and IOT to meet industry requirements.
PSO3: To build innovative solutions to meet the demands of the industry using appropriate tools
and techniques.

COURSE LEARNING OBJECTIVES:

CL01:To learn the basics of AngularJS framework.
CL02:To understand the AngularJS Modules, Forms, inputs, expression, data bindings and Filters
CL03:To gain experience of modern tool usage (VS Code, Atom or any other] in developing Web applications

COURSE OUTCOMES
At the end of the course the student will be able to:

C01: Develop AngularJS programs using basic features

C02:Develop dynamic Web applications using AngularJS modules
C03:Make use of form validations and controls for interactive applications
C04:Apply the concepts of Expressions, data bindings and filters in developing AngularJS programs
C05:Make use of modern tools to develop Web applications
 LABORATORY OUTCOMES

The practical/exercises in this section are psychomotor domain

Learning Outcomes (i.e. subcomponents of the COs), to be developed
and assessed to lead to the attainment of the competency.
1. Lab Exercise
Exercise No 1: (2 Hours) – 1 Practical

Aim: Develop AngularJS program that allows user to input their first name and last name
and display their full name.

Note: The default values for first name and last name may be included in the program.

<html>
<title>
AngularJS Full Name Pgm
</title>

<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("myApp",[]);
app.controller("myCntrl",function($scope){
$scope.firstName="Harish Kumar"
$scope.lastName="B T"

});
</script>
</head>

<body ng-app="myApp">

<h2>Anjular JS Application to Display Full Name</h2>

<div ng-controller="myCntrl">
Enter First Name: <input type="text" ng-model="firstName"><br/>
Enter Last Name: <input type="text" ng-model="lastName"><br/>
Your Full Name: {{firstName +" "+ lastName}}

</div>

</body>

</html>
Output:
2. Lab Exercise
Exercise No 2: (2 Hours) – 1 Practical

Aim: Develop an AngularJS application that displays a list of shopping items. Allow users to add and
remove items from the list using directives and controllers.

Note: The default values of items may be included in the program.

Program:

<html>

<title>

Shopping Items Application

</title>

<head>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">

</script>

<script>

var app=angular.module("myApp",[]);

app.controller("myCntrl",function($scope){

$scope.shoppingItems=['Apple','Mango','Banana','Grapes']

$scope.addItem=function(){

if($scope.newItem && $scope.shoppingItems.indexOf($scope.newItem)==-1)

$scope.shoppingItems.push($scope.newItem)

$scope.newItem=""
 }

else

if($scope.newItem)

alert("This item is already there in the shopping list")

else

alert("Please enter an to add")

$scope.removeItem=function(){

console.log("function called")

if($scope.shoppingItems.indexOf($scope.selectItem)==-1)

alert("Please select an item to remove")

else{

var index=$scope.shoppingItems.indexOf($scope.selectItem)

$scope.shoppingItems.splice(index,1)

$scope.selectItem=""

});

</script>
</head>

<body ng-app="myApp">

<div ng-controller="myCntrl">

<h2>Shopping Application</h2>

<h4>List of Shopping Items</h4>

<ul>

<li ng-repeat="items in shoppingItems">{{items}}</li>

</ul>

<br/>

<div>

Enter an Item to Add: <input type="text" ng-model="newItem">

<button ng-click="addItem()">Add Item</button>

</div>

<div>

Select an Item to Remove: <select ng-model="selectItem" ng-options="item for item in

shoppingItems"></select>

<button ng-click="removeItem()">Remove Item</button>

</div>

</div>

</body>

</html>
Output:
3. Lab Exercise
Exercise No 3: (2 Hours) – 1 Practical

Aim: Develop a simple AngularJS calculator application that can perform basic mathematical
operations (addition, subtraction, multiplication, division) based on user input.

Program:

<html>

<title>

AJS Simple Calculator

</title>

<head>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">

</script>

<script>

var app=angular.module("calcApp",[]);

app.controller("calcCntrl",function($scope)

$scope.num1=0

$scope.num2=0

$scope.result=0

$scope.operator="add"

$scope.compute=function(){

switch($scope.operator){
case 'add': $scope.result=$scope.num1 + $scope.num2

break

case 'sub': $scope.result=$scope.num1 - $scope.num2

break

case 'mul': $scope.result=$scope.num1 * $scope.num2

break

case 'div': if($scope.num2==0){

alert("Divide by zero error")

else{

$scope.result=$scope.num1/$scope.num2

});

</script>

</head>

<body ng-app="calcApp">

<h1>AngularJS Simple Calculator</h1>

<div ng-controller="calcCntrl">

Enter First Number: <input type="number" ng-model="num1">

Select Operator:<select ng-model="operator">

<option value="add">+</option>

<option value="sub">-</option>
 <option value="mul">*</option>

<option value="div">/</option>

</select>

Enter Second Number:<input type="number" ng-model="num2">

<button ng-click="compute()">Compute</button>

<br/>

<b>{{num1 + " "+operator+ " "+ num2+ "="+result}}</b>

</div>

</body>

</html>

OUTPUT:
4. Lab Exercise
Exercise No 4: (2 Hours) – 1 Practical

Aim: Write an AngularJS application that can calculate factorial and compute square based on given
user input.

Program:

<html>

<title>

AJS Square and Factorial Application

</title>

<head>

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>

var app=angular.module("mySqFct", []);

app.controller("mySqFctCntrl", function($scope){
$scope.num=0
$scope.result

$scope.factorial=function()
{
if($scope.num==0)
{
$scope.result=1
}
else{
$scope.fact=1
for(var i=$scope.num; i>=1; i--)
{
$scope.fact=$scope.fact*i
}
$scope.result=$scope.fact
}
}

$scope.square=function(){
$scope.result=$scope.num*$scope.num
}

});
</script>
</head>

<body ng-app="mySqFct">
<h1> AngularJS Factorial and Square Application</h1>

<div ng-controller="mySqFctCntrl">

Enter the Number: <input type="number" ng-model="num">

<button ng-click="factorial()">Compute Factorial</button>
<button ng-click="square()">Compute Square</button>
<br/>
{{result}}

</div>

</body>
</html>

OUTPUT:
 5. Lab Exercise
Exercise No 5: (2 Hours) – 1 Practical

Aim: Develop AngularJS application that displays a details of students and their CGPA. Allow users to
read the number of students and display the count.
Note: Student details may be included in the program.

<html>
<title>Student Details Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("studDetailsApp",[]);
app.controller("studDetailsAppCntrl",function($scope){
$scope.studData=[]

$scope.generateData=function()
{
$scope.studData=[]
for(var i=1;i<=$scope.num;i++)
{
var stud={

"SLNO":i,
"NAME":'Student-'+i,
"CGPA":(Math.random()*10+1).toFixed(2)

$scope.studData.push(stud)
}

});
</script>
</head>

<body ng-app="studDetailsApp">
<h1>Student Details Application</h1>
<div ng-controller="studDetailsAppCntrl">
Enter the Number of Students to Generate the Data: <input type="number" ng-model="num">
<button ng-click="generateData()">Generate</button>
<br/>
<table border="1" ng-show="studData.length>0">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in studData">
<td>{{student.SLNO}}</td>
<td>{{student.NAME}}</td>
 <td>{{student.CGPA}}</td>

</tr>

</table>

<br/>
Number of Students={{studData.length}}

</div>
</body>
</html>

OUTPUT:
 6. Lab Exercise
Exercise No 6: (2 Hours) – 1 Practical

Aim: Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and
Delete tasks.
Note: The default values for tasks may be included in the program.

<html>
<title>TO DO Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("toDoApp",[]);
app.controller("toDoAppCntrl",function($scope){
$scope.tasks=[
{'TITLE':'Task-1','COMPLETED':true,'EDITING':false},
{'TITLE':'Task-2','COMPLETED':false,'EDITING':false},
{'TITLE':'Task-3','COMPLETED':false,'EDITING':false}
]

$scope.addTask=function(){

if($scope.newTask)
{
var t={
'TITLE':$scope.newTask,
'COMPLETED':false,
'EDITING':false
}

$scope.tasks.push(t)
}
else{
alert("Please enter the task to add")
}
}

$scope.editTask=function(task)
{
task.EDITING=true
}

$scope.turnOffEditing=function(task){
task.EDITING=false
}

$scope.deleteTask=function(task)
{
var index=$scope.tasks.indexOf(task)
$scope.tasks.splice(index,1)
}

});
 </script>
</head>

<body ng-app="toDoApp">
<h1>TO DO APPLICATION</h1>
<div ng-controller="toDoAppCntrl">
Enter the name of the Task: <input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<br/>
<ul>
<li ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.COMPLETED">
<span ng-show="!task.EDITING">{{task.TITLE}}</span>
<input type="text" ng-show="task.EDITING" ng-model="task.TITLE" ng-blur="turnOffEditing(task)">
<button ng-click="editTask(task)">Edit</button>
<button ng-click="deleteTask(task)">Delete</button>
</li>
</ul>
</div>
</body>
</html>

OUTPUT:
 7. Lab Exercise
Exercise No 7: (2 Hours) – 1 Practical

Aim: Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and
Delete for managing users.

<html>
<title>USER MANAGEMENT APPLICATION</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Dr. Anand R",'email':'[email protected]','editing':false},
{'name':'ABC','email':'[email protected]','editing':false},
{'name':'XYZ','email':'[email protected]','editing':false}
]

$scope.createUser=function()
{

if($scope.newUserName && $scope.newUserEmail)

{
var u={
'name':$scope.newUserName,
'email':$scope.newUserEmail,
'editing':false
}

$scope.users.push(u)
$scope.newUserName=''
$scope.newUserEmail=''
}
else{
alert("Please provide the user name and email id")
}

$scope.readUser=function(user)
{
user.editing=true
}
 $scope.updateUser=function(user){
user.editing=false
}

$scope.deleteUser=function(user)
{

var confirm=prompt("Are you sure you want to delete")

if(confirm=="Yes")
{
var index=$scope.users.indexOf(user)

$scope.users.splice(index,1)
}
}

});

</script>

</head>

<body ng-app="userMgmtApp">

<h1>USER MANAGEMENT APPLICATION</h1>

<div ng-controller="userMgmtAppCntrl">

Enter the User Name:<input type="text" ng-model="newUserName">

Enther the User Email:<input type="text" ng-model="newUserEmail">
<button ng-click="createUser()">Create</button>
<br/>
<ul>
<li ng-repeat="user in users">
<span ng-show="!user.editing">{{user.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp
<input type="text" ng-show="user.editing" ng-model="user.name">
<span ng-show="!user.editing">{{user.email}}</span>
<input type="text" ng-show="user.editing" ng-model="user.email">
<button ng-click="readUser(user)">Read</button>
<button ng-click="updateUser(user)">Update</button>
<button ng-click="deleteUser(user)">Delete</button>

</li>
</ul>
</div>
</body>
</html>
OUTPUT:
 8. Lab Exercise
Exercise No 8: (2 Hours) – 1 Practical

Aim: Develop AngularJS program to create a login form, with validation for the username
and password fields.

<html>
<title>AngularJS Login Form</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("loginApp",[]);
app.controller('loginAppCntrl',function($scope){
$scope.userName=''
$scope.password=''

$scope.noAttempts=0
$scope.login=function(){
// console.log("Inside login function")

if($scope.userName=="anand" && $scope.password=="12345678")

{
alert("Login Successfull")
}
else{
$scope.noAttempts++
if($scope.noAttempts<=3)
{
alert("Incorrect user name/password! Attempt No. "+$scope.noAttempts)
}
else{
document.getElementById("loginButton").disabled=true
}

}
}

});
</script>
<style>
.error-message{
color:red;
}
</style>
</head>

<body ng-app="loginApp" ng-controller="loginAppCntrl">

<h1>AngularJS Login Form</h1>

<form name="loginForm" ng-submit="submitForm()">
Enter the User Name:<input type="text" name="userName" ng-model="userName" ng-minlength="5" ng-maxlength="8"
required>
<span class="error-message" ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty">
User Name is Required</span>

<span class="error-message" ng-show="loginForm.userName.$error.minlength">Minimum Length Must be 5</span>

<span class="error-message" ng-show="loginForm.userName.$error.maxlength">Maximum user name length is limitted
to 8</span>
<br/>
<br/>
Enter the Password: <input type="password" name="password" ng-model="password" ng-minlength="5" ng-
maxlength="8" required>
<span class="error-message" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Password
is required</span>
<span class="error-message" ng-show="loginForm.password.$error.minlength">Minimum Password length is 5</span>
<span class="error-message" ng-show="loginForm.password.$error.maxlength">Maximum password length is limitted to
8</span>

<br/>
<br/>
<button type="submit" ng-disabled="loginForm.$invalid" ng-click="login()" id="loginButton">Login</button>

</form>
</body>
</html>

OUTPUT:
9. Lab Exercise
Exercise No 9: (2 Hours) – 1 Practical

Aim: Create an AngularJS application that displays a list of employees and their salaries. Allow users to
search for employees by name and salary.
Note: Employee details may be included in the program.

<html>
<title>AngularJS Filter Employee Search Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[
{'name':'Anand R','salary':500000},
{'name':'Anil','salary':400000},
{'name':'Kesavan','salary':300000},
{'name':'Sudhansu','salary':400000},
{'name':'Manimozhi','salary':500000},
{'name':'Mani','salary':600000}
]

$scope.clearFilters=function()
{
$scope.searchName=''
$scope.searchSalary=''
}

});
</script>
</head>

<body ng-app="empSearchApp">
 <h1>Employee Search Application</h1>
<div ng-controller="empSearchAppCntrl">
Search by Employee Name:<input type="text" ng-model="searchName">
Search by Employee salary:<input type="number" ng-model="searchSalary">

<button ng-click="clearFilters()">Clear Filters</button>

<br/>
<h3>List of Employees</h3>
<table border="1">
<tr>
<th>SLNO</th>
<th>EMP NAME</th>
<th>SALARY</th>
</tr>
<tr ng-repeat="emp in empList | filter:{name:searchName,salary:searchSalary}">
<td>{{$index+1}}</td>
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>

</tr>

</table>

</div>
</body>
</html>
OUTPUT:
 10. Lab Exercise
Exercise No 10: (2 Hours) – 1 Practical

Aim: Create AngularJS application that allows users to maintain a collection of items. The application should display the
current total number of items, and this count should automatically update as items are added or removed. Users should be able to add
items to the collection and remove them as needed.
Note: The default values for items may be included in the program.

<html>
<title>Item Management Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("itemMgmtApp",[]);
app.controller("itemMgmtAppCntrl",function($scope){
$scope.itemList=['Pen','Pencil','Eraser','Book']

$scope.addItem=function()
{
if($scope.newItem)
{
if($scope.itemList.indexOf($scope.newItem)==-1)
{
$scope.itemList.push($scope.newItem)
}
else{
alert('This item is already there in the item collection')
}
}
else{
alert('Please Enter the item to add')
}
}

$scope.removeItem=function(item)
{
var confirm=prompt("Are you sure you want to delete "+item)
if(confirm=="Yes")
{
var index=$scope.itemList.indexOf(item)
$scope.itemList.splice(index,1)
}
}

});
</script>
</head>
<body ng-app="itemMgmtApp">
<h1>Item Management Application</h1>

<div ng-controller="itemMgmtAppCntrl">
Enter an item to add: <input type="text" ng-model="newItem">
<button ng-click="addItem()">ADD</button>
<br/><br/>

<b>List of Items</b>
<table border="1">
<tr>
<th>SLNO</th>
<th>Item</th>
<th>Remove</th>
</tr>
<tr ng-repeat="item in itemList">
<td>{{$index+1}}</td>
<td>{{item}}</td>
<td><button ng-click=removeItem(item)>Remove</button></td>

</tr>
</table>
<br/>

Total Number of Items=<b>{{itemList.length}}</b>

</div>

</body>
</html>

OUTPUT:
 11. Lab Exercise
Exercise No 11: (2 Hours) – 1 Practical

Aim: Create AngularJS application to convert student details to Upper case using angular filters.
Note: The default details of students may be included in the program.

<html>
<title>Student Details in Uppercase</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">
</script>

<script>
var app=angular.module("studDetailsUpperApp",[]);
app.controller("studDetailsUpperAppCntrl",function($scope){
$scope.studDetails=['Anand','Anil','Kesavan','Manimozhi','vanshika']
$scope.upper=true
$scope.lower=false

$scope.Lower=function()
{
//console.log('called')
$scope.upper=false
$scope.lower=true
}

$scope.Upper=function()
{
$scope.upper=true
$scope.lower=false
}
});
</script>
</head>

<body ng-app="studDetailsUpperApp">
<h1>Student Details in Uppercase</h1>
<div ng-controller="studDetailsUpperAppCntrl">
<button ng-click="Upper()">Upper</button>
<button ng-click="Lower()">Lower</button>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>

</tr>
<tr ng-repeat="student in studDetails">
<td>{{$index+1}}</td>

<td ng-show="upper">{{student|uppercase}}</td>
<td ng-show="lower">{{student|lowercase}}</td>
</tr>
</table>
</div>

</body>
</html>

OUTPUT:
12. Lab Exercise
Exercise No 12: (2 Hours) – 1 Practical

AIM: Create an AngularJS application that displays the date by using date filter parameters

<html>

<title>Date Application</title>

<head>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.8.2/angular.min.js">

</script>

<script>

var app=angular.module("dateApp",[]);

app.controller("dateAppCntrl",function($scope){

$scope.currentDate=new Date();

});

</script>

</head>

<body ng-app="dateApp">

<h1>Date in different formats</h1>

<div ng-controller="dateAppCntrl">

Current Date and Time: {{currentDate}}<br/>

Short Date: {{currentDate|date: 'short'}}<br/>

Long Date: {{currentDate |date: 'fullDate'}}<br/>

Medium Date:{{currentDate| date: 'medium'}}

</div>
 </body>

</html>

OUTPUT: