Angular and SpringBoot REST API Blog

🛠️ Building a Full-Stack Blog App with Angular 20 (Admin & Frontend) + Spring Boot Backend

Creating a modern, scalable, and efficient blog application involves a decoupled architecture where the frontend and backend are cleanly separated. In this comprehensive guide, we’ll walk through the entire process of building a full-stack blog using:

• ✅ Angular 20 (Two separate apps: Admin Panel & Frontend Blog UI)
• ✅ Spring Boot REST API (Java-based backend)

This article assumes you have basic familiarity with Angular and Spring Boot.

📦 Project Overview

We will create:

1. Backend (Spring Boot): Exposes a REST API for users, posts, categories.
2. Frontend UI (Angular 20): For readers to browse blog posts.
3. Admin Panel (Angular 20): For administrators to manage blog content.

Folder structure:

blog-project/
├── blog-backend/      # Spring Boot backend (Java)
├── blog-frontend/     # Angular workspace with multiple apps
│   ├── admin-panel/   # Admin UI Angular app
│   │   └── src/app/
│   │       ├── pages/
│   │       │   ├── dashboard/
│   │       │   ├── post-list/
│   │       │   ├── post-editor/
│   │       │   └── login/
│   │       ├── services/
│   │       ├── guards/
│   │       ├── interceptors/
│   │       ├── models/
│   │       ├── app.routes.ts
│   │       └── app.config.ts
│   └── frontend/      # Public Blog UI Angular app
│       └── src/app/
│           ├── pages/
│           │   ├── home/
│           │   ├── post-detail/
│           │   └── login/ (optional)
│           ├── services/
│           ├── guards/
│           ├── models/
│           ├── app.routes.ts
│           └── app.config.ts

🔧 Step 1: Set Up Angular 20 Workspace

🟦 Prerequisites:

• Node.js 20+
• Angular CLI 20+
• Java 17+ or 21

🟨 Install Angular CLI

npm install -g @angular/cli@20

🟩 Create Angular Workspace (Without Initial App)

ng new blog-project --create-application=false
cd blog-project

🟩 Generate Admin and Frontend Apps

ng generate application admin-panel --standalone
ng generate application frontend --standalone

✅ This creates two apps inside projects/

🛠️ Step 2: Angular Project Structure

Each app (admin-panel and frontend) will have its own folder with the structure shown above.

📚 Step 3: Set Up Spring Boot Backend

🔨 Use Spring Initializr:

• Dependencies:
  • Spring Web
  • Spring Security
  • Spring Data JPA
  • MySQL Driver (or H2)

📁 Recommended Package Structure

com.example.blog/
├── controller/
├── service/
├── entity/
├── repository/
├── security/
└── dto/

✅ Core Entities:

• User
• Post
• Category

Include authentication using JWT.

🧩 Step 4: Integrate Frontend with Backend

🔐 Install Zone.js (Angular Requirement)

npm install zone.js

Add at the top of main.ts:

import 'zone.js';

⚙️ Configure app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideRouter(routes)
  ]
};

🔁 Setup API Services

@Injectable({ providedIn: 'root' })
export class BlogService {
  private baseUrl = 'http://localhost:8080/api';

  constructor(private http: HttpClient) {}

  getAllPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(`${this.baseUrl}/posts`);
  }
}

🔑 Step 5: Authentication

👤 AuthService

@Injectable({ providedIn: 'root' })
export class AuthService {
  login(email: string, password: string): Observable<{ token: string }> {
    return this.http.post<{ token: string }>(`${this.baseUrl}/auth/login`, { email, password });
  }

  getUserFromToken(): User | null {
    const token = localStorage.getItem('token');
    if (!token) return null;
    const payload = JSON.parse(atob(token.split('.')[1]));
    return { id: payload.sub, email: payload.email, role: payload.role };
  }
}

🛡️ Auth Guard

export const AdminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const user = authService.getCurrentUser();
  return user?.role === 'ADMIN';
};

🔁 Add Auth Interceptor

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  return token ? next(req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })) : next(req);
};

Add to app.config.ts:

provideHttpClient(withInterceptors([authInterceptor]))

🖼️ Step 6: UI Pages

📝 Admin Panel

• dashboard: Show stats, recent posts
• post-list: List all posts, edit/delete
• post-editor: Create or edit a post
• login: Form to authenticate admin

📰 Frontend

• home: List blog posts
• post-detail: View full post by slug
• login: (Optional if you want user login for comments)

🚀 Step 7: Running the Apps

1. Start Backend

cd blog-backend
./mvnw spring-boot:run

2. Start Admin App

cd blog-project
ng serve --project=admin-panel --port=4300

3. Start Frontend App

ng serve --project=frontend

🌐 Access

• Frontend: http://localhost:4200
• Admin: http://localhost:4300