YENEPOYA INSTITUTE OF TECHNOLOGY

(Affiliated to Visvesvaraya Technological University, Belagavi) N.H. 13, Thodar,

Moodbidri, Mangaluru 574225 (D.K), Karnataka

DEPARTMENT OF ARTIFICIAL INTELLIGENCE & MACHINE LEARNING

LAB MANUAL
ANGULAR JS AND NODE JS
(21CSL581)

[As per Choice Based Credit System (CBCS) scheme]

ACADEMIC YEAR 2023-2024
 Yenepoya Institute of Technology, Moodbidri

Vision
We are committed to creating new milestones and standards for students to experience an
unparalleled educational journey that is intellectually, socially and personally transformative.

Mission
YIT will endeavor to educate and transform the student community by instilling in them pride in
their gifts and talents, nurturing them and guiding them in how best to utilize it for human welfare
and progress..

Department of Artificial Intelligence & Machine Learning

Vision
To be a centre of excellence to produce engineers in the field of artificial intelligence & Machine
Learning who are committed, innovation driven, self - determined, and capable of developing
applications for the improvement of society
Mission
● To expedite the students to various knowledge platforms through expertized academic
guidance and supervision.
● To inspire the students to be innovative, skilled engineers by imparting the leadership
qualities, team-spirit, and ethical responsibilities.
● To encourage faculty and students to get involved in lifelong learning, research oriented and
significantly contributing to the advancement of the civilization.

Program Educational Objectives

Artificial intelligence & Machine learning graduates will be able to

● Demonstrate technical Competence in Artificial intelligence & Machine learning and their
applications
● Design solution for problems in different domains like medical, data science by applying
Artificial intelligence & Machine learning Concepts.
● Take up Masters and Research Programs in the area of Artificial intelligence & Machine
learning.

Program Specific Outcomes

Artificial intelligence & Machine learning graduates will be able to

● Apply knowledge of Artificial intelligence & Machine learning and formulate solutions for
interdisciplinary problems
● Develop models in Data Science,Machine Learning and Big Data technologies and integrate
into real time applications
 ANGULAR JS AND NODE JS (21CSL581)

PO CO Course Outcome Statement

1 Describe the features of AngularJS.

2 Recognize the form validations and controls.

3 Implement Directives and Controllers.

4 Evaluate and create databases for simple applications.

5 Plan and build web servers with node using Node .JS.
 List of Experiments

Sl. Page
Experiment Title
No No
1 Develop an AngularJS program that allows users 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 AngularJS 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 an AngularJS application that displays the 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
11
12
Program 1: Develop Angular JS program that allows users 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.

Description:
Users can input their first and last names into an AngularJS program, which then displays their
entire name. 'Rajender' and 'Tilak' are the default values assigned to the first and last names. These
values are modifiable in the controller (myCtrl) as needed.

Program1.html
<!DOCTYPE html>
<html>
<head>
<title>Full Name Program</title>
<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">
<h1>Full Name Program</h1>
<input type="text" ng-model="firstName" placeholder="Enter First Name">
<input type="text" ng-model="lastName" placeholder="Enter Last Name">
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Rajender";
$scope.lastName = "Tilak";
});
</script>
</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.

Description:
AngularJS application that shows a shopping list and lets users edit the list by adding and removing
items with controllers and directives. The shopping list is managed by this AngularJS application
using a controller called myCtrl. The item list is displayed using ng-repeat, and there is an input
field for adding new items. When an item is clicked on the "Remove Item" button next to each one,
it is removed from the list. Clicking the "Add Item" button adds the entered item to the list. The
items in the default list are "Eggs," "Bread," and "Milk.".

program2.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Shopping List App</title>
<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">
<h1>Shopping List App</h1>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<input type="text" ng-model="newItem" placeholder="Enter New Item">
<button ng-click="addItem()">Add Item</button>
<button ng-click="removeItem(index)">Remove Item</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = ["Milk", "Bread", "Eggs"];
$scope.addItem = function() {
$scope.items.push($scope.newItem);
$scope.newItem = "";
};
$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
};
 });
</script>
</body>
</html>

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

Description:
This AngularJS calculator app has two input fields where users can enter numbers, a dropdown
menu where users can choose the operation to perform, and a 'Calculate' button where users can
actually perform the calculation. The myCtrl handles the calculation based on the selected operation
(addition, subtraction, multiplication, division) and displays the result.

Program3.html

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Calculator App</title>
<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">
<h1>Calculator App</h1>
<input type="number" ng-model="num1" placeholder="Enter First Number">
<input type="number" ng-model="num2" placeholder="Enter Second Number">
<select ng-model="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button ng-click="calculate()">Calculate</button>
<p>Result: {{result}}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.num1 = 0;
$scope.num2 = 0;
$scope.operator = "+";
$scope.result = 0;
$scope.calculate = function() {
 switch ($scope.operator) {
case "+":
$scope.result = parseFloat($scope.num1) + parseFloat($scope.num2);
break;
case "-":
$scope.result = $scope.num1 - $scope.num2;
break;
case "*":
$scope.result = $scope.num1 * $scope.num2;
break;
case "/":
$scope.result = $scope.num1 / $scope.num2;
break;
}
};
});
</script>
</body>
</html>
 OUTPUT
Example for “+” (Addition)

Example for “-” (Subtraction)

Example for “*” (Multiplication)

Example for “/” (Division)

Program 4: Write an Angular JS application that can calculate factorial and compute square based
on given user input.

Description:
The factorial of a number is the product of all the numbers from 1 to that number. For example,
factorial of 3 is equal to 1 * 2 * 3 = 6. The factorial of negative numbers do not exist and the
factorial of 0 is 1. Two buttons are included in this AngularJS application: one calculates the
factorial, and the other computes the square of a number entered by the user. Based on user input,
the Factorial and Square can be calculated using functions in the myCtrl.

Program4.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Factorial and Square Calculator App</title>
<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">
<h1>Factorial and Square Calculator App</h1>
<input type="number" ng-model="number" placeholder="Enter a Number">
<button ng-click="calculateFactorial()">Calculate Factorial</button>
<button ng-click="calculateSquare()">Calculate Square</button>
<p>Factorial: {{factorial}}</p>
<p>Square: {{square}}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.number = 0;
$scope.factorial = 0;
$scope.square = 0;
$scope.calculateFactorial = function() {
var factorial = 1;
for (var i = $scope.number; i > 1; i--) {
factorial *= i;
}
$scope.factorial = factorial;
};
$scope.calculateSquare = function() {
 $scope.square = $scope.number * $scope.number;
};
});
</script>
</body>
</html>

OUTPUT
Program 5: Develop an AngularJS application that displays the 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.

Description:
The AngularJS program is designed to provide a user-friendly interface for displaying information
about students, including their Cumulative Grade Point Average (CGPA). The total number of
students is displayed using {{ students.length }}. The student details, including name and CGPA,
are displayed in a table using ng-repeat.

Program5.html
<!DOCTYPE html>
<html >
<head>
<title>Student Details with CGPA</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h2>Student Details</h2>
<p>Total number of students: {{ students.length }}</p>
<table border="1">
<tr>
<th>Name</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.cgpa }}</td>
</tr>
</table>
</div>
<script src="Program5.js"> </script>
</body>
</html>
Program5.js
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
// Default student details
$scope.students = [
{ name: 'Akshaya', cgpa: 8.8 },
{ name: 'Krishna Patel', cgpa: 7.2 },
{ name: 'Johnson', cgpa: 6.5 },
{ name: 'Safwan', cgpa: 7.5},
{ name: 'Zeenath', cgpa: 8.5}
];
});

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.

Description:
Users can add, edit, and remove tasks from a to-do list application using the AngularJS program.
Tasks are displayed in an unordered list (<ul>). Users can add a new task by entering the task name
and clicking the "Add Task" button. Each task has "Edit" and "Delete"buttons. Clicking the "Edit"
button allows users to edit the task name, and they can save or cancel the edit. Clicking the "Delete"
button removes the task from the list.

Program6.html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h2>To-Do List</h2>
<ul>
<li ng-repeat="task in tasks">
{{ task.name }}
<button ng-click="editTask(task)">Edit Task</button>
<button ng-click="deleteTask(task)">DeleteTask</button>
</li>
</ul>
<div>
<label>New Task: </label>
<input type="text" ng-model="newTaskName">
<button ng-click="addTask()">Add Task</button>
</div>
<div ng-show="editingTask">
<label>Edit Task: </label>
<input type="text" ng-model="editedTaskName">
<button ng-click="saveTask()">Save</button>
<button ng-click="cancelEdit()">Cancel</button>
</div>
</div>
 <script src="Program6.js"> </script>
</body>
</html>

Program6.js
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {

// Default tasks
$scope.tasks = [
{ name: 'Attend Class'},
{ name: 'Complete Assignment'},
{ name: 'Study for CIE'}
];

$scope.newTaskName = ' ';

$scope.editingTask = null;
$scope.editedTaskName = ' ';
$scope.addTask = function () {
if ($scope.newTaskName) {
$scope.tasks.push({ name: $scope.newTaskName });
$scope.newTaskName = ' ';
}
};
$scope.editTask = function (task) {
$scope.editingTask = task;
$scope.editedTaskName = task.name;
};
$scope.saveTask = function () {
if ($scope.editingTask) {
$scope.editingTask.name = $scope.editedTaskName;
$scope.cancelEdit();
}
};
$scope.cancelEdit = function () {
$scope.editingTask = null;
$scope.editedTaskName = '';
};
$scope.deleteTask = function (task) {
var index = $scope.tasks.indexOf(task);
 if (index !== -1) {
$scope.tasks.splice(index, 1);
}
};
});

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

Description:
The CRUD (Create, Read, Update, Delete) application for managing users written in AngularJS. A
table shows the user's details. The "create" button can be used to add new users. There are "Edit"
and "Delete" buttons for each user. Clicking "Edit" allows users to edit the user's name and email.
Clicking "Delete" removes the user from the list.

<!DOCTYPE html>
<html ng-app="userApp">
<head>
<title>AngularJS CRUD Application for Users</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="Program7.js"></script>
</head>
<body ng-controller="UserController">
<h1>User Management</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<button ng-click="editUser(user)">Edit</button>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>

<hr>
 <h2>Create User</h2>
<input type="text" ng-model="newUser.name" placeholder="Name">
<input type="email" ng-model="newUser.email" placeholder="Email">
<button ng-click="createUser()">Create</button>

<hr>

<h2>Edit User</h2>
<input type="text" ng-model="editedUser.name" placeholder="Name">
<input type="email" ng-model="editedUser.email" placeholder="Email">
<button ng-click="updateUser()">Update</button>

</body>
</html>

Program7.js
angular.module('userApp', [])
.controller('UserController', function($scope) {
$scope.users = [
{ name: 'abcd', email: '[email protected]' },
{ name: 'trainee', email: '[email protected]' }
];

$scope.newUser = {};

$scope.createUser = function() {
if ($scope.newUser.name && $scope.newUser.email) {
$scope.users.push(angular.copy($scope.newUser));
$scope.newUser = {};
}
};

$scope.editUser = function(user) {
$scope.editedUser = angular.copy(user);
};

$scope.updateUser = function() {
if ($scope.editedUser.name && $scope.editedUser.email) {
// Find the index of the edited user
var index = $scope.users.indexOf($scope.editedUser);
if (index !== -1) {
 // Update the user
$scope.users[index] = angular.copy($scope.editedUser);
$scope.editedUser = {};
}
}
};

$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
if (index !== -1) {
$scope.users.splice(index, 1);
}
};
});

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

Description: For a login form with validation for the username and password. The password is
required to be alphanumeric and 8 characters long. The form uses AngularJS validation with the
required attribute for both the username and password fields. The password field also uses the
ng-pattern attribute to enforce the alphanumeric requirement and a minimum length of 8 characters.
Error messages are displayed based on the validation status. The "Login" button is disabled until the
form is valid. The ng-click directive triggers the login() function, which can contain the actual login
logic. For simplicity, it just sets isLoggedIn to true in this example.

Program8.html

<!DOCTYPE html>
<html>
<head>
<title>Login Form with Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="LoginController">
<h2>Login Form</h2>
<form name="loginForm" novalidate>
<label>Username:</label>
<input type="text" ng-model="user.username" name="username" required>
<span ng-show="loginForm.username.$error.required &&
loginForm.username.$dirty">Username is required.</span>
<br>
<label>Password:</label>
<input type="password" ng-model="user.password" name="password"
ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/" required>
<span ng-show="loginForm.password.$error.required && loginForm.password.$dirty">
Password is required.</span>
<span ng-show="loginForm.password.$error.pattern && loginForm.password.$dirty">
Password must be alphanumeric and at least 8 characters long.
</span>
<br>
<button ng-click="login()" ng-disabled="loginForm.$invalid">Login</button>
</form>
<div ng-show="isLoggedIn">
 <p>Login successful! Welcome, {{ user.username }}!</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('LoginController', function ($scope) {
$scope.user = { username: '', password: '' };
$scope.isLoggedIn = false;
$scope.login = function () {
// Simulating authentication (add actual authentication logic here)
$scope.isLoggedIn = true; // Move this line inside the function body
};
});
</script>
</body>
</html>

OUTPUT

O/P - 1 When pattern is not matching (Password character not meeting the condition)

O/P - 2 - After successful entering of 8 or more alphanumeric characters as password

O/P - 3 - When password is not entered or removed
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.

Description:
The AngularJS application that displays a list of employees and their salaries. Employees are
displayed in an unordered list (<ul>). Users can search for employees by name and salary using the
ng-model directive. The filter pipe is used to filter employees based on the search criteria (name and
salary). Employee salaries are formatted using the number filter to display two decimal places.

Program9.html

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="EmployeeController">
<h1>Employee List</h1>
<input type="text" ng-model="searchName" placeholder="Search by name">
<input type="number" ng-model="searchSalary" placeholder="Search by salary">
<button ng-click="searchEmployees()">Search</button>
<ul>
<li ng-repeat="employee in filteredEmployees = (employees | filter: {name: searchName,
salary: searchSalary})">
{{employee.name}} - {{employee.salary | number:2}}
</li>
</ul>
</div>

<script>
var myApp = angular.module('myApp', []);
myApp.controller('EmployeeController', function($scope) {
$scope.employees = [
{ name: 'John Doe', salary: 50000 },
{ name: 'Jane Doe', salary: 60000 },
{ name: 'Peter Parker', salary: 70000 },
{ name: 'Mary Jane Watson', salary: 80000 }
];
 $scope.searchEmployees = function() {
// Filtering based on name and salary
$scope.filteredEmployees = $scope.employees.filter(function(employee) {
return employee.name.toLowerCase().includes($scope.searchName.toLowerCase()) &&
employee.salary >= $scope.searchSalary;
});
};
});
</script>
</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.

Description:
The AngularJS application that allows users to maintain a collection of items. The application
displays the current total number of items, and this count updates automatically as items are added
or removed. The total number of items is displayed using {{ items.length }}. Items are displayed in
an unordered list (<ul>). Users can add a new item by entering the item name and clicking the "Add
Item" button. Each item has a "Remove" button that allows users to remove the item from the
collection.

Program10.html

<!DOCTYPE html>
<html>
<head>
<title>Item Collection Management</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ItemController">
<h2>Item Collection</h2>
<p>Total number of items: {{ items.length }}</p>
<ul>
<li ng-repeat="item in items">
{{ item.name }}
<button ng-click="removeItem(item)">Remove</button>
</li>
</ul>
<div>
<label>New Item: </label>
<input type="text" ng-model="newItemName">
<button ng-click="addItem()">Add Item</button>
</div>
</div>
 <script>
var app = angular.module('myApp', []);
app.controller('ItemController', function ($scope) {
// Default items
$scope.items = [
{ name: 'Apple'},
{ name: 'Banana'},
{ name: 'Orange'}
];
$scope.newItemName = '';
$scope.addItem = function () {
if ($scope.newItemName) {
$scope.items.push({ name: $scope.newItemName });
$scope.newItemName = '';
}
};
$scope.removeItem = function (item) {
var index = $scope.items.indexOf(item);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
});

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