SUBRAMANYA EDUCATION SOCIETY [R]

EAST WEST INSTITUTE OF TECHNOLOGY

(Affiliated to VTU, Belagavi, Approved by AICTE, New Delhi & Recognized by Govt. of Karnataka)
#63 OffMagadi Road, Vishwaneedham Post,
Bengalore-91

DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING

LABORATORY
MANUAL
B.E V SEMESTER(CBCS SCHEME)
ANGULAR JS AND NODE JS
(21CSL581)
 PREFACE

Angular JS is a popular open-source JavaScript framework for building dynamic and responsive web
applications. With its robust features and strong community support, Angular JS enables developers
to create single-page applications (SPAs) that deliver seamless user experiences.

Node JS, on the other hand, is a runtime environment that allows developers to build server -side
applications using JavaScript. It is known for its speed, scalability, and versatility, making it a
preferred choice for building server-side components and APIs

Key Components of Angular JS:

Modules: Angular JS applications are organized into modules, which are containers for various parts
of your application. Modules help in managing dependencies and separating concerns within your
code.

Components: Components are the building blocks of an Angular JS application. They represent
different parts of the user interface and encapsulate the logic and data related to those parts. Each
component typically consists of a template, class, and metadata.

Directives: Directives are markers in the HTML that tell Angular JS to do something with a DOM
element. They can be structural (e.g., ngIf, ngFor) or attribute directives (e.g., ngModel, *ngClass)
that extend the functionality of HTML.

Forms: Angular JS provides a robust framework for creating and managing forms. It includes two-
way data binding, validation, and tools for handling user input.

HTTP Client: Angular JS comes with a built-in HTTP client module for making HTTP requests to a
server. This module simplifies the process of retrieving and sending data over the network.

Key Components of Node JS:

V8 JavaScript Engine: Node JS is built on the V8 JavaScript engine from Google, which provides
high-performance execution of JavaScript code.

Core Modules: Node JS includes a set of core modules that provide essential functionality for
building server-side applications, such as the 'http' module for creating a web server and the 'fs'
module for working with the file system.

NPM (Node Package Manager): NPM is a package manager for Node JS that allows developers to
easily install and manage third-party packages and libraries. It is a vital tool for building Node JS
applications.

The ANGULAR JS AND NODE JS lab manual has been prepared for B.E computer science and
engineering students in order to gain the knowledge and skills to build dynamic web applications,
create efficient server-side solutions, and deploy full-stack projects.

Dr. Achyutha Prasad

 Department of Computer science

ABOUT
The department of Computer Science and Engineering was established in the year 2001.The
department offer undergraduate and post graduate programmed in Computer Science & Engineering.
The department has a very good infrastructure and faculty to provide excellent education to meet the
industry standards.

Today, the department caters to the needs of more than 500 UG students and 72 PG Students. It
houses state of the art computing facilities with high end servers which support the LAN, provide a
Linux/Unix environment, also provides exclusive library facility to its students and boasts of well
trained and experienced faculty teaching the departments various courses in the areas of Computer
Networks, Computer Architecture, Database Systems, Microprocessor, Operating Systems, Analysis
and Design of Algorithms and Software Engineering.

The department lays stress on the practical and application based aspects through laboratories,
seminars, group discussions, viva-voce and project work, keeping pace with the growth in Computer
Science & Engineering technology.

The Students are given scope to conduct experiments on innovative ideas. A sound theoretical and
practical work prepares the students in wider field of Computer Science & Engineering to take up
challenging jobs in the area of:

System Software

Development

Application Software

Development

Computer Networking
 East West Institute of Technology
(Affiliated to Visvesvaraya Technological University, Belagavi)
Bengaluru-91
Department Of Computer Science & Engineering

PROGRAM OUTCOMES

VISION of the Institute

To be an Institute of Academic Excellence in Technical and Management Education on par with global
standardsto meet changing needs of the Society.

MISSION of the Institute

M1: To impart quality technical education that nurtures the young minds by providing the best
of teaching learning process and state of the art infrastructure.
M2: To foster technological advancement through research.
M3: To inculcate holistic personality development through best practices.
M4: To implant ethical and social commitment that grooms the students to become responsible
citizens.

Dept. of CSE, EWIT

 East West Institute of Technology
(Affiliated to Visvesvaraya Technological University, Belagavi)
Bengaluru-91
Department Of Computer Science & Engineering

VISION of the Department

To be a Department of Excellence in Technical Education through Innovative Learning Approach with
SocialCommitment in the field of Computer Science & Engineering.

MISSION of the Department

M1: To provide a conducive learning ambience to enhance problem solving skills, leadership
qualities and team spirit.
M2: To impart advanced technical knowledge through training programs for the holistic
development of students.
M3: To promote research, innovation and entrepreneur skills in the field of Computer Science and
Engineering.
M4: To inspire the students to become socially responsible technocrats.

Program Educational Objectives (PEOs)

After 3 or 4 years of the graduation the CSE graduates shall be able,

PEO1: To achieve sustainable growth as Computer Science Engineers in reputed organizations.

PEO2: To accomplish higher education and research with highest degree of professionalismand
integrity.

PEO3: To extend the services to mankind by exhibiting leadership qualities and ethical
values.

Program Specific Outcomes (PSOs)

PSO1 Apply the strong knowledge and principles of Computer Science and Engineering to
model and design various computing systems.
PSO2 Develop the diverse applications in well promised domains by adopting the practices
of Computer Science & Engineering.

Dept. of CSE, EWIT

 PROGRAM OUTCOMES
PO’s DESCRIPTION
PO1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals,and an engineering specialization to the solution of complex engineering
problems.
PO2 Problem analysis: Identify, formulate, review research literature, and analyze complex
engineeringproblems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.
PO3 Design/development of solutions: Design solutions for complex engineering problems and
designsystem components or processes that meet the specified needs with appropriate
consideration for the
public health and safety, and the cultural, societal, and environmental considerations.
PO4 Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis of
the information to provide valid conclusions.
PO5 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.
PO6 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.
PO7 Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainabledevelopment.
PO8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms ofthe engineering practice.
PO9 Individual and team work: Function effectively as an individual, and as a member or leader
indiverse teams, and in multidisciplinary settings.
PO10 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.
PO11 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, tomanage projects and in multidisciplinary environments.
PO12 Life-long learning: Recognize the need for, and have the preparation and ability to engage
inindependent and life-long learning in the broadest context of technological change.
EAST WEST INSTITUTE OF TECHNOLOGY
Department of Computer Science and Engineering

LABORATORY MANUAL (2023-2024)

ANGULAR JS AND NODE JS

(21CSL581)

FOR

B.E V SEMESTER

Prepared by,

Prof. Supriya H S
Prof. Pawanraj S P
Assistant Professor, Dept of CSE.
COURSE DETAILS

Course Name: ANGULAR JS AND NODE JS Laboratory

Course Code: 21CSL581/ 21CBL583

Course Credit: 1 :

COURSE OUTCOME
CO 1. Develop Angular JS programs using basic features
CO 2. Develop dynamic Web applications using AngularJS modules
CO 3. Make use of form validations and controls for interactive applications.
CO 4. Apply the concepts of Expressions, data bindings and filters in developing Angular JS programs.
CO 5. Make use of modern tools to develop Web applications.

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

CO1 3 2 3 1 2 0 0 0 0 0 1 1

CO2 3 2 3 1 2 2 0 1 1 2 1 1

CO3 2 2 1 1 2 0 0 0 1 3 1 1

CO4 3 3 3 1 2 0 0 0 1 1 1 1

CO5 2 1 3 1 3 0 0 0 1 1 1 1

Dept of CSE,EWIT Page 8

 COURSE OUTCOME PSO1 PSO2

CO1 3 2

CO2 3 3

CO3 2 1

CO4 3 2

CO5 2 2

ANGULAR JS AND NODE JS PSO1 PSO2

Laboratory
21CSL581
3 3

LAB EVALUATION PROCESS

WEEK WISE EVALUATION OF EACH PROGRAM

SL.NO ACTIVITY MARKS

1 Record 5

2 Program Execution 5

TOTAL 10

Dept of CSE,EWIT Page 9

 INTERNAL ASSESSMENT EVALUATION (End of Semester)
SL.NO ACTIVITY MARKS
1 Write-Up 20

2 Execution 40

3 Result Verification 20

4 Viva Voce 20
TOTAL 100

FINAL INTERNAL ASSESSMENT CALCULATION

SL.NO ACTIVITY MARKS
1 Average of Weekly Entries 30

Average of internal
2 20
Assessment
TOTAL 50

Dept of CSE,EWIT Page

 Lab Rubrics

Students’ performance in Laboratory course is evaluated using rubrics defined by the

program. Rubrics for evaluating a lab test in programming lab are displayed in the following
table.
Sl Evaluation Very Good Good Satisfactory Weak
Parameters
20-16 Marks 15-11 Marks 10-06 Marks 05-01 Marks
1 Writing Program
[Max. Marks Completeness of code, Completeness of code, Completeness of code, Lack of completeness
20] consistent variable consistent variable inconsistent variable of code, improper
naming and formatting, naming and formatting, naming and variable naming and not
well commented, uses lack of comments, uses formatting, lacks formatted, lacks
existing skills in new existing skills in new clarity in commenting, comments, uses
ways/learns new skills to ways/learns new skills to uses existing skills to existing skills to
solve the experimental solve the experimental solve the experimental partially solve the
problem. problem. problem. experimental problem.
2 Program 40-30 Marks 30-20 20-10 Marks 10-0
Execution Marks Marks
Program is free of errors Program is free of errors Program is free of Program contains few
[Max. Marks and output is well and output is well errors and output is not logical errors and
40] formatted. Demonstrates formatted. Demonstrates properly formatted. output is not formatted.
excellent problem better problem solving Demonstrates a clear Demonstrates partial
solving and creativity and creativity skills. understanding of the understanding of the
skills. concepts relevant to concepts relevant to the
the experiment. experiment.
3 Program Modification 20-16 Marks 15-11 10-06 Marks 05-01
and Marks Marks
verify theresults Able to modify the Able to modify the Able to modify the Unable to modify the
changes specified and changes specified with changes specified with changes specified and
[Max. Marks20] test the output. help could test the help could test the unable to test the
output. output. output.

4 Viva-Voice 20-16 Marks 15-11 10-06 Marks 05-01

Marks Marks
[Max. Marks 40] s all the viva 80% of the viva 50% of the Couldn’t viva
s. s. viva s. s properly.

Table 1: Rubrics for Lab Test Evaluatio

Dept of CSE,EWIT Page

Student’s ability in developing programs and testing the program, documenting the workdone
through lab record etc are evaluated continuously during all lab sessions.

Sl

Evaluation
Very Good Good Satisfactory Weak
Parameters
1 Record and 5 -4 Marks 3 Marks 2 Marks 1 Marks
Observation
Neatly written the Neatly written the Lack of neatness in Data are missing and
[Max. Marks 5] record and regular to record, some data are the record, some data not written record
lab missing in the record. are missing in the neatly and irregular to
Student is regular to lab. record. Student is lab
regular to lab

2 Program Execution 5 -4 Marks 3 Marks 2 Marks 1 Marks

and viva
Program is free of Program is free of Program is free of Program contains few
[Max. Marks 5] errors and output is well errors and output is well errors and output is logical errors and
formatted. formatted. not properly output is not formatted.
formatted.
all viva 80% of the viva Couldn’t viva
s s. 50% of theviva s. s properly.

Table 2: Rubrics for continuous Evaluation in lab

 LIST OF PROGRAMS
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.
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
 PROGRAM :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>
<title>
Angular JS 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:
 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.

<!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 item 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>
<table border="1">
<tr>
<th>SLNO</th>
<th>Item</th>
</tr>
<tr ng-repeat="items in shoppingItems">
<td>{{$index+1}}</td>
<td>{{items}}</td>
</tr>
</table>
<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:
 PROGRAM :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
}}}
});

</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>
</body
</div>
>
</html>

Output:
 PROGRAM :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
}
});
</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:
 PROGRAM :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>
<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:
 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.

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

$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/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>Status</th>
<th>Task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="task in tasks">
<td>{{$index+1}}</td>
<td>
<input type="checkbox" ng-model="task.COMPLETED">
</td>
<td>
<span ng-show="!task.EDITING">{{task.TITLE}}</span>
<input type="text" ng-show="task.EDITING"
ng-model="task.TITLE" ng- blur="turnOffEditing(task)">
</td>
<td>
<button ng-click="editTask(task)">Edit</button>
</td>
<td>
<button ng-click="deleteTask(task)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Output:
 PROGRAM :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. Harish Kumar BT", 'email':'harish.bitcse82@gmail.com','editing':false},
{'name':'ABC','email':'abc@gmail.com','editing':false},
{'name':'XYZ','email':'xyz@gmail.com','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 yes=confirm("Are you sure you want to delete")

if(yes==true)
{
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/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>READ</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
<tr ng-repeat="user in users">
<td>{{$index+1}}</td>
<td>
<span
 ng-how="!user.editing">{{user.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp
<input type="text" ng-show="user.editing" ng-model="user.name">

</td>
<td>
<span ng-show="!user.editing">{{user.email}}</span>
<input type="text" ng-show="user.editing" ng-model="user.email">
</td>
<td>
<button ng-click="readUser(user)">Read</button>
</td>
<td>
<button ng-click="updateUser(user)">Update</button>
</td>
<td>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</table>

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

Output:
 PROGRAM :8

Develop AngularJS program to create a login form, with validation for theusername 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(){
// console.log("Inside login function")

if($scope.userName=="harish" &&
$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;
font-size: 20px;

}
</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="8" required placeholder="Enter User
Name">
<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 limittedto
8</span>
<br/>
<br/>
Enter the Password: <input type="password" name="password"
ng-model="password" ng-minlength="5" ng-maxlength="8" required placeholder="Enter your
password">
<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 limittedto
8</span>
<br/>
<br/>
<button type="submit" ng-disabled="loginForm.$invalid"ng-
click="login()" id="loginButton">Login</button>

</form>
</body>
</html
Output:
 PROGRAM :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.mi
n.js">
</script>

<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[
{'name':'Harish Kumar B T','salary':500000},
{'name':'Chetan','salary':400000},
{'name':'Manju','salary':300000},
{'name':'Prashanth','salary':400000},
{'name':'Thanuja','salary':500000},
{'name':'Manasa','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:
 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.

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

$scope.removeItem=function(item)
{
var yes=confirm("Are you sure you want to delete "+item)
if(yes==true)
{
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:
 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.

<!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=['harish','kumar','chetan','prashanth','thanuja']
$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:
 AJS & NJS Lab

PROGRAM :12
Create an AngularJS application that displays the date by using date filterparameters.

<!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:

Dept of CSE,EWIT Page 41

 AJS & NJS Lab
VIVA QUESTION AND ANSWERS
1: What is Angular JS, and why is it used in web development?

Angular JS is a JavaScript framework developed by Google for building dynamic and interactive web
applications, simplifying development and enhancing user experiences.

2: Can you mention key features of Angular JS?

Angular JS features include data binding, dependency injection, directives, reusable components, testing
support, and a rich library for web development.

3: Explain the Model-View-Controller (MVC) architecture in Angular JS.

In Angular JS, MVC separates data (Model), presentation (View), and user interaction (Controller),
simplifying code organization.

4: What is data binding in Angular JS?

Data binding in Angular JS automatically synchronizes changes between the Model and the View, ensuring a
responsive user interface.

5: Explain one-way and two-way data binding in Angular JS.

One-way data binding updates the View when the Model changes, while two-way data binding updates both
Model and View when either changes, often used in forms.

6: What are directives in Angular JS, and why are they important?

Directives are markers in HTML that extend its behavior, allowing for the creation of custom elements and
behaviors in Angular JS applications.

7: How do controllers fit into Angular JS architecture?

Controllers manage the behavior of specific parts of the View, providing business logic and facilitating
interaction between Model and View within a scope.

8: Explain the significance of the "ng-app" directive in Angular JS.

The "ng-app" directive marks the root of an Angular JS application, specifying where Angular should manage
the application on the web page.

9: How are custom directives created in Angular JS, and when might you use them?

Custom directives are created using the "directive" method and are useful for encapsulating complex
functionality, creating reusable components, and extending HTML with domain-specific features in Angular JS
applications.

Dept of CSE,EWIT Page 42

 AJS & NJS Lab
10: What are Angular JS modules, and how do they benefit application development?

Angular JS modules are containers that help organize an application into smaller, manageable components.
They enhance code structure, maintainability, and reusability.

11: How does the ng-model directive work in Angular JS?

The ng-model directive enables two-way data binding, connecting form elements to variables in the controller,
ensuring real-time updates.

13: What does it mean to "work with forms" in Angular JS?

Working with forms in Angular JS involves creating and managing user input through form elements and
associating them with the controller's scope.

14: How can you perform form validation in Angular JS, and what are some built-in validation
directives?

Angular JS offers client-side form validation through built-in directives like ng-required, ng-minlength, and
ng-maxlength, enhancing the user experience and ensuring data integrity.

15: How is error handling managed with Angular JS forms, especially in the context of form
submission?

Error handling in Angular JS involves displaying validation messages and intercepting form submission to
gracefully handle errors, such as failed submissions or server responses.

16: What is the role of ng-form in Angular JS, and how does it facilitate nested forms?

ng-form is used to create nested forms, allowing separate validation and submission of different sections of a
form, which enhances organization and modularity.

1 7: Name some other form controls in Angular JS and briefly explain their purpose.

Angular JS provides directives for various form controls like radio buttons, checkboxes, select elements, and
more. These controls help gather and manipulate user input in different ways, ensuring a rich user experience.

18: What are directives in Angular JS, and why are they important?

Directives in Angular JS are markers in HTML that extend its behavior, allowing for the creation of custom
elements and behaviors in Angular JS applications. They are essential for building dynamic and interactive
user interfaces.

19. Name an internal service provided by AngularJS?

One example is the $http service, which facilitates communication with remote HTTP servers.

Dept of CSE,EWIT Page 43

 AJS & NJS Lab

20. Differentiate between a factory and a service in AngularJS.

Both create services, but a factory is a function that returns an object, while a service is a constructor function.

21.Why are services important in AngularJS?

Services in AngularJS provide a way to organize and share code and data across different parts of an
application. They promote modularity and maintainability.

22. Explain the purpose of filters in AngularJS.

Filters in AngularJS are used for formatting data displayed to the user. They can be applied to expressions in
templates to format and transform data before it is rendered.

23. What is the link function in a directive?

The link function is a function in a directive that is responsible for registering DOM listeners as well as
updating the DOM. It is where you can interact with the DOM element.

24. What are alternatives to custom directives in AngularJS?

Alternatives to custom directives include built-in directives, such as ng-repeat, ng-show, ng-hide, and ng-if,
which cover common use cases without the need for custom implementations.

25.Explain the role of the database in a web application.

The database stores and manages data for a web application. It allows for persistent storage, retrieval, and
manipulation of data, supporting the functionality of the application.

Dept of CSE,EWIT Page 44