MALLA REDDY UNIVERSITY

School of Engineering
Computer Science Engineering

MEAN Stack Web Development Lab

Week 1: Installation of Software and Practice TypeScript

A. Installation of Software
1. Install Visual Studio
2. Install Node JS
a. Check version of Node and NPM installed
3. Install TypeScript
a. Check Version of TypeScript
b. Get help of TypeScript
c. Practice TypeScript

Procedure:
1. Install Visual Studio Code Software
Download Visual Studio Code - Mac, Linux, Windows

MEAN Stack Web Development Lab Manual

2. Install Node JS from https://nodejs.org

2a. Check version of Node and NPM installed

Go to command prompt
Verify Installed Node Version
Enter node -v
Verify Installed NPM Version
Enter npm -v

3. Install TypeScript
Enter npm install -g typescript

MEAN Stack Web Development Lab Manual

3a. Check Version of typescript
Enter tsc --version

3b. Get help of typescript

Enter tsc --help

MEAN Stack Web Development Lab Manual

B. Practice Type Script
Procedure:
1. Open cmd.exe
2. Create Project Folder
3. Go to Project Folder and type code .
OR
4. Open VS Code and Select Project Folder
5. Create Exercise.ts file
6. Convert Exercise.ts file to Exercise.js file using tsc Exercise.ts command
7. Run Exercise.js file using node Exercise.js command and check results

Primitive Types of TypeScript

// 1. Declaration of Number
let first: number=25; // number
let second: number = 0x37CF; // hexadecimal
let third: number = 0o377 ; // octal
let fourth: number = 0b111001; // binary
console.log("decimal value of 25: " + first) // 123
console.log("hexadecimal value of 25: " + second); // 14287
console.log("octal value of 25: " + third); // 255
console.log("binary value of 25: " + fourth);

Write JS file:

Output:

// 2. Declaration of String
let str:string = "MALLAREDDY UNIVERSITY"
console.log("string is: "+str);

Write JS file:

Output:

MEAN Stack Web Development Lab Manual

//3. Declaration of Any
let val1: any = 'Hi';
console.log("value using any: " + val1) ;

val1 = 555; // OK
console.log("value using any: " + val1) ;

val1 = true; // OK
console.log("value using any: " + val1) ;

Write JS file:

Output:

//4. Declaration of Boolean

let isWorking:boolean=true;
console.log("boolean value: " + isWorking);

//5. Declaration of Union Type

let code:(string | number)
code = 123;
code = "abc";
console.log(code);

Write JS file:

Output:

MEAN Stack Web Development Lab Manual

 Week 2: Practice TypeScript – Object Types

//1. Declaration of Array

let a : number[] = [1, 3, 5];
let b : Array<number> = [1, 3, 5];
let c :number[]=new Array(10,20,30,);
console.log("array1: "+ a);
console.log("array2: "+ b);
console.log("array3: "+ c);

Output:

//2. Declaration of Enum

enum directions {
up = 1,
down = 2,
right = 3,
left = 4
}
console.log(directions.up);
console.log(directions.down);
console.log(directions.right);
console.log(directions.left);

Output:

//3. Declaration of Object

let emp:[number,string] = [1,"steve Jobs"];
console.log(emp);

Output:

MEAN Stack Web Development Lab Manual

//4. Declaration of Class
class Student {
rollNumber: number;
studentName: string;

constructor(rollNumber: number, studentName: string) {

this.rollNumber = rollNumber;
this.studentName=studentName;
}

display() {
console.log(this.rollNumber);
console.log(this.studentName);
}
}

let studentObject = new Student(100,"Steve");

studentObject.display();

//5. Declaration of Interface

interface Person
{
firstName: string;
lastName: string;
age: number;

FullName(); //function
GetAge(); //function
}

//5a. implementing the interface

class Employee implements Person {
firstName: string;
lastName: string;
age:number;

FullName() {
return this.firstName + ' ' + this.lastName;
}

GetAge() {
return this.age;
}

constructor(firstN: string, lastN: string, getAge: number) {

this.firstName = firstN;
this.lastName = lastN;
this.age = getAge;
}

MEAN Stack Web Development Lab Manual

}

//5b. using the class that implements interface

let myEmployee = new Employee('aaa', 'bbb', 25);
let fullName = myEmployee.FullName();
let Age = myEmployee.GetAge();
console.log("Name of Person: " + fullName + '\nAge: ' + Age);

Output:

//6. implementation of Module

// Employeemodule.ts:
export let age : number = 20;
export class Employee {
empCode: number;
empName: string;
constructor(name: string, code: number) {
this.empName = name;
this.empCode = code;
}
displayEmployee() {
console.log ("Employee Code: " + this.empCode + ", Employee Name: " +
this.empName );
}
}
let companyName:string = "XYZ";

// Employee1.ts
import { Employee } from "./Employeemodule";

let empObj = new Employee("Rani", 1);

empObj.displayEmployee();

Output:

MEAN Stack Web Development Lab Manual

 Week 3: Creation of Angular Project

Procedure:
1. Install Angular CLI
 Check Version of Angular
2. Create Angular Project
3. Install Bootstrap and Configure Bootstrap
4. Open Project in Visual Studio Code and Build Project
5. Run Project

Note:
If you are unable to run from Terminal and getting error “PS1 Can Not Be
Loaded Because Running Scripts Is Disabled On This System In Angular”,
run the following commands on Terminal.
1. set-ExecutionPolicy RemoteSigned -Scope CurrentUser
2. Get-ExecutionPolicy
3. Get-ExecutionPolicy –list

Type Command ng –version to verify Terminal is now working or not.

If you are unable Create Angular Project, run the following command on
Terminal.
npm cache clear --force

Procedure:
1. Install Angular CLI
Install the CLI using the npm package manager:
npm install –g @angular/cli

1a. Check version

ng v

MEAN Stack Web Development Lab Manual

2. Create Angular Project and Run Project
Go to Folder and Enter ng new [project name]

3. Install Bootstrap
npm install bootstrap -save

Configure Bootstrap 5 into Angular App

And navigate to your project and open angular.json file. And then add the
following code into it; as follows:
"styles": [
...
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
...
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

4. Open Project Folder in Visual Studio Code and Write

<h1>Hello World</h1>
in app.component.html file.

MEAN Stack Web Development Lab Manual

5. Run Project
Open Terminal and type below command
ng serve -o

You will find the below result on Default Browser at localhost:4200

Hello World

Then Apply Bootstrap class to check whether it is working or not

<h1 class=’text-primary’>Hello World</h1>

If it works, you will see message as shown below on Browser

Hello World

MEAN Stack Web Development Lab Manual

 Week 4: Creation of Angular Components

Objective:
To create a Website with Custom Components

Procedure:
1. Create Angular Project
2. Install Bootstrap and Configure Bootstrap
3. Open Project in Visual Studio Code
4. Create Custom Components: home, about, services, contact, gallery
5. Add Custom Components to app.component.html file
6. Run Project

Website Template

Step 4: Create Custom Components

ng g c [component name]

Use the following commands to create required Angular Components:

ng g c home  check home.component.ts for selector: app-home
ng g c about  check about.component.ts for selector: app-about
ng g c services  check services.component.ts for selector: app-services
ng g c contact  check contact.component.ts for selector: app-contact
ng g c gallery  check gallery.component.ts for selector: app-gallery

MEAN Stack Web Development Lab Manual

5. Add Custom Components in app.component.html file

Step 6: Run the Project

MEAN Stack Web Development Lab Manual

 Week 5: Single Page Application (SPA) with Routing

Objective:
To create a Single Page Application (SPA) Website with Custom
Components using Routing.

Procedure:
Step 1: Create New Angular Project with Routing Option
Step 2: Install bootstrap and configure to the Project
Step 3: Create Components: home, services, about, contact and gallery
Step 4: Update app.component.html file with navbar, Router Outlet and other
components
Step 5: Update app-routing.module.ts file
 Import Components
 Add Route Configuration
Step 6: Run Project

Website Template

Step 3: Create Custom Components

ng g c [component name]

Use the following commands to create required Angular Components:

ng g c home  check home.component.ts for selector: app-home
ng g c about  check about.component.ts for selector: app-about
ng g c services  check services.component.ts for selector: app-services
ng g c contact  check contact.component.ts for selector: app-contact
ng g c gallery  check gallery.component.ts for selector: app-gallery

MEAN Stack Web Development Lab Manual

Step 4: Update app.component.html

MEAN Stack Web Development Lab Manual

Step 5: Update app-routing.module.ts file

Step 6: Run the Project

Click on Home, Services and Gallery links and observe dynamic display of
content below navbar.

MEAN Stack Web Development Lab Manual

 Week 6: Data Binding (Part 1)
(String Interpolation, Event Binding and Property Binding)

Objective:
To create Angular Project and Implement Data Binding Concepts

Procedure:
Step 1: Create New Angular Project with Routing Option
Step 2: Install bootstrap and configure to the Project
Step 3: Update app.component.html file with navbar and add Student Details
using Data Binding Concept.
Step 4: Declare variables in app.component.ts file
Step 5: Run Project

Web Page – Template

MEAN Stack Web Development Lab Manual

Step 3: Update app.component.html

MEAN Stack Web Development Lab Manual

Step 3: Update app.component.ts

Step 5: Run the Project

Note:
Use Your Personal Details

MEAN Stack Web Development Lab Manual

 Week 7: Data Binding (Part 2)
(Class Binding, Style Binding and Two-way Binding)

Objective:
To create Angular Project and Implement Data Binding Concepts

Procedure:
Step 1: Create New Angular Project with Routing Option
Step 2: Install bootstrap and configure to the Project
Step 3: Update app.component.html file with navbar and Data Binding
Examples
Step 4: Declare variables in app.component.ts file
Step 5: Add import {FormsModule} from '@angular/forms'; in app.modules.ts
(Required for ngModel)
Step 6: Run Project

Web Page – Template

MEAN Stack Web Development Lab Manual

Step 3: Update app.component.html

MEAN Stack Web Development Lab Manual

Step 4: Update app.component.ts

Step 5: Run the Project

MEAN Stack Web Development Lab Manual

 Week 8: Directives
(*ngIf, *ngFor, ngSwitch, ngStyle and ngClass)

Objective:
To create Angular Project and Implement Angular Directives

Procedure:
Step 1: Create New Angular Project with Routing Option
Step 2: Install bootstrap and configure to the Project
Step 3: Update app.component.html file Directives Examples
Step 4: Declare variables in app.component.ts file
Step 5: Run Project

Step 3: Update app.component.html

<!-- Implementation of *ngIf, *ngFor -->

MEAN Stack Web Development Lab Manual

<!-- Implementation of ngSwitch -->

<!-- Implementation of ngClass, ngStyle -->

MEAN Stack Web Development Lab Manual

Step 4: Update app.component.ts

Step 5: Run the Project

MEAN Stack Web Development Lab Manual

Output:

MEAN Stack Web Development Lab Manual

 Week 9: Browser Events
(Click, KeyUp, Change Events)

Objective:
To collect Form data using Brower Events

Procedure:
Step 1: Create New Angular Project
Step 2: Install bootstrap and configure to the Project
Step 3: Create HTML Form in app.component.html file
Step 4: Collect and Validate Data using Brower Events in app.component.ts file
Step 5: Run Project

Step 3: Create HTML Form

MEAN Stack Web Development Lab Manual

Step 4: Collect and Validate Data

MEAN Stack Web Development Lab Manual

Output:

MEAN Stack Web Development Lab Manual

 Week 10: Built-in Pipes

Objective:
To implement Pipe concept in Expressions to modify the result of
expression for display in a view.

Procedure:
Step 1: Create New Angular Project
Step 2: Install bootstrap and configure to the Project
Step 3: Create HTML and Bind Data along with Pipes in app.component.html
Step 4: Declare Variables in app.component.ts file
Step 5: Run Project

Step 3: Create HTML and Bind Data along with Pipes in app.component.html

MEAN Stack Web Development Lab Manual

Step 4: Declare Variables in app.component.ts file

Output:

MEAN Stack Web Development Lab Manual

 Week 11: Template-Driven Forms

Objective:
To Collect Data through Login Form using Template-Driven Forms

Procedure:
Step 1: Create New Angular Project
Step 2: Install bootstrap and configure to the Project
Step 3: Create Login Form in app.component.html
Step 4: Collect Data on Form Submission in app.component.ts file
Step 5: Run Project

Step 3: Create Login Form in app.component.html

MEAN Stack Web Development Lab Manual

Step 4: Collect Data on Form Submission in app.component.ts file

Output:

MEAN Stack Web Development Lab Manual

 Week 12: Angular Services

Objective:
To load data from Local JSON file using HttpClient Module

Procedure:
Step 1: Create New Angular Project
Step 2: Install bootstrap and configure to the Project
Step 3: Create Service Component
ng g service [service name]
Step 4: Import HttpClientModule in app.module.ts
import { HttpClientModule } from '@angular/common/http’;
Step 5: Create Service in http-service.ts file (Service Component)
Step 6: Consume GetData method of Service Class in app.component.ts file
Step 7: Display Data using *ngFor and Interpolation in app.component.ts file
Step 8: Run Project

Step 5: Create Service in http-service.ts file (Service Component)

MEAN Stack Web Development Lab Manual

Step 6: Consume GetData method of Service Class in app.component.ts file

MEAN Stack Web Development Lab Manual

Step 7: Display Data using *ngFor and Interpolation in app.component.ts file

Output:

MEAN Stack Web Development Lab Manual

 Week 13: Working with MongoDB

Objective:
To work on MongoDB including Installation, Configuration, Creation of
Database, Managing Collections and Documents.

Procedure:
Step 1: Download MongoDB Community Server (version 5.0.9) from
https://www.mongodb.com/try/download/community

Step 2: Install MongoDB Complete Setup along with MongoDB Compass

MongoDB Compass is a powerful GUI for querying, aggregating, and analysing
your MongoDB data in a visual environment.
(https://downloads.mongodb.com/compass/mongodb-compass-1.32.4-win32-
x64.exe)

Step 3: Set MongoDB in the windows path environment

Step 4: Working with MongoDB using MongoShell

a) Create MRU Database
b) Create Student Collection
c) Insert Student Data (Roll No., and Name)
i. Single Record
ii. Two or More Records
d) Show Collection List
e) Show Database List
f) Find First Document
g) Find Document by Criteria
h) Update Student Document by Criteria
i) Remove a Document by Criteria
j) Remove All Documents
k) Drop Student Collection
l) Drop MRU Database

MEAN Stack Web Development Lab Manual

Step 3: Set MongoDB in the windows path environment
 After successful installation, Right-click on ‘This PC’ or ‘My Computer’
and Choose properties
 Choose the `advance system setting` options
 Click on Environment Variables under Advance section.
 Choose Path value under system variables and click Edit button
 Now get your mongo path to your system, where your MongoDB is
installed. For example, if you installed MongoDB in C drive, then it your
path will be like this: `C:\ProgramFiles\MongoDB\Server\VERSION\bin`
 Copy this path and enter as a new environment value on Edit environment
variables page
 Now click on OK and close all active dialog box. Your environment is
set, restart your terminal and now enter mongo, it will open mongo-shell.

Step 4: Working with MongoDB using MongoShell

 Displaying a List of Databases
show dbs

 Changing the Current Database

use MRU

 Check current Database

db

 Creating Databases
Your created database (MRU) is not present in list. To display database,
you need create collection and need to insert at least one document into it.
db.createCollection(‘student’)

 Show collections – to see existing Collections

show collections

 Drop collections
db.student.drop()

 Deleting Databases
db.dropDatabase()
MEAN Stack Web Development Lab Manual
 Copying Databases
db.copyDatabase(‘mru’, ‘mru1’)

 Adding Documents to a Collection

o To add single document
db.student.insertOne({'name' : 'raju'})

o To add Many documents

db.student.insertMany([{‘name’ : ‘raju’}, {‘name’ : ’rao’}])

 Finding Documents in a Collection

o To view all documents
db.student.find({})

o To view first document

db.student.findOne({})

o To view first documents matching Criteria

db.student.find({'name':'rao’})

 Deleting Documents in a Collection

o To remove a Single Document
db.student.remove({'name':'rao’})

o To remove All Document

db.student.remove({})

 Updating Documents in a Collection

o To update first matched document
db.student.updateOne({'name':'raju'},{$set:{'name':'ram'}})

o To update first matched document

db.student.updateMany({'name':'raju'},{$set:{'name':'ram'}})

o Quit the mongo shell

exit

MEAN Stack Web Development Lab Manual