Scribd
Upload
83 views25 pages

Mean Stack Technologies Lab Manual

This document is a lab manual for an Angular JS course, detailing various modules and activities related to Angular application setup, components, templates, directives, and data binding. Each module includes specific tasks such as creating components, handling events, and applying styles, along with expected outputs. The manual serves as a guide for practical exercises to enhance understanding of Angular JS features.

Uploaded by

bujjikanna478
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
83 views25 pages

Mean Stack Technologies Lab Manual

This document is a lab manual for an Angular JS course, detailing various modules and activities related to Angular application setup, components, templates, directives, and data binding. Each module includes specific tasks such as creating components, handling events, and applying styles, along with expected outputs. The manual serves as a guide for practical exercises to enhance understanding of Angular JS features.

Uploaded by

bujjikanna478
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Mean Stack Technologies

Module-2
Lab Manual
1. 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/webmodule/lex_
24049616594198490000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course

Angular Application Setup:-


Download the mCart case study to your local machine.

This will create a folder called node_modules with all the dependencies installed inside it.

Output:-
2. 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/webmodule/lex_
28217843279641040000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
Output:-
3. 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/webmodule/lex_
19226434057992030000_shared?collectionId=lex_208585155432546000
00_shared&collectionType=Course
Output:-

When a user clicks on the paragraph, the course name will be changed to 'Typescript'.
4. 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 <>" message
otherwise it should render "Invalid Login!!! Please try again..." message.

Aim:-
To create a login form with username and password fields. If the user
enters the correct credentials, it should render a "Welcome <>" message
otherwise it should render "Invalid Login!!! Please try again..." message.
Output:-

Welcome Admin

Invalid Login! Please try again


5. Course Name: Angular JS
Module Name: ngFor
Create a courses array and rendering it in the template using ngFor
directive in a list format.

Aim:-
To create a courses array and rendering it in the template using ngFor
directive in a list format.
Output:-

 0-TypeScript
 1-Angular
 2-Node JS
 3-TypeScript
6. Course Name: Angular JS
Module Name: Attribute Directives – ngStyle
Apply multiple CSS properties to a paragraph in a component using
ngStyle.

Aim:-
To apply multiple CSS properties to a paragraph in a component using
ngStyle.
3. Save the files and check output in the browser.

Output:-
7. Course Name: Angular JS
Module Name: ngClass
Apply multiple CSS classes to the text using ngClass directive.

Aim:-
To apply multiple CSS classes to the text using ngClass directive.
4. Save the files and check output in the browser.

Output:-
8. Course Name: Angular JS
Module Name: Property Binding
Binding image with class property using property binding.

Aim:-
Binding image with class property using property binding.
Output:-
9. Course Name: Angular JS
Module Name: Attribute Binding
Binding colspan attribute of a table element to the class property.

Aim:-
Binding colspan attribute of a table element to the class property.
Output:-
10. Course Name: Angular JS
Module Name: Built in Pipes
Display the product code in lowercase and product name in uppercase
using built-in pipes.

Aim:-
To display the product code in lowercase and product name in uppercase
using built-in pipes.
Output:-

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy