Government of Karnataka

Department of Collegiate and Technical Education

KR Pete Krishna Government Engineering College

(Affiliated to Visvesvaraya Technological University- Belagavi, Karnataka)
Krishnarajapet – 571426, Mandya, Karnataka, India

Department of Computer Science and Engineering

Angular JS Laboratory Manual

21CSL581

V Semester

Dr.Shivashankara S
B.E., M.Tech., Ph.D., SMIEEE, FIE, FIETE, LMISTE, LMCSI
Assistant Professor
Department of Computer Science and Engineering

KR Pete Krishna Government Engineering College

Krishnarajapet – 571426, Mandya, Karnataka, India
Angular JS Laboratory Manual 21CSL581

ANGULAR JS LABORATORY
Course Code 21CSL581 CIE Marks 50
Teaching Hours/Week 0:0:2:0 SEE Marks 50
(L:T:P:S)
Credits 01 Total Marks 100
Examination Type (SEE) Practical
Course objectives:
• To learn the basics of Angular JS framework.
• To understand the Angular JS 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 Angular JS 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 Angular JS 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 Angular JS calculator application that can perform basic
mathematical operations (addition, subtraction, multiplication, division) based on
user input.
4 Write an Angular JS 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.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 2
Angular JS Laboratory Manual 21CSL581

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.
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 1: Sample Programs are given at the end for the students to practice
Note 2: Since Internet is not allowed during the exams it is not possible to use the angular.min.js
from online. Hence, instead of using the online script, please download the offline
angular.min.js from the link below
https://drive.google.com/file/d/18WE3NQA7p2isaLzSnMDJYXLWfWiW3NvT/view?usp=
drive_link
and paste it inside the same directory from where the program is being run and use the below
script to include the angular.min.js.
<script type="text/javascript" src="angular.min.js"></script>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 3
Angular JS Laboratory Manual 21CSL581

1. Develop Angular JS 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.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName">
<br>
Last Name: <input type="text" ng-model="lastName">
<br> <br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.firstName = "shivu";
$scope.lastName = "s";
});
</script>
</body>
</html>
Output: Displaying the default first name and last name

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 4
Angular JS Laboratory Manual 21CSL581

2. Develop an Angular JS 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.
<!DOCTYPE html>
<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")

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 5
Angular JS Laboratory Manual 21CSL581

}
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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 6
Angular JS Laboratory Manual 21CSL581

Output 1: Default output display which displays 4 shopping items.

Output 2: Error alert message after clicking Add Item button without entering the
shopping item.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 7
Angular JS Laboratory Manual 21CSL581

Output 3: Error alert message after clicking Remove Item button without selecting the
shopping item.

Output 4: New item added after clicking the Add Item button by entering an item.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 8
Angular JS Laboratory Manual 21CSL581

Output 5: One existing item (Apple) has been removed after clicking the Remove Item
button by selecting Apple from the list.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 9
Angular JS Laboratory Manual 21CSL581

3. Develop a simple Angular JS calculator application that can perform basic

mathematical operations (addition, subtraction, multiplication, division) based on
user input.
<!DOCTYPE html>
<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

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 10
Angular JS Laboratory Manual 21CSL581

}
}
}
});
</script>
</head>
<body ng-app="calcApp">
<h1>Angular JS 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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 11
Angular JS Laboratory Manual 21CSL581

Output 1: Default output display

Output 2: Addition Operation (After entering number and 2 followed by selecting +

operator).

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 12
Angular JS Laboratory Manual 21CSL581

Output 3: Subtraction Operation (After entering number and 2 followed by selecting -

operator).

Output 4: Multiplication Operation (After entering number and 2 followed by selecting *

operator).

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 13
Angular JS Laboratory Manual 21CSL581

Output 5: Division Operation (After entering number and 2 followed by selecting /

operator).

Output 6: Error alert message in Division Operation when we provide number two is 0
(ZERO).

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 14
Angular JS Laboratory Manual 21CSL581

4. Write an Angular JS application that can calculate factorial and compute square
based on given user input.
<!DOCTYPE html>
<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
}

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 15
Angular JS Laboratory Manual 21CSL581

});
</script>
</head>
<body ng-app="mySqFct">
<h1> Angular JS 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 1: Default output display

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 16
Angular JS Laboratory Manual 21CSL581

Output 2: Factorial output after providing number and clicking Computer Factorial
button

Output 3: Square output after providing number and clicking Computer Square button

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 17
Angular JS Laboratory Manual 21CSL581

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.
<!DOCTYPE html>
<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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 18
Angular JS Laboratory Manual 21CSL581

<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>
Number of Students={{studData.length}}
</div>
</body>
</html>
Output 1: Default output display

Output 2: Students’ details with total number of students

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 19
Angular JS Laboratory Manual 21CSL581

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.
<!DOCTYPE html>
<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")
}
}

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 20
Angular JS Laboratory Manual 21CSL581

$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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 21
Angular JS Laboratory Manual 21CSL581

Output 1: Default output display with 3 tasks

Output 2: Alert message when clicking Add Task button without entering task

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 22
Angular JS Laboratory Manual 21CSL581

Output 3: New task added

Output 4: Painting task edited as Wall Painting by clicking edit button

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 23
Angular JS Laboratory Manual 21CSL581

Output 5: Task 3 deleted by clicking Delete button

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 24
Angular JS Laboratory Manual 21CSL581

7. Write an AngularJS program to create a simple CRUD application (Create, Read,

Update, and Delete) for managing users.
<!DOCTYPE html>
<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. Shivashankara S",'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")
}

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 25
Angular JS Laboratory Manual 21CSL581

}
$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">

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 26
Angular JS Laboratory Manual 21CSL581

<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 1: Default output display with 3 users details

Output 2: Alert message when clicking the Create button without providing user details
(This alert message appears even one input field not provided)

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 27
Angular JS Laboratory Manual 21CSL581

Output 3: New User details has been created by providing User Name and User Email
(It will be added at the end)

Output 4: Alert message displayed whenever we click on Delete button

Output 5: Second user (ABC) details has been deleted after clicking the Delete button
and provide the confirmation.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 28
Angular JS Laboratory Manual 21CSL581

Output 6: The second user (XYZ) details has been updated. Click Read Button, Edit the
details and Click the Update Button.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 29
Angular JS Laboratory Manual 21CSL581

8. Develop AngularJS program to create a login form, with validation for the username
and password fields.
<!DOCTYPE html>
<html>
<title>Angular JS 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()
{
if($scope.userName=="shivashankar" &&
$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
}

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 30
Angular JS Laboratory Manual 21CSL581

}
}
});
</script>
<style>
.error-message
{
color:red;
}
</style>
</head>
<body ng-app="loginApp" ng-controller="loginAppCntrl">
<h1>Angular JS 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="12" 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 12 </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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 31
Angular JS Laboratory Manual 21CSL581

</body>
</html>

Output 1: Default output display (Login button disabled before providing Login
Credentials.

Output 2: Error message displayed when we enter User Name which is lessthan 5 letters.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 32
Angular JS Laboratory Manual 21CSL581

Output 3: Error message displayed when we enter User Name which is greaterthan 5
letters.

Output 4: No Error message displayed when we enter User Name which is greater 5 and
lessthan 12 letters.

Output 5: Error message displayed when we enter Password which is lessthan 5 letters.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 33
Angular JS Laboratory Manual 21CSL581

Output 6: Error message displayed when we enter Password which is greaterthan 8

letters.

Output 7: No Error message displayed when we enter the Password which is greater 5
and lessthan 8 letters. Also Login button Enabled.

Output 8: Error Alert message displayed when we the login credentials are invalid. Also
shows the number of attempts we provide the invalid credentials.

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 34
Angular JS Laboratory Manual 21CSL581

Output 9: Login button disabled when we provide 3 invalid login credentials.

Output 10: Login Successful

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 35
Angular JS Laboratory Manual 21CSL581

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.
<!DOCTYPE html>
<html>
<title>Angular JS 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':'Dr.Shivashankar S','salary':1500000},
{'name':'Prof.Pavithra D R','salary':1200000},
{'name':'Dr.Naveen T H','salary':1500000},
{'name':'Punithkumar','salary':200000},
{'name':'Gagana','salary':400000},
{'name':'Ravichandra','salary':1000000}
]
$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">

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 36
Angular JS Laboratory Manual 21CSL581

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

<br/>
<br/>
<h3>List of Employees</h3>
<table border="1">
<tr>
<th>SL.NO.</th>
<th>EMPLOYEE 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 1: Default output display

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 37
Angular JS Laboratory Manual 21CSL581

Output 2: Searching employee by providing Employee Name

Output 3: Searching employee by providing Employee Salary

Output 4: Clearing filters

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 38
Angular JS Laboratory Manual 21CSL581

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.
<!DOCTYPE html>
<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')
}
}

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 39
Angular JS Laboratory Manual 21CSL581

$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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 40
Angular JS Laboratory Manual 21CSL581

Output 1: Default display

Output 2: After adding item

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 41
Angular JS Laboratory Manual 21CSL581

Output 3: For deleting item, asking confirmation...

Output 4: After removing item... Serial no. 1 to 4 reordered

Output 5: Trying add an existing item... It shows warning alert message

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 42
Angular JS Laboratory Manual 21CSL581

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.
<!DOCTYPE html>
<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=['Shivu','Pavi','Hitha','Hime','Puni']
$scope.upper=true
$scope.lower=false
$scope.Lower=function()
{
$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>

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 43
Angular JS Laboratory Manual 21CSL581

<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 1: Default output printing in Uppecase...

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 44
Angular JS Laboratory Manual 21CSL581

Output 2: Displaying students name in lowercase after clicking the button Lower

Output 3: Displaying students name in lowercase after clicking the button Upper

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 45
Angular JS Laboratory Manual 21CSL581

12. Create an AngularJS application that displays the date by using date filter
parameters
<!DOCTYPE html>
<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:

Dr.Shivashankara S, Dept. of CS & E, KR Pete Krishna Govt. Engg. College, Krishnarajapete, Mandya 46