How the Frontend and Backend Communicate

Everything in a MEAN Stack application flows through the communication channel between Angular (the frontend) and Express (the backend). Understanding this communication in depth — the HTTP protocol, REST conventions, JSON payloads, status codes, request headers, and error handling — is the most important cross-cutting skill in full-stack development. A bug at this boundary is one of the most common sources of confusion for beginners: the backend sends data and the frontend does not receive it, or the frontend sends a request and the backend misreads it. In this lesson you will thoroughly understand how HTTP works, how REST organises API endpoints, and how Angular and Express exchange data in both the happy path and the error path.

HTTP Fundamentals #

HTTP Status Codes Used in REST APIs #

Common Request and Response Headers #

Basic Example — A Complete Request/Response Cycle #

// ── Express — consistent response format ──────────────────────────────────

// backend/src/utils/response.js
const sendSuccess = (res, data, statusCode = 200) => {
    res.status(statusCode).json({ success: true, data });
};

const sendError = (res, message, statusCode = 400, errors = []) => {
    res.status(statusCode).json({ success: false, message, errors });
};

module.exports = { sendSuccess, sendError };

// backend/src/routes/tasks.js
const express            = require('express');
const router             = express.Router();
const { sendSuccess, sendError } = require('../utils/response');

// GET /api/tasks — get all tasks
router.get('/', async (req, res) => {
    try {
        const tasks = await Task.find().select('-__v').lean();
        sendSuccess(res, tasks);
    } catch (err) {
        sendError(res, 'Failed to fetch tasks', 500);
    }
});

// POST /api/tasks — create a task
router.post('/', async (req, res) => {
    try {
        const { title, priority } = req.body;

        if (!title) return sendError(res, 'Title is required', 400);

        const task = await Task.create({ title, priority });
        sendSuccess(res, task, 201);
    } catch (err) {
        sendError(res, 'Failed to create task', 500);
    }
});

// GET /api/tasks/:id — get one task
router.get('/:id', async (req, res) => {
    try {
        const task = await Task.findById(req.params.id).lean();
        if (!task) return sendError(res, 'Task not found', 404);
        sendSuccess(res, task);
    } catch (err) {
        sendError(res, 'Invalid task ID', 400);
    }
});

// PUT /api/tasks/:id — update a task
router.put('/:id', async (req, res) => {
    try {
        const task = await Task.findByIdAndUpdate(
            req.params.id,
            req.body,
            { new: true, runValidators: true }
        );
        if (!task) return sendError(res, 'Task not found', 404);
        sendSuccess(res, task);
    } catch (err) {
        sendError(res, 'Failed to update task', 500);
    }
});

// DELETE /api/tasks/:id — delete a task
router.delete('/:id', async (req, res) => {
    try {
        const task = await Task.findByIdAndDelete(req.params.id);
        if (!task) return sendError(res, 'Task not found', 404);
        res.status(204).send();   // 204 No Content — no body
    } catch (err) {
        sendError(res, 'Failed to delete task', 500);
    }
});

module.exports = router;

// ── Angular — task service calling the API ────────────────────────────────

// frontend/src/app/core/services/task.service.ts
import { Injectable }          from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError }        from 'rxjs';
import { catchError, map }               from 'rxjs/operators';

export interface Task {
    _id:       string;
    title:     string;
    priority:  'low' | 'medium' | 'high';
    completed: boolean;
    createdAt: string;
}

interface ApiResponse<T> {
    success: boolean;
    data:    T;
    message?: string;
}

@Injectable({ providedIn: 'root' })
export class TaskService {
    private apiUrl = 'http://localhost:3000/api/tasks';

    constructor(private http: HttpClient) {}

    getAll(): Observable<Task[]> {
        return this.http.get<ApiResponse<Task[]>>(this.apiUrl).pipe(
            map(res => res.data),
            catchError(this.handleError)
        );
    }

    getById(id: string): Observable<Task> {
        return this.http.get<ApiResponse<Task>>(`${this.apiUrl}/${id}`).pipe(
            map(res => res.data),
            catchError(this.handleError)
        );
    }

    create(task: Partial<Task>): Observable<Task> {
        return this.http.post<ApiResponse<Task>>(this.apiUrl, task).pipe(
            map(res => res.data),
            catchError(this.handleError)
        );
    }

    update(id: string, changes: Partial<Task>): Observable<Task> {
        return this.http.put<ApiResponse<Task>>(`${this.apiUrl}/${id}`, changes).pipe(
            map(res => res.data),
            catchError(this.handleError)
        );
    }

    delete(id: string): Observable<void> {
        return this.http.delete<void>(`${this.apiUrl}/${id}`).pipe(
            catchError(this.handleError)
        );
    }

    private handleError(error: HttpErrorResponse): Observable<never> {
        const message = error.error?.message ?? 'An unexpected error occurred';
        console.error('API Error:', error.status, message);
        return throwError(() => new Error(message));
    }
}

How It Works #

Step 1 — Angular’s HttpClient Sends an HTTP Request #

When a component calls taskService.getAll(), Angular’s HttpClient creates an HTTP GET request to http://localhost:3000/api/tasks. The request travels through the browser’s networking stack. Angular intercepts are applied (for adding auth headers). The browser checks CORS permissions, then sends the request to the Express server.

Step 2 — Express Router Matches the Route #

Express receives the request and passes it through the middleware stack — body parsing, CORS headers, authentication checks — in the order they were registered. The router then matches the URL path and HTTP method to the correct handler function. URL parameters like :id are parsed and available as req.params.id.

Step 3 — The Controller Queries MongoDB #

The route handler (controller) reads data from req.params, req.query, req.body, and req.user (if authenticated). It calls Mongoose methods to query or modify the database. Mongoose communicates with MongoDB over a persistent connection and returns JavaScript objects. The controller wraps the result in the standard response envelope and calls res.json().

Step 4 — Angular’s Observable Receives the Response #

The browser receives the HTTP response. HttpClient parses the JSON body automatically. The RxJS pipe operators transform the response — map(res => res.data) unwraps the envelope. The Observable emits the data to the subscribing component, which updates its properties and triggers Angular’s change detection to re-render the template.

Step 5 — Errors Are Caught at Every Layer #

If Express throws or the database fails, the try/catch sends a structured error response with the appropriate status code. Angular’s catchError operator intercepts HTTP error responses (4xx/5xx) and converts them to a readable error message. The component’s error handler displays user-friendly feedback rather than crashing.

Real-World Example: Postman Request Collection #

// Example request/response pairs — test these in Postman

// GET /api/tasks
// Response 200:
{
  "success": true,
  "data": [
    { "_id": "64a1f2...", "title": "Learn Angular", "completed": false },
    { "_id": "64a1f3...", "title": "Build REST API", "completed": true }
  ]
}

// POST /api/tasks — body: { "title": "Deploy to production", "priority": "high" }
// Response 201:
{
  "success": true,
  "data": {
    "_id": "64a1f4...",
    "title": "Deploy to production",
    "priority": "high",
    "completed": false,
    "createdAt": "2026-01-15T10:30:00.000Z"
  }
}

// GET /api/tasks/invalid-id
// Response 400:
{
  "success": false,
  "message": "Invalid task ID",
  "errors": []
}

// GET /api/tasks/64a1f9999999999999999999
// Response 404:
{
  "success": false,
  "message": "Task not found",
  "errors": []
}

Common Mistakes #

Mistake 1 — Using wrong HTTP method for the operation #

❌ Wrong — using GET to delete (changes state via query parameter):

app.get('/api/tasks/delete', async (req, res) => {
    await Task.findByIdAndDelete(req.query.id);  // GET should not have side effects
    res.json({ success: true });
});

✅ Correct — use the semantically correct HTTP method:

app.delete('/api/tasks/:id', async (req, res) => {
    await Task.findByIdAndDelete(req.params.id);
    res.status(204).send();
});

Mistake 2 — Not subscribing to Angular HttpClient Observable #

❌ Wrong — call never executes because Observable is cold:

loadTasks() {
    this.taskService.getAll();  // returns Observable — but nobody subscribed!
    // tasks array never populated
}

✅ Correct — subscribe or use async pipe:

// Option 1: subscribe
loadTasks() {
    this.taskService.getAll().subscribe(tasks => this.tasks = tasks);
}
// Option 2: async pipe in template (preferred)
tasks$ = this.taskService.getAll();
// template: *ngFor="let t of tasks$ | async"

Mistake 3 — Sending 200 for a created resource #

❌ Wrong — 200 OK for a POST that creates a new resource:

app.post('/api/tasks', async (req, res) => {
    const task = await Task.create(req.body);
    res.status(200).json({ success: true, data: task });  // should be 201
});

✅ Correct — use 201 Created to signal a new resource was created:

res.status(201).json({ success: true, data: task });

▶ Try It Yourself

Quick Reference #