Mastering Angular and Express.js for Full-Stack Web Development

Angular and Express.js are powerful frameworks that, when combined, enable developers to build scalable, high-performance full-stack applications. In this guide, we'll go step by step through setting up Angular for the frontend and Express.js for the backend, integrating them, and deploying a full-stack web application.

📌 Step 1: Understanding Angular and Express.js

🔹 Angular: A TypeScript-based frontend framework for building dynamic single-page applications (SPAs).
🔹 Express.js: A minimalist and flexible Node.js framework for building backend REST APIs.

✨ Why Use Angular with Express.js?
✅ Angular ensures a responsive, modular frontend.
✅ Express.js simplifies backend development with Node.js.
✅ Full control over frontend-backend communication via REST APIs.

📌 Step 2: Setting Up the Development Environment

✅ Install Angular CLI (Frontend)

npm install -g @angular/cli
ng new angular-app
cd angular-app
ng serve

✅ Install Express.js (Backend)

mkdir express-backend && cd express-backend
npm init -y
npm install express cors body-parser mongoose dotenv

📌 Step 3: Creating a Backend with Express.js

🔹 1. Setup Express Server (server.js)

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

app.listen(5000, () => console.log('Server running on port 5000'));

🔹 2. Define API Routes (routes/users.js)

const express = require('express');
const router = express.Router();

let users = [];

router.get('/users', (req, res) => res.json(users));

router.post('/users', (req, res) => {
    const user = req.body;
    users.push(user);
    res.status(201).json(user);
});

module.exports = router;

🔹 3. Connect Routes to Server (server.js)

const userRoutes = require('./routes/users');
app.use('/api', userRoutes);

📌 Step 4: Creating the Frontend with Angular

🔹 1. Generate Components for Users

ng generate component users

🔹 2. Setup Angular Service for API Calls (users.service.ts)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  private apiUrl = 'http://localhost:5000/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<any> {
    return this.http.get(this.apiUrl);
  }

  addUser(user: any): Observable<any> {
    return this.http.post(this.apiUrl, user);
  }
}

🔹 3. Integrate API in Component (users.component.ts)

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../users.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
})
export class UsersComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UsersService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => this.users = data);
  }

  addUser(name: string) {
    const user = { name };
    this.userService.addUser(user).subscribe(() => this.ngOnInit());
  }
}

🔹 4. Add UI in users.component.html

<h2>Users List</h2>
<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

<input #name type="text" placeholder="Enter Name" />
<button (click)="addUser(name.value)">Add User</button>

📌 Step 5: Connecting Angular to Express.js Backend

To ensure frontend and backend communicate properly, update proxy settings in Angular (angular.json):

"architect": {
    "serve": {
        "options": {
            "proxyConfig": "proxy.conf.json"
        }
    }
}

Create proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false
  }
}

📌 Step 6: Testing the Full-Stack Application

✅ Start the Backend:

node server.js

✅ Start the Frontend:

ng serve

📌 Step 7: Deploying Angular and Express.js App

🔹 Deploy Angular to Firebase/Vercel/Netlify

ng build --prod

🔹 Deploy Express.js to Heroku/Render

git init
git add .
git commit -m "Deploy Express.js backend"
git push heroku main

📌 Conclusion 🎯

By mastering Angular and Express.js, you can build powerful full-stack applications. This guide covered:

✅ Setting up Angular and Express.js
✅ Creating a REST API in Express.js
✅ Building a dynamic frontend with Angular
✅ Connecting the frontend to the backend
✅ Deploying the application