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

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

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

About the author