0% found this document useful (0 votes)
6 views39 pages

Meanstack Lab Manual AIML

The document provides an overview of the MEAN stack, which includes MongoDB, ExpressJS, Angular, and NodeJS, detailing their roles in web application development. It also covers various aspects of Angular, including its features, component structure, data binding, and forms, along with practical experiments for creating and managing Angular applications. Additionally, it explains services and dependency injection in Angular, as well as how to retrieve data using HTTP.
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
0% found this document useful (0 votes)
6 views39 pages

Meanstack Lab Manual AIML

The document provides an overview of the MEAN stack, which includes MongoDB, ExpressJS, Angular, and NodeJS, detailing their roles in web application development. It also covers various aspects of Angular, including its features, component structure, data binding, and forms, along with practical experiments for creating and managing Angular applications. Additionally, it explains services and dependency injection in Angular, as well as how to retrieve data using HTTP.
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/ 39

MEAN Stack

Mean stack stands for Mongo DB, Express JS, Angular, and Node JS. It is a set of these
technologies that are used to develop each end of a web application. Further details
about these technologies are given as follows:
Mongo DB : Its a database which is using BSON format to store data.
Express JS : Its a framework of JavaScript which enables developer to establish server.
Angular : Angular is client side framework which is used to develop User Interface.
Node JS :Node JS is a run time environment of JavaScript which allows developer to
execute JS code directly in console
Working of MEAN Stack:
Angular handles the implementation of the user interface (UI). Whenever the UI requires
data, it sends a request to the server, prompting the server to retrieve the necessary
information from MongoDB. Once the server successfully locates the required data, it
sends the response back to the client side.
Advantages of MEAN Stack:
Whole technologies requires only JavaScript to implement programs.
Improved re-usability of code.
Easy to learn.

Experiment 1: ANGULAR INTRODUCTION


Angular: Angular is an open-source web application framework maintained by Google
and a community of developers. It is designed to build dynamic and interactive single-
page applications (SPAs) efficiently. With Angular, developers can create robust, scalable,
and maintainable web applications.
History:
Angular, initially released in 2010 by Google, has undergone significant transformations
over the years. The first version, AngularJS, introduced concepts like two-way data
binding and directives. However, as web development evolved, AngularJS faced
limitations in terms of performance and flexibility.
Prerequisites:
TypeScript
HTML
CSS
JavaScript
Why Angular?
JavaScript is the most commonly used client-side scripting language. It is written into
HTML documents to enable interactions with web pages in many unique ways.

Here are some of the features of Angular


1. Custom Components
Angular enables users to build their components that can pack functionality along with
rendering logic into reusable pieces.
2. Data Binding
Angular enables users to effortlessly move data from JavaScript code to the view, and
react to user events without having to write any code manually.
3. Dependency Injection
Angular enables users to write modular services and inject them wherever they are
needed. This improves the testability and reusability of the same services.
4. Testing
Tests are first-class tools, and Angular has been built from the ground up with testability
in mind. You will have the ability to test every part of your application—which is highly
recommended.
5. Comprehensive
Angular is a full-fledged JavaScript framework and provides out-of-the-box solutions for
server communication, routing within your application, and more.
6. Browser Compatibility
Angular works cross-platform and compatible with multiple browsers. An Angular
application can typically run on all browsers (Eg: Chrome, Firefox) and operating
systems, such as Windows, macOS, and Linux.
Experiment 2: GETTING STRATED WITH ANGULAR
Step 1: Download the NodeJS
Downloading the Node.js ‘.msi’ installer the first step to install Node.js on
Windows is to download the installer. Visit the official Node.js website
i.e) https://nodejs.org/en/download/
Creating an Angular Application
Step 1: Install Angular CLI: Angular CLI (Command Line Interface) is a powerful tool for scaffolding and
managing Angular applications. Install it globally using npm:
npm install -g @angular/cli
Step 2: Create a New Angular Project: Use Angular CLI to create a new Angular project.
Navigate to the desired directory and run:
ng new my-angular-app
Step 3: Navigate to the Project Directory: Move into the newly created project
directory:
Folder Structure:
cd my-angular-app
Step 4: Serve the Application: Launch the development server to see your app in
action:
ng serve

OUTPUT:
Experiment 3: INTRODUCTION TO COMPONENTS
Angular components are the building blocks of a UI in an Angular application. These
components are associated with a template and are a subset of directives. The above
image shows the classification tree structure. A root component, the App Component,
branches out into other components, creating a hierarchy.
Creating a Component in Angular 10:
To create a component in any angular application, follow the below steps:
Get to the angular app via your terminal.
Create a component using the following command:
ng g c <component_name>
OR
ng generate component <component_name>
Using a component in Angular :
Go to the component.html file and write the necessary HTML code.
Go to the component.css file and write the necessary CSS code.
Write the corresponding code in component.ts file.
Run the Angular app using ng serve –open
OUTPUT

EXPERIMENT 4 : TEMPLATES ,INTERPOLATION ,AND DIRECTIVES


TEMPLATES: Introduction to components and templates
A component controls a patch of screen called a view. It consists of a TypeScript class, an
HTML template, and a CSS style sheet. The TypeScript class defines the interaction of the
HTML template and the rendered DOM structure, while the style sheet describes its
appearance.
OUTPUT:

B)INTERPOLATION:
Interpolation is a way to transfer the data from a TypeScript code to an HTML template
(view), i.e. it is a method by which we can put an expression in between some text and
get the value of that expression. Interpolation basically binds the text with the
expression value
Syntax:
{{expression}}
STEP1: manu.component.html

Manu.component.ts

OUTPUT:

C)DIRECTIVES:
Directives are markers in the Document Object Model(DOM). Directives can be used
with any controller or HTML tag which will tell the compiler what exact operation or
behaviour is expected. There are some directives present that are predefined but if a
developer wants he can create new directives (custom-directive).
1. Component Directives
2. Attribute Directives(ngClass ,ngStyle ,ngModal)
3. Structural Directives(ngIf,ngSwitch,ngFor)
Ramakrishna.component.ts:
Ramakrishna.component.html:

Ramakrishna.component.css:
OUTPUT:

EXPERIMENT 5:DATA BINDING & PIPES:


DATA BINDING:
Data binding is the process that establishes a connection between the app UI and
the data it displays. If the binding has the correct settings and the data provides
the proper notifications, when the data changes its value, the elements that are
bound to the data reflect changes automatically.

Types of Data Binding in Angular


1)One-Way Data Binding.
Interpolation.
Property Binding.
Event Binding.
2)Two-Way Data Binding.( Property Binding + Event Binding)
Property Binding:
OUTPUT:

B)PIPES: The pipe() function in Angular is used to chain multiple operators together to
transform data. It receives an input value works on it and gives back a modified result.
You can recognize pipes in your template expressions by the pipe symbol ( | ).
1. Built-in Pipes
Angular comes equipped with built in pipes that handle a variety of common formatting
duties.
<p>Today's date: {{ today | date:'mediumDate' }}</p>
DatePipe-The DatePipe is utilized for date formatting. It enables us to present dates, in
styles like short, medium and full. For example we can utilize to exhibit the form of the
date.
{{ myDate | date: "short" }}
UpperCasePipe - This tool changes a text to capital letters. It requires a text, as input.
Gives back the text in all capital letters.
{{ myString | uppercase }}
LowerCasePipe - This particular pipe is utilized for changing a string to lowercase. Its
functionality resembles that of the UpperCasePipe except it changes the string to
lowercase instead.
{{ myString | lowercase }}
CurrencyPipe - This tool helps to convert numbers into currency values. You input a
number. It gives back a string showing the number, in the desired currency format.
{{ myNumber | currency: "USD" }}
EXPERIMENT 6: MORE ON COMPONENTS
Angular components are the building blocks of a UI in an Angular application. These
components are associated with a template and are a subset of directives.
Component Lifecycle

Angular components go through a series of stages, known as the component lifecycle. These
stages allow you to hook into specific moments when the component is created, updated, or
destroyed. The most commonly used lifecycle hooks are
ngOnChanges(): Called when input properties change. It's useful when the component
has @Input properties and you want to act on changes in those inputs.
ngOnInit(): Called once, right after the first ngOnChanges() call. This is ideal for
initialization logic, such as data fetching.

 ngDoCheck(): Called during every change detection cycle. It allows you to manually check for changes, but
you should use it sparingly as it can lead to performance issues.

 ngAfterViewInit(): Called after the component's view (and child views) have been initialized. It's useful for
actions that need access to the view, such as initializing 3rd-party libraries.

 ngOnDestroy(): Called right before Angular destroys the component. This is a good place to clean up any
resources, like unsubscribing from observables or removing event listeners.

Steps to create components:


ng generate component Parent
ng generate component Child

Parent to child Communication Purpose


Parent component.ts:
parentMessage: string = 'Hello from Parent Of Ramakrishna AIML A && B
Mean Stack Batches';
}
Parent.Component.html:
<app-child [rakiBhai]="parentMessage"></app-child>
Child.component .ts:
@Input() rakiBhai: string = '';
Child.component .html:
<h2>{{ rakiBhai }}</h2>

Output1:

parent works!

Hello from Parent Of Ramakrishna AIML A && B Mean


Stack Batches

Child To Parent communication:


Child.component .ts:
@Output() messageEmitter = new EventEmitter<string>(); // Create an
EventEmitter

sendMessage() {
this.messageEmitter.emit('Hello from Child!'); // Emit the event
with data
}

Parent.component.ts:
receiveMessage(message: string) {
this.message = message; // Handle the event and data from the
child
}
Parent.component.html:
<app-child (messageEmitter)="receiveMessage($event)"></app-child>
<!-- Listen to the event -->
<p>{{ message }}</p> <!-- Display the received message -->

OUTPUT:
Send Message to Parent
Rama krishna Dept of AIML from Child!

EXPERIMENT 7 :
BUILDING NESTED COMPONENTS

In Angular, nested components refer to components that are used inside the templates of
other components. These nested components allow you to build a hierarchical structure of
components that can be easily reused and composed into larger, more complex UIs.
Concept of Nested Components

Parent Component: A component that contains other components (child components)


within its template.

Child Component: A component that is nested inside another component.

This concept follows the principle of component composition in Angular, which means you
can create a tree structure of components to form complex UIs. Each component is isolated in
terms of functionality and has its own template, making the application modular and easier to
maintain.

Key Points About Nested Components:

Parent-Child Relationship: The ParentComponent is responsible for the higher-level


layout and structure, while the ChildComponent handles a smaller piece of functionality
(e.g., displaying data).

Isolation: Each component is isolated in terms of its logic and template. The
ChildComponent does not need to know about the parent, and the parent doesn't need
to know about the child.

Reusability: The ChildComponent can be used in different parts of the application by


including its tag in the template of other components.

Passing Data Between Parent and Child Components

In Angular, you can pass data from parent to child (or vice versa) using Input and Output
properties.

Parent to Child Communication (@Input())

To send data from the parent component to the child component, we use the @Input()
decorator.

Example of Parent to Child Communication


Child to Parent Communication (@Output() and EventEmitter)

To send data from the child component to the parent component, we use the @Output()
decorator along with EventEmitter.

Output:
parent works!

Hello from Parent Of Ramakrishna AIML A && B


Mean Stack Batches
Send Message to Parent

Parent Component
Send Message to Parent

Rama krishna Dept of AIML from Child!

Experiment 8:

Angular provides two ways to handle forms: Template-driven forms and Reactive forms.
Both approaches help collect, validate, and manage user input, but they differ in how they are
structured and used. Here’s an overview of Angular forms and the two approaches:

1. Template-driven Forms (using directives in the template)

Template-driven forms are simpler and more declarative. You define the form structure and
validation in the HTML template. Angular automatically handles the form creation and
validation.

Key Concepts:

NgForm Directive: This is automatically added to the form element, binding the form to
the Angular form model.

NgModel Directive: Used to bind form controls (like input elements) to model
properties.

Validation: You can use built-in directives like required, minlength, maxlength, and
pattern to perform validations.

Experiment 9:
Services and Dependency Injection:

1. Services in Angular

A service in Angular is a class that provides a specific functionality or feature to the


application. Typically, services are used to handle business logic, interact with APIs, manage
state, and share data across multiple components.
2. Dependency Injection (DI) in Angular

Dependency Injection is a design pattern used to implement Inversion of Control (IoC). In


Angular, DI is used to provide services or other objects that a class (typically a component or
another service) depends on. Instead of manually creating instances of services, Angular
automatically injects them when needed.

How DI works:

When a component or service needs a dependency (e.g., a service), Angular’s DI system


will automatically create an instance of that dependency and inject it into the constructor
of the dependent class.

The dependencies are provided through the Angular injector.

3. Using Services with Dependency Injection

When you want to use a service in a component, you simply inject it into the component’s
constructor. Angular will take care of providing the instance of the service.

4. Providing Services

In Angular, services are typically provided in one of two ways:

Root-level providers (provided in the root injector): This is the most common method,
especially when you need a singleton service across the entire application.

This is done using providedIn: 'root' in the @Injectable() decorator (as shown in
the DataService example).

Component-level providers (provided in the component’s injector): This creates a new


instance of the service per component or module.
Experiment:8
Angular Forms: Forms:
Angular provides two approaches for handling forms: Template-driven forms and
Reactive forms. Both approaches offer powerful validation and custom control support.
Reactive forms:
OUTPUT:

Experiment:9
Services
Services are classes that provide reusable functionality and can be injected into other
components, directives, or services.
Dependency Injection (DI) is the mechanism Angular uses to inject instances of
services into components or other services automatically.
Steps:
Create a Service.
Inject the Service into a Component using Angular's DI system.
ng generate service auto
First we have to import Service in App.Component.ts
import { AutoService } from './auto.service';

OUTPUT:
Experiment 10.
Retrieving Data Using HTTP
Retrieving Data Using HTTP, Navigation, and Routing are fundamental parts of
creating dynamic and interactive web applications. These concepts are widely used in
frameworks like Angular, React, and Vue, but let’s focus on Angular for this
explanation
hen developing a web application, it’s common to need data from a backend server or an
external API. Angular provides a built-in service called HttpClient to make HTTP requests
like GET, POST, PUT, and DELETE.
Here’s how you can retrieve data from an API using Angular’s HttpClient:
a. Set Up HTTP Client
Import the HttpClientModule: First, ensure that the HttpClientModule is imported in
your Angular app module (app.module.ts).
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [AppComponent],
imports: [HttpClientModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Inject HttpClient: In the service or component where you want to fetch data, inject
HttpClient and use it to make HTTP requests.
b. Making a GET Request
Here’s an example of a simple service that fetches data from an API using a GET request.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class DataService {

private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API

constructor(private http: HttpClient) { }

// Method to retrieve data from the API


getPosts(): Observable<any> {
return this.http.get(this.apiUrl);
}
}
http.get(): Makes an HTTP GET request to the provided URL.
Observable: HttpClient returns an Observable that will emit the result once the data is
fetched.
c. Subscribing to the Observable
In your component, subscribe to the Observable returned by the service to get the data:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-root',
template: `<ul><li *ngFor="let post of posts">{{ post.title }}</li></ul>`
})
export class AppComponent implements OnInit {
posts: any[] = [];

constructor(private dataService: DataService) {}

ngOnInit(): void {
// Subscribe to the observable to fetch data
this.dataService.getPosts().subscribe((data) => {
this.posts = data;
});
}
}
2. Navigation and Routing Basics
Angular provides Routing for navigation between different views in your application.
With routing, you can navigate between different components based on the URL.
a. Setting Up Routing
To use routing in Angular:
Import RouterModule: You need to configure the routes in the app-routing.module.ts.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PostComponent } from './post/post.component';

const routes: Routes = [


{ path: '', component: HomeComponent }, // Home route
{ path: 'post/:id', component: PostComponent }, // Dynamic route with parameter
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
The HomeComponent will be displayed when the user navigates to the root (/).
The PostComponent will display when the user visits /post/:id, where id is a dynamic
parameter (e.g., /post/1).
Using RouterLink for Navigation: Use routerLink in your template to navigate
between components.
<!-- In a component template -->
<a routerLink="/post/1">Go to Post 1</a>
b. Using the ActivatedRoute to Retrieve Route Parameters
To retrieve the dynamic parameter (id) from the route, use ActivatedRoute in your
component.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-post',
template: `<h2>Post ID: {{ postId }}</h2>`
})
export class PostComponent implements OnInit {
postId: number;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
// Retrieve the route parameter using ActivatedRoute
this.route.paramMap.subscribe(params => {
this.postId = +params.get('id'); // Get 'id' as a number
});
}
}
c. Navigating Programmatically with Router
You can also navigate programmatically in your component using Angular’s Router.
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-home',
template: `<button (click)="goToPost()">Go to Post 1</button>`
})
export class HomeComponent {

constructor(private router: Router) {}

goToPost() {
this.router.navigate(['/post', 1]); // Navigate to /post/1
}
}
3. Handling Navigation Events
You can listen to route changes and take action based on the navigation lifecycle using
Router.events.
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
selector: 'app-root',
template: `<h1>App</h1>`
})
export class AppComponent implements OnInit {

constructor(private router: Router) {}

ngOnInit(): void {
// Subscribe to router events
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
console.log('Navigation started:', event.url);
}
});
}
}
EXPERIMENT 11:
NODEJS INTRODUCTION:
Node.js is a powerful, open-source, cross-platform JavaScript runtime that allows you to
execute JavaScript code on the server-side. It’s built on the V8 JavaScript engine (the
same engine that powers Google Chrome), and it enables developers to use JavaScript to
build fast, scalable network applications.
Key Concepts of Node.js
JavaScript on the Server: Traditionally, JavaScript was used in the browser for client-
side programming. With Node.js, JavaScript can now be run on the server, allowing
developers to use a single programming language (JavaScript) throughout both the
frontend and backend.
Asynchronous, Event-Driven: One of the key features of Node.js is its non-blocking
nature. It’s designed around an event-driven architecture, which means it uses an
event loop to handle requests asynchronously. Instead of waiting for one task to finish
before starting another (which is typical in traditional, blocking code), Node.js can handle
multiple requests at once without blocking, making it highly efficient.
Single Threaded: Node.js operates on a single thread, which means it doesn't require
multiple threads or processes to handle multiple client requests. This is achieved through
asynchronous I/O operations (like reading files or handling network requests) and an
event-driven model.
Built-in Libraries: Node.js comes with a rich set of libraries (also called modules) for
performing common tasks like handling HTTP requests, interacting with the file system,
working with streams, and more. These modules can be imported using require().
Why Use Node.js?
High Performance: Node.js is known for its fast performance because it uses the V8
engine, which compiles JavaScript to native machine code.
Scalability: Since it uses non-blocking I/O operations, Node.js can handle thousands of
concurrent connections with minimal overhead.
Real-Time Applications: Node.js is well-suited for applications that require real-time
interaction, such as chat applications, online gaming, live updates, or anything that
requires handling many concurrent requests with low latency.
Unified Language: By using JavaScript for both the client and server-side code,
developers can write full-stack applications using a single language, which simplifies the
development process and reduces the context switching between languages.
NPM (Node Package Manager): Node.js has an extensive package ecosystem called
NPM. It allows developers to easily install, share, and manage libraries and tools for
Node.js applications. There are thousands of open-source packages available through
NPM to simplify development.
Basic Example of a Node.js Application
Create a file server.js:
const http = require('http'); // Import the built-in HTTP module

const server = http.createServer((req, res) => {


res.statusCode = 200; // Set HTTP status code
res.setHeader('Content-Type', 'text/plain'); // Set content type to plain text
res.end('Hello, World!'); // Send response to the client
});

server.listen(3000, '127.0.0.1', () => {


console.log('Server running at http://127.0.0.1:3000/');
});
Run the application:
Open a terminal or command prompt.
Navigate to the directory where server.js is located.
Run the following command
node server.js
Access the server:
Open a web browser and navigate to http://127.0.0.1:3000/.
You should see the message: Hello, World!
Key Features of Node.js
Non-blocking, Asynchronous I/O:
Most operations like reading files, querying a database, or making network requests are
handled asynchronously in Node.js.
This helps prevent blocking, allowing Node.js to handle many requests concurrently.
Event Loop:
The event loop is the mechanism that handles the asynchronous code. It works by
placing functions to be executed in the event queue, and the event loop executes them
one by one as soon as the stack is empty.
NPM (Node Package Manager):
NPM is the largest ecosystem of open-source libraries and tools. It’s an essential part of
Node.js development, making it easy to install dependencies, manage packages, and use
third-party libraries.
Built-in Modules:
Node.js has many built-in modules to help with tasks like handling HTTP requests (http),
reading and writing files (fs), working with streams (stream), and more.
Express.js (Framework for Node.js):
While Node.js itself is just a runtime, you’ll often use frameworks like Express.js to
simplify building web applications. Express makes routing, middleware, and request
handling more straightforward.
Example with Express.js
Express.js is a minimal web framework that runs on top of Node.js, simplifying web
server development.
Install Express:
First, you’ll need to initialize a Node.js project by running npm init in your project folder.

Then, install Express:


npm install express
Create a basic Express server:
const express = require('express');
const app = express();

app.get('/', (req, res) => {


res.send('Hello, Express!');
});

app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
Run the server:
node app.js
Access the server:
Visit http://localhost:3000 in your browser, and you should see Hello, Express!
Common Use Cases for Node.js
Real-Time Applications: Chat apps, live updates, collaborative tools (like Google Docs).
API Servers: Build RESTful APIs or GraphQL APIs.
Single Page Applications (SPAs): Serve dynamic web applications that interact with a
backend.
Microservices: Node.js is lightweight and works well for building scalable microservices
architectures.
Web Servers: Handle HTTP requests and serve web pages, using frameworks like
Express.
EXPERIMENT 12:
Exploring Language additions to the v8 javascript engine
The V8 JavaScript engine is continuously evolving, and with it, JavaScript itself is being
updated with new features and capabilities. V8 is the engine used by Google Chrome and
Node.js, and its updates often introduce new language features, optimizations, and tools
to make JavaScript faster and more powerful.
Here are some recent and upcoming language additions and features that have been
added to JavaScript via V8:
1. Top-level Await (ECMAScript 2022)
What it is: This feature allows you to use await at the top level of a module, without
needing to wrap it in an async function. Prior to this, await could only be used within
async functions, but now you can directly use it at the module level.
Why it's useful: Makes asynchronous programming in modules simpler and cleaner.
// With Top-level await
const data = await fetchData();
console.log(data);
Supported in V8: Introduced in V8 10.2 (Node.js 16.x).
Logical Assignment Operators (ECMAScript 2021)
What it is: JavaScript added three new logical assignment operators: &&=, ||=, and ??=.
These operators combine logical operations with assignment.
Why it's useful: Simplifies common patterns where you check a value before
assignment.
let a = null;
a ||= 'default'; // equivalent to if (!a) a = 'default';
console.log(a); // 'default'
WeakRefs (ECMAScript 2021)
What it is: WeakRefs allow you to hold a weak reference to an object. This means that
the garbage collector can collect the object even if it has a reference in a WeakRef.
Why it's useful: Useful for cases where you want to hold references to objects, but
don't want those references to prevent garbage collection (like in caching or lifecycle
management).
let obj = { name: 'Weak Reference' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // Returns the object


obj = null; // Now the object can be garbage collected
EXPERIMENT 13:
Understanding Node.js
Node.js is a powerful, open-source, server-side runtime environment built on Chrome's
V8 JavaScript engine. It enables developers to use JavaScript for both front-end and back-
end development, which was traditionally limited to just the front-end. Here’s a
breakdown of key concepts to help you understand it better:
1. JavaScript on the Server:
Node.js allows you to run JavaScript code on the server-side, which means you can use
JavaScript not just for client-side scripting in web browsers, but also for handling server
requests, accessing databases, and processing data.
2. Event-Driven Architecture:
Node.js is built around an event-driven, non-blocking I/O (input/output) model. This
means that Node.js can handle many operations simultaneously (like handling multiple
network requests) without waiting for any of them to complete before moving on to the
next one. This makes it ideal for I/O-heavy applications such as web servers, real-time
services, and data streaming.
3. Non-Blocking I/O:
In traditional server-side environments (like PHP or Java), I/O operations like reading from
a database or a file can block the entire process. In contrast, Node.js allows these
operations to run asynchronously, which means they don't block the execution of other
code. As a result, Node.js can handle many operations concurrently, which makes it
highly scalable.
4. Single-Threaded:
Node.js uses a single-threaded event loop. This means it doesn't rely on multiple threads
to handle concurrent requests. Instead, the event loop is responsible for managing the
execution of multiple operations asynchronously. This is a key part of Node’s non-
blocking, high-performance model.
5. npm (Node Package Manager):
Node.js has a robust ecosystem of libraries and tools thanks to npm. npm is the default
package manager for Node.js, and it provides access to thousands of reusable packages
and modules. These modules allow developers to add functionality (like database
connectivity, authentication, etc.) without having to write everything from scratch.
6. Use Cases of Node.js:
Real-Time Applications: Node.js is great for applications like chat applications,
collaborative tools, and live data feeds, where low latency and fast responses are
essential.
APIs and Web Servers: Many modern web apps use Node.js for building RESTful APIs
or handling HTTP requests due to its fast processing and non-blocking capabilities.
Microservices: Its scalability makes it ideal for a microservices architecture, where
different services can communicate over the network.
Streaming Applications: Node.js works well for applications that require real-time
streaming of data, like video or music streaming services.
Example of a Basic Node.js Server:
const http = require('http'); // Import the HTTP module

const server = http.createServer((req, res) => {


res.statusCode = 200; // Set the HTTP status code
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, Node.js!\n'); // Send a response
});

server.listen(3000, '127.0.0.1', () => {


console.log('Server running at http://127.0.0.1:3000/');
});

Experiment 14: Http and File System:


1. HTTP Module (Creating a Simple Server)
The http module allows you to create an HTTP server and handle requests.

Basic Server Creation


OUTPUT:

2. File System Module (fs)


The fs module allows you to work with the file system, including reading, writing, and
deleting files.

OUTPUT:
Experiment 15:
1. Buffers (Handling Binary Data)
Buffers are used to handle raw binary data directly in memory, making them useful for
working with files, network sockets, and streams.

Buffers store binary data and can be converted to a string using .toString().

2. Streams (Handling Large Data Efficiently)


Streams allow you to process data in chunks instead of loading everything into memory,
making them ideal for handling large files or network requests.

Types of Streams

Readable (e.g., reading a file)

Writable (e.g., writing to a file)

Duplex (both readable & writable, e.g., sockets)

Transform (modifies data, e.g., compression)

Example: Reading a File Using Streams


Output:

3. Events (Event-Driven Programming)


Node.js uses the EventEmitter module to handle custom events asynchronously.
Example: Creating an EventEmitter

Experiment:16: Steps to Install Express in a Node Project:


Step 1: Open the terminal or command prompt on your computer, and navigate to the root directory
of your project.
cd path-to-your-porject

Step 2: Initialize a NodeJS project using the following command.

npm init –y

Step 3: Install the express package using the following command.


npm install express
Project Structure:
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