CANARA ENGINEERING COLLEGE

Benjanapadavu-574219, Bantwal Taluk, D.K.

(Affiliated to VTU, Approved by AICTE)

DEPRTMENT OF INFORMATION SCIENCE AND EGINEERING

B.E 5th semester

AngularJS Laboratory
Course Code: 21CSL581

Lab Manual
Academic Year
2023-24

Prepared By: Approved By:

Mrs. Sushma M D Dr. Jagadisha N
Asst. Professor Professor & Head
Dept. of ISE Dept. of ISE

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

“Jnana Sangama”, BELGAM-590 018
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

TABLE OF CONTENTS

SL.NO TITLE OF CONTENTS PAGE NO

1 College Vission and Misssion -
2 College Vission and Misssion -
3 Course Information Sheet -
4 Syllabus -
5 Programs and Output 1-29

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

DEPRTMENT OF INFORMATION SCIENCE AND EGINEERING

Department Vision
The Department of Information Science and Engineering strives to be a center of learning in the field of
Information Technology to produce globally competent engineers catering to the needs of the industry and
society.

Department Mission

1. Impart technical skills in the field of Information Science & Engineering.

2. Train and transform students to become technological thinkers and facilitate a quality venture, which
meets the industrial and societal needs.
3. Encourage students to become well-rounded in their professional competencies.

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

PROGRAM EDUCATIONAL OBJECTIVES

1. Graduates will succeed in the field of Information Science and Engineering, professional career and higher studies.
2. Graduates will analyze the requirements of the software industries and provide novel engineering designs and efficient
solutions with legal and ethical responsibility.
3. Graduates will adapt to emerging technologies, work in multidisciplinary teams with effective communication skills
and leadership qualities.

PROGRAM OUTCOMES

Engineering graduates in Information Science and Engineering will be able to:

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

PROGRAM SPECIFIC OUTCOMES

1. An ability to understand, analyse and impart the basic knowledge of Information Science and Engineering.
2. An ability to apply the programming, designing, and problem-solving techniques in building/simulating the
applications, solving the problems and guiding the innovative career paths to become an IT Engineer.

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

COURSE PRE-REQUISITES:

COURSE NAME DESCRIPTION COURSE CODE SEM

Web Programming Laboratory Fundamentals of HTML, Javascript 21CSL481 IV

COURSE OBJECTIVES:

This course will enable the students to:

1 To learn the basics of Angular JS framework.

2 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
3
applications

COURSE OUTCOMES (COs):

DESCRIPTION OF COURSE OUTCOME

CO
At the end of the course the student will be able to
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

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

COURSE INFORMATION SHEET

PROGRAMME ISE

DEGREE Bachelor of Engineering (BE)

COURSE TITLE Angular JS

SEMESTER IV

COURSE CODE 21CSL581

COURSE TYPE (CONTENT) Practical Based

REGULATION/SCHEME VTU BE 2021

CREDITS 01

L-T-P-S 0-0-2-0

CONTACT HOURS/WEEK 2

TOTAL CONTACT HOURS 12T+12P

COURSE CATEGORY
Medium
(ASSESSMENT)

SEE & CIE Marks 50, 50

COURSE CONTENT:
Experiments CONTENTS HOURS
Develop Angular JS program that allows user to input their first name and
1 last name and display their full name. Note: The default values for first 2
name and last name may be included in the program.
Develop an Angular JS application that displays a list of shopping items. 2
2 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.
Develop a simple Angular JS calculator application that can perform basic 2
3 mathematical operations (addition, subtraction, multiplication, division)
based on user input.
Write an Angular JS application that can calculate factorial and compute 2
4
square based on given user input.
Develop AngularJS application that displays a details of students and their 2
5 CGPA. Allow users to read the number of students and display the count.
Note: Student details may be included in the program.
Develop an AngularJS program to create a simple to-do list application. 2
6 Allow users to add, edit, and delete tasks. Note: The default values for tasks
may be included in the program.
Write an AngularJS program to create a simple CRUD application (Create, 2
7
Read, Update, and Delete) for managing users.
Develop AngularJS program to create a login form, with validation for the 2
8
username and password fields.
Create an AngularJS application that displays a list of employees and their 2
9 salaries. Allow users to search for employees by name and salary. Note:
Employee details may be included in the program.

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Create AngularJS application that allows users to maintain a collection of 2

items. The application should display the current total number of items, and
10 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.
Create AngularJS application to convert student details to Uppercase using 2
11 angular filters.
Note: The default details of students may be included in the program.
Create an AngularJS application that displays the date by using date filter 2
12
parameters
TOTAL HOURS 24

TEXT, REFERENCE BOOKS & E-RESOURCES:

BOOK TITLE/AUTHORS/PUBLICATION/LINK
Shyam Seshadri, Brad Green —“AngularJS: Up and Running: Enhanced Productivity with
T-1
Structured Web Apps”, Apress, 0'Reilly Media, Inc.
T-2 AgusKurniawan–“AngularJS Programming by Example”, First Edition, PE Press, 2014
Weblinks and Video Lectures (e-Resources):
1. Introduction to Angular JS : https://www.youtube.com/watch?v=HEbphzK-0xE
2. Angular JS Modules : https://www.youtube.com/watch?v=gWm0KmgnQkU
3. https://www.youtube.com/watch?v=zKkUN-mJtPQ
4. https://www.youtube.com/watch?v=ICl7_i2mtZA
5. https://www.youtube.com/watch?v=Y2Few_nkze0
https://www.youtube.com/watch?v=QoptnVCQHsU
T- Text Book, R-Reference Book, E - e Resource

COURSE PRE-REQUISITES:
COURSE COURSE
DESCRIPTION SEM
NAME CODE
Web
Programming Fundamentals of HTML, Javascript 21CSL481 IV
Laboratory

COURSE DESCRIPTION:
The course covers basics of Angular JS framework, Angular JS Modules, Forms, inputs and
expression. The course provides fundamentals of data bindings ,Filters and enables developing single
page interactive Web applications.

COURSE OBJECTIVES:
This course will enable the students to:

1 To learn the basics of Angular JS framework.

2 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
3
applications

COURSE OUTCOMES (COs):

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

DESCRIPTION OF COURSE OUTCOME

CO
At the end of the course the student will be able to

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

Course-PO/PSO CORRELATION MATRIX:

Course code Course Title POs Mapped PSOs Mapped
21CSL581 ANGULAR JS 1,3,5,12 2
Program
Specific
Program Outcomes (POs)
Course Outcomes Outcomes
(Cos) (PSOs)

1 2 3 4 5 6 7 8 9 10 11 12 1 2
CO:1 3 2 2 2 3 2
CO:2 3 2 2 2 3 2
CO:3 3 2 2 2 3 2
CO:4 3 2 2 2 3 2
CO:5 3 2 2 2 3 2

Average score of COs 0. 0. 0.

1 6 6 6 1 0.66
mapping to POs /
PSOs 6 6 6

Course Articulation 3 2 2 2 3 2
level
Course Outcome Addresses Program Outcomes: 1–slight, 2– Moderate, 3 – Substantial

Rubrics for course articulation level: 66% and above – Articulation Level 3

From 34% up to 65% - Articulation level 2

33% and below – Articulation level 1

Detailed Explanation of articulation matrix:

CO Articulation/Reason for correlation (mapping)
1 The course outcome 1 has been mapped substantially to PO1, as Students apply the
knowledge of engineering fundamentals and principles of Web programming.
Mapped moderately to PO2, as students identify and review complex engineering

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

problems using principles of Engineering Sciences. Mapped moderately to PO3, as

students design web applications that meet the specified needs with appropriate
consideration for the public, business. The course outcome is mapped moderately to
PO5, as Students can select the modern tools like Visual Studio Code, Atom in
building the web applications. Mapped substantially to PO12, as students engage in
lifelong learning in the context of building web applications using upgraded web
technology. Mapped moderately to PSO 2 as students apply the programming,
designing in building the applications and guiding them innovative career path.
2 The course outcome 2 has been mapped substantially to PO1, as Students apply the
knowledge of engineering fundamentals and principles of Web programming.
Mapped moderately to PO2, as students identify and review complex engineering
problems using principles of Engineering Sciences. Mapped moderately to PO3, as
students design web applications that meet the specified needs with appropriate
consideration for the public, business. The course outcome is mapped moderately to
PO5, as Students can select the modern tools like Visual Studio Code, Atom in
building the dynamic web applications. Mapped substantially to PO12, as students
engage in lifelong learning in the context of building web applications using
upgraded web technology. Mapped moderately to PSO 2 as students apply the
programming, designing in building the applications and guiding them innovative
career path.
3 The course outcome 3 has been mapped substantially to PO1, as Students apply the
knowledge of engineering fundamentals and principles of Web programming.
Mapped moderately to PO2, as students identify and review complex engineering
problems using principles of Engineering Sciences. Mapped moderately to PO3, as
students design web applications that meet the specified needs with appropriate
consideration for the public, business. The course outcome is mapped moderately to
PO5, as Students can select the modern tools like Visual Studio Code, Atom in
building the interactive web applications. Mapped substantially to PO12, as students
engage in lifelong learning in the context of building web applications using
upgraded web technology. Mapped moderately to PSO 2 as students apply the
programming, designing in building the applications and guiding them innovative
career path.
4 The course outcome 4 has been mapped substantially to PO1, as Students apply the
knowledge of engineering fundamentals and principles of Web programming.
Mapped moderately to PO2, as students identify and review complex engineering
problems using principles of Engineering Sciences. Mapped moderately to PO3, as
students design web applications that meet the specified needs with appropriate
consideration for the public, business. The course outcome is mapped moderately to
PO5, as Students can select the modern tools like Visual Studio Code, Atom for
implementing Angular filters in web applications. Mapped substantially to PO12, as
students engage in lifelong learning in the context of building web applications
using upgraded web technology. Mapped moderately to PSO 2 as students apply the
programming, designing in building the applications and guiding them innovative
career path.

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

5 The course outcome 5 has been mapped substantially to PO1, as Students apply the
knowledge of engineering fundamentals and principles of Web programming.
Mapped moderately to PO2, as students identify and review complex engineering
problems using principles of Engineering Sciences. Mapped moderately to PO3, as
students design web applications that meet the specified needs with appropriate
consideration for the public, business. The course outcome is mapped substantially
to PO5, as Students select the modern tools like Visual Studio Code, Atom for
developing better web applications. Mapped substantially to PO12, as students
engage in lifelong learning in the context of building web applications using
upgraded web technology. Mapped moderately to PSO 2 as students apply the
programming, designing in building the applications and guiding them innovative
career path.

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

ANGULAR JS
(Practical based)
Course Code: 21CSL581 CIE Marks 50
Teaching Hours/Week 0:0:2:0 SEE Marks 50
Total No. of Hours 12T + 12P Total Marks 100
Credits 01 Exam Hours 02
Sl. Contact Page
No Experiment hours No
Develop Angular JS program that allows user to input their first name
1 and last name and display their full name. Note: The default values for 02 1
first name and last name may be included in the program.
Develop an Angular JS application that displays a list of shopping
items. Allow users to add and remove items from the list using
2 02 3
directives and controllers. Note: The default values of items may be
included in the program.
Develop a simple Angular JS calculator application that can perform
3 basic mathematical operations (addition, subtraction, multiplication, 02 5
division) based on user input.
Write an Angular JS application that can calculate factorial and
4 02 7
compute square based on given user input.
Develop AngularJS application that displays a details of students and
5 their CGPA. Allow users to read the number of students and display 02 9
the count. Note: Student details may be included in the program.
Develop an AngularJS program to create a simple to-do list
6 application. Allow users to add, edit, and delete tasks. Note: The 02 11
default values for tasks may be included in the program.
Write an AngularJS program to create a simple CRUD application
7 02 15
(Create, Read, Update, and Delete) for managing users.
Develop AngularJS program to create a login form, with validation for
8 02 18
the username and password fields.
Create an AngularJS application that displays a list of employees and
9 their salaries. Allow users to search for employees by name and salary. 02 20
Note: Employee details may be included in the program.
Create AngularJS application that allows users to maintain a collection
of items. The application should display the current total number of
10 items, and this count should automatically update as items are added 02 22
or removed. Users should be able to add items to the collection and
remove them as needed.
11 Note: The default values for items may be included in the program. 02 25
Create AngularJS application to convert student details to Uppercase
12 02 27
using angular filters.
Assessment Details (both CIE and SEE)

The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%. The
minimum passing mark for the CIE is 40% of the maximum marks (20 marks). A student shall be deemed to have
satisfied the academic requirements and earned the credits allotted to each course. The student has to secure not
less than 35% (18 Marks out of 50) in the semester-end examination (SEE).

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Continuous Internal Evaluation (CIE):

NOTE: List of experiments to be prepared by the faculty based on the syllabus mentioned above

CIE marks for the practical course is 50 Marks.

The split-up of CIE marks for record/ journal and test are in the ratio 60:40.

 Each experiment to be evaluated for conduction with observation sheet and record write-up. Rubrics for the
evaluation of the journal/write-up for hardware/software experiments designed by the faculty who is handling
the laboratory session and is made known to students at the beginning of the practical session.
 Record should contain all the specified experiments in the syllabus and each experiment write-up will be
evaluated for 10 marks.
 Total marks scored by the students are scaled downed to 30 marks (60% of maximum marks).
 Weightage to be given for neatness and submission of record/write-up on time.
 Department shall conduct 02 tests for 100 marks, the first test shall be conducted after the 8th week of the
semester and the second test shall be conducted after the 14 th week of the semester.
 In each test, test write-up, conduction of experiment, acceptable result, and procedural knowledge will carry
a weightage of 60% and the rest 40% for viva-voce.
 The suitable rubrics can be designed to evaluate each student’s performance and learning ability. Rubrics
suggested in Annexure-II of Regulation book
 The average of 02 tests is scaled down to 20 marks (40% of the maximum marks).
The Sum of scaled-down marks scored in the report write-up/journal and average marks of two tests is the total CIE
marks scored by the student.
Semester End Evaluation (SEE):

 SEE marks for the practical course is 50 Marks.

 SEE shall be conducted jointly by the two examiners of the same institute, examiners are
appointed by the University
 All laboratory experiments are to be included for practical examination.
 (Rubrics) Breakup of marks and the instructions printed on the cover page of the answer script to be
strictly adhered to by the examiners. OR based on the course requirement evaluation rubrics shall be
decided jointly by examiners.
 Students can pick one question (experiment) from the questions lot prepared by the internal
/external examiners jointly.
Evaluation of test write-up/ conduction procedure and result/viva will be conducted jointly by examiners.
 General rubrics suggested for SEE are mentioned here, writeup-20%, Conduction procedure and result
in -60%, Viva-voce 20% of maximum marks. SEE for practical shall be evaluated for 100 marks and
scored marks shall be scaled down to 50 marks (however, based on course type, rubrics shall be decided
by the examiners)
 The duration of SEE is 02 hours
Rubrics suggested in Annexure-II of Regulation book

Dept. of ISE
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

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>

Dept. of ISE 1
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

OUTPUT:

----------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

Dept. of ISE 2
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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>

Dept. of ISE 3
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

OUTPUT:

----------------------------------------------------------------------------------------------------------------
After adding items:

----------------------------------------------------------------------------------------------------------------
After removing items:

----------------------------------------------------------------------------------------------------------------

Dept. of ISE 4
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Program 3: Develop a simple Angular JS 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;

Dept. of ISE 5
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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:

Dept. of ISE 6
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

P4.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>

Dept. of ISE 7
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

</body>
</html>

OUTPUT:

----------------------------------------------------------------------------------------------------------------

Dept. of ISE 8
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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

P5.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>

Dept. of ISE 9
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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:

Dept. of ISE 10
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

P6.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>

Dept. of ISE 11
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

</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 = '';

Dept. of ISE 12
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

};

$scope.deleteTask = function (task) {

var index = $scope.tasks.indexOf(task);
if (index !== -1) {
$scope.tasks.splice(index, 1);
}
};
});

OUTPUT:

--------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

Dept. of ISE 13
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

----------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

Dept. of ISE 14
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

P7.html
<!DOCTYPE html>
<html ng-app="userApp">
<head>
<title>AngularJS CRUD Application for Users</title>
</head>
<body ng-controller="UserController">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/a
ngular.min.js"> </script>

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

Dept. of ISE 15
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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

<script src="Program7.js"></script>
</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() {
$scope.users.push($scope.newUser);
$scope.newUser = {};
};
$scope.editUser = function(user) {
$scope.editedUser = user;
};
$scope.updateUser = function() {
$scope.editedUser = {};
};
$scope.deleteUser = function(user) {
$scope.users.splice($scope.users.indexOf(user), 1);
};
});

Dept. of ISE 16
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

OUTPUT:

----------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------

Dept. of ISE 17
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Program 8: Develop AngularJS program to create a login form, with validation

for the username and password fields.
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.

Pgm8.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>

Dept. of ISE 18
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

<script src= “Program8.js”> </script>

</body>
</html>

Program8.js

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

app.controller('LoginController', function ($scope) {
$scope.user = { username: '', password: '' };
$scope.isLoggedIn = false;
$scope.login = function ()
$scope.isLoggedIn = true;
};
});

OUTPUT:

--------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------

Dept. of ISE 19
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

Pgm9.html
<!doctype html>
<html ng-app>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div>
<div ng-app="myApp">
<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 employees">{{employee.name}} - {{employee.salary}}</li>
</ul>
</div>
</div>
<script src= “ Program9.js”></script>
</body>
</html>

Program9.js

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() {
$scope.employees = $scope.employees.filter(function(employee) {

Dept. of ISE 20
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

return employee.name.toLowerCase().indexOf($scope.searchName.toLowerCase()) !== -

1 && employee.salary >= $scope.searchSalary;
});
};
});

OUTPUT:

-------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------
-

----------------------------------------------------------------------------------------------------------------------------------

Dept. of ISE 21
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.

P10.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 src= “Program10.js”></script>
</body>
</html>

Dept. of ISE 22
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Program10.js
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);
}
};
});

OUTPUT:

-------------------------------------------------------------------------------------------------------------------------------

Dept. of ISE 23
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

--------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

Dept. of ISE 24
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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.
Description:
The uppercase Filter in AngularJS is used to change a string to an uppercase string or letters.
Syntax:
{{ string | uppercase}}
The uppercase filter is applied to each property of the student details to convert them to
uppercase. The default student details are defined in the controller using the $scope.students
array. The details are displayed in a table using ng-repeat to iterate over the students

P11.html
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>Student Details</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>CGPA</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{student.name | uppercase}}</td>
<td>{{student.cgpa}}</td>
</tr>
</tbody>
</table>
<script src= “P11.js”></script>
</body>
</html>

Dept. of ISE 25
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

P11.js
angular.module('myApp', []).controller('appCtrl', function($scope) {
$scope.students = [
{ name: "John Doe", cgpa: 3.8 },
{ name: "Jane Doe", cgpa: 3.6 },
{ name: "Peter Parker", cgpa: 3.9 },
{ name: "Mary Jane Watson", cgpa: 3.7 }
];
});

OUTPUT:

Dept. of ISE 26
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

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

Description:
AngularJS date filter is used to convert a date into a specified format. When the date format is
not specified, the default date format is ‘MMM d, yyyy’.
Syntax:
{{ date | date : format : timezone }}
Parameter Values: The date filter contains format and timezone parameters which is optional.

In this program the user can select a date format from a dropdown list. The ng-change directive
is used to trigger the updateDate function whenever the selected format changes. The
updateDate function uses the AngularJS $filter service to format the current date based on the
selected format. Formatted date is then displayed in the HTML.

P12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS Date Display</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>Date Display</h2>

<label>Date Format:
<select ng-model="selectedFormat" ng-change="updateDate()">
<option value="fullDate">Full Date</option>
<option value="shortDate">Short Date</option>
<option value="mediumTime">Medium Time</option>
<option value="shortTime">short Time</option>
<option value="yyyy-MM-dd HH:mm:ss">Custom Format (yyyy-MM-dd
HH:mm:ss)</option>
</select>
</label>

<p>Selected Date Format: {{ selectedFormat }}</p>

<p>Formatted Date: {{ formattedDate }}</p>
</div>
<script src= “P12.js”></script>

Dept. of ISE 27
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

</body>
</html>

P12.js
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $filter) {
$scope.selectedFormat = 'fullDate'; // Default date format
$scope.updateDate = function () {
var currentDate = new Date();
$scope.formattedDate = $filter('date')(currentDate, $scope.selectedFormat);
};
// Initial date update
$scope.updateDate();
});

OUTPUT:

Dept. of ISE 28
Canara Engineering College, Banjanapadavu AngulaJS Lab Manual(21CSL581)

Dept. of ISE 29