Building REST API Applications

Blog App Architecture:

[ Routes ]
  /blogs         → BlogListComponent (List all posts)
  /blogs/new     → BlogFormComponent (Create new post)
  /blogs/:id     → BlogDetailComponent (View single post)
  /blogs/:id/edit → BlogFormComponent (Edit existing post)

[ Services ]
  BlogService — All HTTP calls (get, create, update, delete)

[ Models ]
  Blog interface (id, title, content, author, createdAt, published)

// models/blog.model.ts
export interface Blog {
  id?: number;
  title: string;
  content: string;
  author: string;
  createdAt?: string;
  published: boolean;
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
import { Blog } from './models/blog.model';

@Injectable({ providedIn: 'root' })
export class BlogService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Demo API

  constructor(private http: HttpClient) {}

  getAll(): Observable<Blog[]> {
    return this.http.get<Blog[]>(this.apiUrl).pipe(catchError(this.handleError));
  }

  getById(id: number): Observable<Blog> {
    return this.http.get<Blog>(`${this.apiUrl}/${id}`).pipe(catchError(this.handleError));
  }

  create(blog: Blog): Observable<Blog> {
    return this.http.post<Blog>(this.apiUrl, blog).pipe(catchError(this.handleError));
  }

  update(id: number, blog: Blog): Observable<Blog> {
    return this.http.put<Blog>(`${this.apiUrl}/${id}`, blog).pipe(catchError(this.handleError));
  }

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

  private handleError(error: HttpErrorResponse): Observable<never> {
    let message = &#039;An unknown error occurred&#039;;
    if (error.status === 404) message = &#039;Blog post not found&#039;;
    if (error.status === 500) message = &#039;Server error. Please try again later&#039;;
    return throwError(() => new Error(message));
  }
}

@Component({ selector: 'app-blog-list', templateUrl: './blog-list.component.html' })
export class BlogListComponent implements OnInit {
  blogs: Blog[] = [];
  loading = true;
  error = '';

  constructor(private blogService: BlogService, private router: Router) {}

  ngOnInit(): void {
    this.blogService.getAll().subscribe({
      next: blogs => { this.blogs = blogs.slice(0, 10); this.loading = false; },
      error: err => { this.error = err.message; this.loading = false; }
    });
  }

  deleteBlog(id: number): void {
    if (confirm('Are you sure you want to delete this post?')) {
      this.blogService.delete(id).subscribe(() => {
        this.blogs = this.blogs.filter(b => b.id !== id);
      });
    }
  }
}

<!-- blog-list.component.html -->
<div class="header">
  <h1>Blog Management</h1>
  <a routerLink="/blogs/new" class="btn-primary">+ New Post</a>
</div>

<div *ngIf="loading" class="loading">Loading posts...</div>
<div *ngIf="error" class="error">{{ error }}</div>

<div class="blog-grid">
  <div class="blog-card" *ngFor="let blog of blogs">
    <h3>{{ blog.title | titlecase }}</h3>
    <p>{{ blog.body | slice:0:100 }}...</p>
    <div class="actions">
      <a [routerLink]="[&#039;/blogs', blog.id]">View</a>
      <a [routerLink]="[&#039;/blogs', blog.id, 'edit']">Edit</a>
      <button (click)="deleteBlog(blog.id!)">Delete</button>
    </div>
  </div>
</div>

@Component({ selector: 'app-blog-form', templateUrl: './blog-form.component.html' })
export class BlogFormComponent implements OnInit {
  blogForm!: FormGroup;
  isEditMode = false;
  blogId!: number;
  loading = false;
  success = '';

  constructor(
    private fb: FormBuilder,
    private blogService: BlogService,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.blogForm = this.fb.group({
      title: ['', [Validators.required, Validators.minLength(5)]],
      body: ['', [Validators.required, Validators.minLength(20)]],
      userId: [1]
    });

    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.isEditMode = true;
      this.blogId = +id;
      this.blogService.getById(this.blogId).subscribe(blog => {
        this.blogForm.patchValue(blog);
      });
    }
  }

  onSubmit(): void {
    if (this.blogForm.invalid) return;
    this.loading = true;

    const request$ = this.isEditMode
      ? this.blogService.update(this.blogId, this.blogForm.value)
      : this.blogService.create(this.blogForm.value);

    request$.subscribe({
      next: () => this.router.navigate(['/blogs']),
      error: () => { this.loading = false; }
    });
  }
}