DEV Community

Cover image for Angular CRUD Tutorial (2026 Edition) — Part 1: Setup with Spring Boot
Alkademy
Alkademy

Posted on • Originally published at munonye.com

Angular CRUD Tutorial (2026 Edition) — Part 1: Setup with Spring Boot

#angular #springboot #tutorial #crud

Canonical URL: This article is republished from the original on munonye.com. Read the full six-part series and updated Angular 19 code there.

Introduction

In this tutorial you'll set up a Friends CRUD application with:

  • FriendsAPI — Spring Boot REST backend (port 9001)
  • FriendsUI — Angular frontend (port 9002)

This is Part 1 of 6. The complete roadmap is on munonye.com.

Prerequisites: Node.js 18+, Angular CLI, Java 17+, basic TypeScript and REST fundamentals.

Estimated time: ~45 minutes.

Angular 19 Setup (Updated 2026)

Modern Angular uses standalone components and functional providers — no AppModule required.

Create the project 

npm install -g @angular/cli@latest
ng new friends-ui --routing --style=scss --ssr=false
cd friends-ui
ng serve --port 9002
Enter fullscreen mode Exit fullscreen mode

Bootstrap with HttpClient 

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideHttpClient()]
});
Enter fullscreen mode Exit fullscreen mode

Standalone root component 

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

Environment config 

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:9001/api/friends'
};
Enter fullscreen mode Exit fullscreen mode

Injectable service 

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class FriendService {
  private http = inject(HttpClient);
  private base = environment.apiUrl;

  getAll() {
    return this.http.get<Friend[]>(this.base);
  }
}
Enter fullscreen mode Exit fullscreen mode

Spring Boot REST API

Create a Spring Boot project with Web, JPA, and H2 dependencies. Add:

  • FriendController.java
  • Friend.java (entity)
  • FriendService.java
  • FriendRepository.java
  • data.sql for seed data

Reference implementation: product-app-spring-api on GitHub

server.port=9001
spring.datasource.url=jdbc:h2:mem:friendsdb
spring.jpa.hibernate.ddl-auto=update
Enter fullscreen mode Exit fullscreen mode

What's next

Part Topic Link
2 GET — list records Part 2 on munonye.com
3 POST — create Part 3
4 Details view Part 4
5 PUT — edit Part 5
6 DELETE Part 6

Complete guide (all parts): munonye.com/angular-crud-spring-boot-rest-api-complete-guide/

About the author

Kindson Munonye — software engineer and technical author.

GitHub · LinkedIn · About · YouTube

Top comments (2)

Collapse
 
geromegrignon profile image
Gérôme Grignon •

You can't call it a '2026' and use an Angular version (19) not being supported anymore by now.

Collapse
 
alkademy profile image
Alkademy • • Edited

You're right! Angular 19 reaches end of life on May 19, 2026. We're updating the article for Angular 21