T.

JOHN INSTITUTE OF TECHNOLOGY

(VISVESVARAYA TECHNOLOGICAL UNIVERSITY)
#88/1, Gottigere post, Bannerghatta Road, Bengaluru – 560083

Department of Information Science &Engineering

Angular JS Laboratory

B.E - V Semester

Lab Observation 2023-24

Name:

USN:

Batch:
 T. JOHN INSTITUTE OF TECHNOLOGY
(VISVESVARAYA TECHNOLOGICAL UNIVERSITY)
#88/1, Gottigere post, Bannerghatta Road, Bengaluru – 560083

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

LABORATORY OBSERVATION

Angular JS LABORATORY / 21CSL581

 ANGULAR JS

Course Code 21CSL581/ 21CBL583 CIE Marks 50

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

Sl. Experiments
NO
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

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

Course outcomes (Course Skill Set):

At the end of the course the student will be able to:
1. Develop Angular JS programs using basic features
2. Develop dynamic Web applications using AngularJS modules
3. Make use of form validations and controls for interactive applications
4. Appy the concepts of Expressions, data bindings and filters in developing Angular JS programs
5. Make use of modern tools to develop Web applications
 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). The student has to secure a minimum of 40% (40 marks
out of 100) in the sum total of the CIE(Continuous Internal Evaluation)and SEE (Semester End
Examination)taken together.

Continuous Internal Evaluation (CIE):

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 ishandling
the laboratory session and is made known to students at the beginning of the practicalsession.
• Record should contain all the specified experiments in the syllabus and each experiment write-up will be
evaluated for 10marks.
• Total marks scored by the students are scaled downed to 30 marks (60% of maximummarks).
• Weightage to be given for neatness and submission of record/write-up ontime.
• Department shall conduct 02 tests for 100 marks, the first test shall be conducted after the 8 t^ week of the
semester and the second test shall be conducted after the 14'h week of thesemester.
• In each test, test write-up, conduction of experiment, acceptable result, and procedural knowledge will carry
a weightage of 60% and the rest 40% forviva-voce.
• The suitable rubrics can be designed to evaluate each student’s performance and learning ability. Rubrics
suggested in Annexure-II of Regulationbook
• The average of 02 tests is scaled down to 20 marks (40% of the maximummarks).
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 50Marks.

• SEE shall be conducted jointly by the two examiners of the same institute, examiners are appointed by
theUniversity
• All laboratory experiments are to be included for practicalexamination.
• (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 byexaminers.
• Students can pick one question (experiment) from the questions lot prepared by theinternal/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, write up -20%, Conduction procedureand 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 bythe examiners)
• The duration of SEE is 02hours
Suggested Learning Resources:

Textbooks
1. ShyamSeshadri, Brad Green —“AngularJS: Up and Running: Enhanced Productivity with Structured
Web Apps”, Apress, 0'Reilly Media,Inc.
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
6. https://www.youtube.com/watch?v=QoptnVCQHsU
Activity Based Learning (Suggested Activities in Class)/ Practical Based learning
• Demonstration of simpleprojects/applications (course project)
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.
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.
Program 3: Develop a simple Angular JS calculator application that can perform basic mathematical
operations (addition, subtraction, multiplication, division) based on user input.
Program 4: Write an Angular JS application that can calculate factorial and compute square based on given
user input
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.
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
Program 7: Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and
Delete) for managing users
Program 8: Develop AngularJS program to create a login form, with validation for the username and password
fields
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.
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
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.
Program 12: Create an AngularJS application that displays the date by using date filter parameters