R-20 Syllabus for CSE, JNTUK w. e. f.

2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

L T P C
IV Year – I Semester
0 0 4 2
MEAN STACK TECHNOLOGIES-MODULE II- ANGULAR JS, MONGODB
(Skill Oriented Course)

Course Outcomes:
• Build a component-based application using Angular components and enhance their functionality using
directives.
• Utilize data binding for developing Angular forms and bind them with model data.
• Apply Angular built-in or custom pipes to format the rendered data.
• Develop a single page applic
• ation by using synchronous or asynchronous Angular routing.
• Make use of MongoDB queries to perform CRUD operations on document database.

List of Exercises:

1.a Course Name: Angular JS

Module Name: Angular Application Setup
Observe the link http://localhost:4200/welcome on which the mCart application is
running. Perform the below activities to understand the features of the application.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_24049616594198490000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
1.b Course Name: Angular JS
Module Name: Components and Modules
Create a new component called hello and render Hello Angular on the page
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_28217843279641040000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
1.c Course Name: Angular JS
Module Name: Elements of Template
Add an event to the hello component template and when it is clicked, it should change
the courseName.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_19226434057992030000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
1.d Course Name: Angular JS
Module Name: Change Detection
progressively building the PoolCarz application
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_2560981637120771000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
2.a Course Name: Angular JS
Module Name: Structural Directives - ngIf
Create a login form with username and password fields. If the user enters the correct
credentials, it should render a "Welcome <<username>>" message otherwise it should
render "Invalid Login!!! Please try again..." message
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_auth_0127637402260439042595_shared?collectionId=lex_20858515543
254600000_shared&collectionType=Course
 R-20 Syllabus for CSE, JNTUK w. e. f. 2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

2.b Course Name: Angular JS
Module Name: ngFor
Create a courses array and rendering it in the template using ngFor directive in a list
format.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_32795774277593590000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
2.c Course Name: Angular JS
Module Name: ngSwitch
Display the correct option based on the value passed to ngSwitch directive.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_23388127475984175000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
2.d Course Name: Angular JS
Module Name: Custom Structural Directive
Create a custom structural directive called 'repeat' which should repeat the element
given a number of times.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_24073319904331424000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
3.a Course Name: Angular JS
Module Name: Attribute Directives - ngStyle
Apply multiple CSS properties to a paragraph in a component using ngStyle.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_24037156998765367000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
3.b Course Name: Angular JS
Module Name: ngClass
Apply multiple CSS classes to the text using ngClass directive.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_3459610297074182000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
3.c Course Name: Angular JS
Module Name: Custom Attribute Directive
Create an attribute directive called 'showMessage' which should display the given
message in a paragraph when a user clicks on it and should change the text color to
red.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_14783742359773809000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
4.a Course Name: Angular JS
Module Name: Property Binding
Binding image with class property using property binding.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_8951964709153619000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
4.b Course Name: Angular JS
Module Name: Attribute Binding
Binding colspan attribute of a table element to the class property.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_7154252883180625000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
 R-20 Syllabus for CSE, JNTUK w. e. f. 2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

4.c Course Name: Angular JS
Module Name: Style and Event Binding
Binding an element using inline style and user actions like entering text in input fields.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_7417401021103822000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
5.a Course Name: Angular JS
Module Name: Built in Pipes
Display the product code in lowercase and product name in uppercase using built-in
pipes.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_11810543990912035000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
5.b Course Name: Angular JS
Module Name: Passing Parameters to Pipes
Apply built-in pipes with parameters to display product details.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_21187073707540988000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
5.c Course Name: Angular JS
Module Name: Nested Components Basics
Load CourseslistComponent in the root component when a user clicks on the View
courses list button.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_24231999287700136000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
6.a Course Name: Angular JS
Module Name: Passing data from Container Component to Child Component
Create an AppComponent that displays a dropdown with a list of courses as values in
it. Create another component called the CoursesList component and load it in
AppComponent which should display the course details. When the user selects a
course from the
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_15758356947336235000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
6.b Course Name: Angular JS
Module Name: Passing data from Child Component to ContainerComponent
Create an AppComponent that loads another component called the CoursesList
component. Create another component called CoursesListComponent which should
display the courses list in a table along with a register .button in each row. When a
user clicks on th
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_2494980689916818400_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
6.c Course Name: Angular JS
Module Name: Shadow DOM
Apply ShadowDOM and None encapsulation modes to components.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_10312243404892470000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
6.d Course Name: Angular JS
Module Name: Component Life Cycle
 R-20 Syllabus for CSE, JNTUK w. e. f. 2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Override component life-cycle hooks and logging the corresponding messages to
understand the flow.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_10818939635948007000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
7.a Course Name: Angular JS
Module Name: Template Driven Forms
Create a course registration form as a template-driven form.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_2810668513603024400_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
7.b Course Name: Angular JS
Module Name: Model Driven Forms or Reactive Forms
Create an employee registration form as a reactive form.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_33704702617536004000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
7.c Course Name: Angular JS
Module Name: Custom Validators in Reactive Forms
Create a custom validator for an email field in the employee registration form (
reactive form)
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_33728128192769250000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
8.a Course Name: Angular JS
Module Name: Custom Validators in Template Driven forms
Create a custom validator for the email field in the course registration form.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_27688491925133280000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
8.b Course Name: Angular JS
Module Name: Services Basics
Create a Book Component which fetches book details like id, name and displays them
on the page in a list format. Store the book details in an array and fetch the data using
a custom service.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_32584403823635940000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
8.c Course Name: Angular JS
Module Name: RxJS Observables
Create and use an observable in Angular.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_6209609363905256000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
9.a Course Name: Angular JS
Module Name: Server Communication using HttpClient
Create an application for Server Communication using HttpClient
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_auth_0127637395317063682615_shared?collectionId=lex_20858515543
254600000_shared&collectionType=Course
9.b Course Name: Angular JS
Module Name: Communicating with different backend services using Angular
 R-20 Syllabus for CSE, JNTUK w. e. f. 2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

HttpClient
Create a custom service called ProductService in which Http class is used to fetch data
stored in the JSON files.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_4266333361795059700_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
10. Course Name: Angular JS
a Module Name: Routing Basics, Router Links
Create multiple components and add routing to provide navigation between them.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_3782024852517635000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
10. Course Name: Angular JS
b Module Name: Route Guards
Considering the same example used for routing, add route guard to BooksComponent.
Only after logging in, the user should be able to access BooksComponent. If the user
tries to give the URL of Bookscomponent in another tab or window, or if the user tries
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_30303325731876470000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
10. Course Name: Angular JS
c Module Name: Asynchronous Routing
Apply lazy loading to BookComponent. If lazy loading is not added to the demo, it
has loaded in 1.14 s. Observe the load time at the bottom of the browser console. Press
F12 in the browser and click the Network tab and check the Load time
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_9878739890118246000_shared?collectionId=lex_2085851554325460000
0_shared&collectionType=Course
10. Course Name: Angular JS
d Module Name: Nested Routes
Implement Child Routes to a submodule.
https://infyspringboard.onwingspan.com/web/en/viewer/web-
module/lex_auth_012768043900444672140_shared?collectionId=lex_208585155432
54600000_shared&collectionType=Course
11. Course Name: MongoDB Essentials - A Complete MongoDB Guide
a Module Name: Installing MongoDB on the local computer, Create MongoDB Atlas
Cluster
Install MongoDB and configure ATLAS
https://infyspringboard.onwingspan.com/web/en/viewer/video/lex_auth_01281821437
313024030083_shared?collectionId=lex_auth_013177169294712832113_shared&coll
ectionType=Course
11. Course Name: MongoDB Essentials - A Complete MongoDB Guide
b Module Name: Introduction to the CRUD Operations
Write MongoDB queries to perform CRUD operations on document using insert(),
find(), update(), remove()
https://infyspringboard.onwingspan.com/web/en/viewer/video/lex_auth_01281821874
166169630118_shared?collectionId=lex_auth_013177169294712832113_shared&coll
ectionType=Course
12. Course Name: MongoDB Essentials - A Complete MongoDB Guide
a Module Name: Create and Delete Databases and Collections
Write MongoDB queries to Create and drop databases and collections.
https://infyspringboard.onwingspan.com/web/en/viewer/video/lex_auth_01281821654
 R-20 Syllabus for CSE, JNTUK w. e. f. 2020 – 21

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY KAKINADA

KAKINADA – 533 003, Andhra Pradesh, India

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

119219230121_shared?collectionId=lex_auth_013177169294712832113_shared&coll
ectionType=Course
12. Course Name: MongoDB Essentials - A Complete MongoDB Guide
b Module Name: Introduction to MongoDB Queries
Write MongoDB queries to work with records using find(), limit(), sort(),
createIndex(), aggregate().
https://infyspringboard.onwingspan.com/web/en/viewer/video/lex_auth_01328908162
64519682505_shared?collectionId=lex_auth_013177169294712832113_shared&colle
ctionType=Course

Text Books:
1. Programming the World Wide Web, 7th Edition, Robet W Sebesta, Pearson.
2. Pro Mean Stack Development, 1st Edition, ELadElrom, Apress O’Reilly.
3. Full Stack JavaScript Development with MEAN, Colin J Ihrig, Adam Bretz, 1st edition, SitePoint,
SitePoint Pty. Ltd., O'Reilly Media.
4. MongoDB – The Definitive Guide, 2nd Edition, Kristina Chodorow, O’Reilly

Software configuration and installation:

1. Angular
Setup details: Angular Application Setup - Internal - Viewer Page | Infosys Springboard
(onwingspan.com)
2. MongoDB
TOC - MongoDB Essentials - A Complete MongoDB Guide | Infosys Springboard (onwingspan.com)

Web Links:
1. https://infyspringboard.onwingspan.com/en/app/toc/lex_20858515543254600000_shared/overview
(Angular JS)

2. https://infyspringboard.onwingspan.com/en/app/toc/lex_auth_013177169294712832113_shared/ove
rview (MongoDB)