PRACTICAL GUIDE • 2024
Web & [Link]
Practical Programs
AngularJS • [Link] • MongoDB • REST API
Email Validation Form Validation AngularJS Binding AngularJS Routing
AngularJS Service ng-repeat JSON Table $http Service
EventEmitter Stream Program REST API MongoDB CRUD
12 Complete Programs with Source Code
Web & [Link] Practical Programs Page 2
Table of Contents
1
. Email Validation HTML + JavaScript
2
. Form Validation HTML + JavaScript
3
. AngularJS Data Binding AngularJS 1.x
4
. AngularJS Form Validation AngularJS 1.x
5
. AngularJS Routing AngularJS + ngRoute
6
. AngularJS Service AngularJS 1.x
7
. AngularJS ng-repeat AngularJS 1.x
8
. AngularJS JSON Table AngularJS 1.x
9
. AngularJS $http Service AngularJS 1.x
1
0
. EventEmitter [Link]
1
1
. Stream Program [Link]
1
2
. REST API Program [Link] + Express
1
3
. MongoDB CRUD Operations [Link] + Mongoose
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 3
1 Email Validation
Validate email addresses using regex in pure JavaScript.
■ HTML File — [Link]
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
<style>
body { font-family: Arial, sans-serif; padding: 30px; }
input { padding: 8px; width: 280px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 8px 16px; background: #6366F1; color: white; border: none; border-radius: 4px; }
#msg { margin-top: 10px; font-size: 14px; }
.valid { color: green; }
.invalid { color: red; }
</style>
</head>
<body>
<h2>Email Validation</h2>
<input type="text" id="email" placeholder="Enter email address" />
<button onclick="validateEmail()">Validate</button>
<p id="msg"></p>
<script>
function validateEmail() {
const email = [Link]("email").value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const msg = [Link]("msg");
if ([Link](email)) {
[Link] = "✔ Valid email address!";
[Link] = "valid";
} else {
[Link] = "✖ Invalid email address!";
[Link] = "invalid";
}
}
</script>
</body>
</html>
■ Regex pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ — checks for user@[Link] format.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 4
2 Form Validation
Client-side form validation with multiple field checks.
■ HTML File — [Link]
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
body { font-family: Arial; padding: 30px; max-width: 400px; }
input { display:block; width:100%; padding:8px; margin:6px 0 2px; box-sizing:border-box; }
button { padding:10px 24px; background:#10B981; color:#fff; border:none; border-radius:4px; }
.err { color:red; font-size:12px; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<input type="text" id="name" placeholder="Full Name" />
<span class="err" id="nameErr"></span>
<input type="email" id="email" placeholder="Email" />
<span class="err" id="emailErr"></span>
<input type="password" id="pass" placeholder="Password (min 6 chars)" />
<span class="err" id="passErr"></span>
<button onclick="validate()">Submit</button>
<p id="success" style="color:green"></p>
<script>
function validate() {
let valid = true;
const name = [Link]("name").[Link]();
const email = [Link]("email").[Link]();
const pass = [Link]("pass").value;
[Link]("nameErr").textContent = "";
[Link]("emailErr").textContent = "";
[Link]("passErr").textContent = "";
if (!name) { [Link]("nameErr").textContent = "Name is required"; valid=false;
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
[Link]("emailErr").textContent = "Invalid email"; valid=false; }
if ([Link] < 6) { [Link]("passErr").textContent = "Min 6 characters"; valid
if (valid) [Link]("success").textContent = "Form submitted successfully!";
}
</script>
</body>
</html>
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 5
3 AngularJS Data Binding
Two-way data binding with ng-model and real-time updates.
<!DOCTYPE html>
<html ng-app="bindApp">
<head>
<title>AngularJS Data Binding</title>
<script src="[Link]
<style>
body { font-family: Arial; padding: 30px; }
.box { background:#f0f4ff; padding:16px; border-radius:8px; margin-top:12px; }
</style>
</head>
<body ng-controller="BindCtrl">
<h2>AngularJS Data Binding</h2>
<label>Enter your name:</label>
<input type="text" ng-model="username" placeholder="Type here..." />
<div class="box">
<p><strong>Hello, {{ username || "stranger" }}!</strong></p>
<p>Character count: {{ [Link] }}</p>
</div>
<script>
[Link]("bindApp", [])
.controller("BindCtrl", function($scope) {
$[Link] = "";
});
</script>
</body>
</html>
■ ng-model creates a two-way binding between the input and $[Link] — changes are reflected instantly.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 6
4 AngularJS Form Validation
Built-in AngularJS directives for form field validation.
<!DOCTYPE html>
<html ng-app="formApp">
<head>
<title>AngularJS Form Validation</title>
<script src="[Link]
<style>
body { font-family: Arial; padding: 30px; max-width: 420px; }
input { display:block; width:100%; padding:8px; margin:6px 0; box-sizing:border-box; }
.error { color:red; font-size:12px; }
button { padding:10px 20px; background:#6366F1; color:#fff; border:none; border-radius:4px; cursor:
</style>
</head>
<body ng-controller="FormCtrl">
<h2>AngularJS Form Validation</h2>
<form name="myForm" novalidate>
<label>Name:</label>
<input type="text" name="uname" ng-model="[Link]" required minlength="3" />
<span class="error" ng-show="[Link].$dirty && [Link].$invalid">
Name is required (min 3 chars)
</span>
<label>Email:</label>
<input type="email" name="uemail" ng-model="[Link]" required />
<span class="error" ng-show="[Link].$dirty && [Link].$invalid">
Enter a valid email
</span>
<button ng-click="submit()" ng-disabled="myForm.$invalid">Submit</button>
<p ng-show="submitted" style="color:green">Form Submitted!</p>
</form>
<script>
[Link]("formApp", [])
.controller("FormCtrl", function($scope) {
$[Link] = {};
$[Link] = function() { $[Link] = true; };
});
</script>
</body>
</html>
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 7
5 AngularJS Routing
SPA navigation using ngRoute with multiple views.
<!DOCTYPE html>
<html ng-app="routeApp">
<head>
<title>AngularJS Routing</title>
<script src="[Link]
<script src="[Link]
<style>
body { font-family: Arial; padding: 20px; }
nav a { margin-right: 12px; color: #6366F1; text-decoration: none; font-weight: bold; }
.view { margin-top: 20px; padding: 20px; background: #f0f4ff; border-radius: 8px; }
</style>
</head>
<body>
<h2>AngularJS Routing</h2>
<nav>
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</nav>
<div class="view" ng-view></div>
<script>
const app = [Link]("routeApp", ["ngRoute"]);
[Link](function($routeProvider) {
$routeProvider
.when("/home", { template: "<h3>Home Page</h3><p>Welcome!</p>" })
.when("/about", { template: "<h3>About Page</h3><p>We are awesome.</p>" })
.when("/contact", { template: "<h3>Contact</h3><p>Email: info@[Link]</p>" })
.otherwise({ redirectTo: "/home" });
});
</script>
</body>
</html>
■ ngRoute maps URL hash fragments (#/home) to views rendered in the ng-view directive.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 8
6 AngularJS Service
Reusable logic encapsulated in a custom AngularJS service.
<!DOCTYPE html>
<html ng-app="serviceApp">
<head>
<title>AngularJS Service</title>
<script src="[Link]
</head>
<body ng-controller="MainCtrl" style="font-family:Arial;padding:30px;">
<h2>AngularJS Service</h2>
<p>Sum of [1, 2, 3, 4, 5] = <strong>{{ result }}</strong></p>
<p>Max of [1, 2, 3, 4, 5] = <strong>{{ maxVal }}</strong></p>
<script>
const app = [Link]("serviceApp", []);
// Custom service
[Link]("MathService", function() {
[Link] = function(arr) { return [Link]((a, b) => a + b, 0); };
[Link] = function(arr) { return [Link](...arr); };
});
// Controller using the service
[Link]("MainCtrl", function($scope, MathService) {
const nums = [1, 2, 3, 4, 5];
$[Link] = [Link](nums);
$[Link] = [Link](nums);
});
</script>
</body>
</html>
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 9
7 AngularJS ng-repeat
Render lists and collections dynamically with ng-repeat.
<!DOCTYPE html>
<html ng-app="repeatApp">
<head>
<title>AngularJS ng-repeat</title>
<script src="[Link]
<style>
body { font-family: Arial; padding: 30px; }
ul { list-style: none; padding: 0; }
li { padding: 10px; margin: 5px 0; background: #f0f4ff; border-left: 4px solid #6366F1; border-ra
</style>
</head>
<body ng-controller="RepeatCtrl">
<h2>Students List (ng-repeat)</h2>
<ul>
<li ng-repeat="student in students">
<strong>{{ $index + 1 }}. {{ [Link] }}</strong> — {{ [Link] }}
</li>
</ul>
<p>Total students: {{ [Link] }}</p>
<script>
[Link]("repeatApp", [])
.controller("RepeatCtrl", function($scope) {
$[Link] = [
{ name: "Alice", grade: "A" },
{ name: "Bob", grade: "B+" },
{ name: "Charlie", grade: "A-" },
{ name: "Diana", grade: "A+" },
];
});
</script>
</body>
</html>
■ $index gives the 0-based position. ng-repeat creates a child scope for each item.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 10
8 AngularJS JSON Table Display
Display JSON array data as a formatted HTML table.
<!DOCTYPE html>
<html ng-app="tableApp">
<head>
<title>AngularJS JSON Table</title>
<script src="[Link]
<style>
body { font-family: Arial; padding: 30px; }
table { border-collapse: collapse; width: 100%; }
th { background: #6366F1; color: #fff; padding: 10px; text-align: left; }
td { padding: 9px 10px; border-bottom: 1px solid #e2e8f0; }
tr:nth-child(even) { background: #f8fafc; }
</style>
</head>
<body ng-controller="TableCtrl">
<h2>Employee Table</h2>
<table>
<tr><th>#</th><th>Name</th><th>Department</th><th>Salary</th></tr>
<tr ng-repeat="emp in employees">
<td>{{ $index + 1 }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] | currency }}</td>
</tr>
</table>
<script>
[Link]("tableApp", [])
.controller("TableCtrl", function($scope) {
$[Link] = [
{ name:"Alice", dept:"Engineering", salary:85000 },
{ name:"Bob", dept:"Marketing", salary:65000 },
{ name:"Charlie", dept:"Design", salary:72000 },
];
});
</script>
</body>
</html>
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 11
9 AngularJS $http Service
Fetch data from an API endpoint using the built-in $http service.
<!DOCTYPE html>
<html ng-app="httpApp">
<head>
<title>AngularJS $http</title>
<script src="[Link]
<style>
body { font-family: Arial; padding: 30px; }
.card { border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin:8px 0; }
.err { color: red; }
</style>
</head>
<body ng-controller="HttpCtrl">
<h2>Posts from JSONPlaceholder API</h2>
<button ng-click="loadPosts()">Load Posts</button>
<p ng-show="loading">Loading...</p>
<p class="err" ng-show="error">{{ error }}</p>
<div class="card" ng-repeat="post in posts | limitTo:5">
<strong>{{ [Link] }}</strong>
<p>{{ [Link] }}</p>
</div>
<script>
[Link]("httpApp", [])
.controller("HttpCtrl", function($scope, $http) {
$[Link] = [];
$[Link] = false;
$[Link] = null;
$[Link] = function() {
$[Link] = true;
$[Link]("[Link]
.then(function(res) { $[Link] = [Link]; })
.catch(function(err) { $[Link] = "Failed to fetch data"; })
.finally(function() { $[Link] = false; });
};
});
</script>
</body>
</html>
■ $http returns a promise. .then() handles success, .catch() handles errors, .finally() always runs.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 12
10 EventEmitter
[Link] built-in EventEmitter for event-driven programming.
■ File: [Link] → run with: node [Link]
// [Link]
const EventEmitter = require('events');
// Create an event emitter instance
const emitter = new EventEmitter();
// Register event listeners
[Link]('greet', (name) => {
[Link](`Hello, ${name}!`);
});
[Link]('greet', (name) => {
[Link](`Welcome to [Link], ${name}!`);
});
[Link]('error', (err) => {
[Link]('Error occurred:', [Link]);
});
// Emit events
[Link]('greet', 'Alice');
[Link]('greet', 'Bob');
[Link]('error', new Error('Something went wrong!'));
// One-time listener
[Link]('data', (val) => {
[Link]('Received data (once):', val);
});
[Link]('data', 42);
[Link]('data', 99); // This will NOT trigger the listener
[Link]('Listener count for greet:', [Link]('greet'));
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 13
11 Stream Program
Read and write files efficiently using [Link] Readable/Writable streams.
■ File: [Link] → run with: node [Link]
// [Link]
const fs = require('fs');
const path = require('path');
// ■■ Write a file using a Writable stream ■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const writer = [Link]('[Link]');
[Link]('Line 1: Hello from [Link] Streams!\n');
[Link]('Line 2: Streams are memory-efficient.\n');
[Link]('Line 3: Great for large files.\n');
[Link]();
[Link]('finish', () => {
[Link]('Write complete. Now reading...');
// ■■ Read the file using a Readable stream ■■■■■■■■■■■■■■■■■■■■■■■■■
const reader = [Link]('[Link]', { encoding: 'utf8' });
[Link]('data', (chunk) => {
[Link]('-- Chunk received --');
[Link](chunk);
});
[Link]('end', () => [Link]('\nStream reading complete!'));
[Link]('error', (err) => [Link]('Read error:', err));
});
// ■■ Pipe: read [Link] and copy to [Link] ■■■■■■■■■■■■■■■■■■■■■■■
// [Link]('[Link]').pipe([Link]('[Link]'));
■ pipe() is the easiest way to connect streams — it handles backpressure automatically.
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 14
12 REST API Program
Full CRUD REST API with [Link] and in-memory data store.
■ Install: npm install express | Run: node [Link]
// [Link]
const express = require('express');
const app = express();
[Link]([Link]());
let users = [
{ id: 1, name: 'Alice', email: 'alice@[Link]' },
{ id: 2, name: 'Bob', email: 'bob@[Link]' },
];
let nextId = 3;
// GET /users — list all
[Link]('/users', (req, res) => {
[Link](users);
});
// GET /users/:id — get one
[Link]('/users/:id', (req, res) => {
const user = [Link](u => [Link] === parseInt([Link]));
user ? [Link](user) : [Link](404).json({ error: 'Not found' });
});
// POST /users — create
[Link]('/users', (req, res) => {
const { name, email } = [Link];
if (!name || !email) return [Link](400).json({ error: 'name and email required' });
const newUser = { id: nextId++, name, email };
[Link](newUser);
[Link](201).json(newUser);
});
// PUT /users/:id — update
[Link]('/users/:id', (req, res) => {
const idx = [Link](u => [Link] === parseInt([Link]));
if (idx === -1) return [Link](404).json({ error: 'Not found' });
users[idx] = { ...users[idx], ...[Link] };
[Link](users[idx]);
});
// DELETE /users/:id — remove
[Link]('/users/:id', (req, res) => {
users = [Link](u => [Link] !== parseInt([Link]));
[Link]({ message: 'User deleted' });
});
[Link](3000, () => [Link]('Server running on [Link]
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 15
13 MongoDB CRUD Operations
Insert, Find, Update and Delete documents using Mongoose ODM.
■ Install: npm install mongoose | Run: node [Link]
// [Link]
const mongoose = require('mongoose');
// ■■ Connect ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
[Link]('mongodb://localhost:27017/practicalDB')
.then(() => [Link]('MongoDB connected'))
.catch(err => [Link](err));
// ■■ Schema & Model ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const studentSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
grade: { type: String, default: 'A' },
createdAt: { type: Date, default: [Link] },
});
const Student = [Link]('Student', studentSchema);
async function run() {
// ■■ INSERT (Create) ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const s1 = await [Link]({ name:'Alice', email:'alice@[Link]', grade:'A+' });
const s2 = await [Link]({ name:'Bob', email:'bob@[Link]', grade:'B' });
[Link]('Inserted:', [Link], [Link]);
// ■■ FIND (Read) ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const all = await [Link]();
[Link]('All students:', [Link](s => [Link]));
const one = await [Link]({ name: 'Alice' });
[Link]('Found:', [Link], [Link]);
// ■■ UPDATE ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
await [Link]({ name: 'Bob' }, { $set: { grade: 'A' } });
const updated = await [Link]({ name: 'Bob' });
[Link]('Updated Bob grade:', [Link]);
// ■■ DELETE ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
await [Link]({ name: 'Alice' });
[Link]('Deleted Alice');
const remaining = await [Link]();
[Link]('Remaining:', [Link](s => [Link]));
[Link]();
}
run().catch([Link]);
AngularJS • [Link] • MongoDB • REST API
Web & [Link] Practical Programs Page 16
MongoDB Quick Reference
Operation Method Description
Insert one [Link]({}) Insert a single document
Insert many [Link]([…]) Insert multiple documents
Find all [Link]() Retrieve all documents
Find one [Link]({ field: val }) Retrieve first match
Find by ID [Link](id) Retrieve by _id
Update one [Link](filter, {$set:…}) Update first matching doc
Update many [Link](filter, {$set:…}) Update all matching docs
Delete one [Link](filter) Delete first matching doc
Delete many [Link](filter) Delete all matching docs
AngularJS • [Link] • MongoDB • REST API