Angular 19 & Spring Boot CRUD: Schritt-für-Schritt-Anleitung für 2026

Angular und Spring Boot bilden ein leistungsstarkes Duo für moderne Webanwendungen. In dieser aktualisierten Anleitung aus dem Jahr 2026 erfahren Sie, wie Sie eine Friends-CRUD-Anwendung mit Angular 19 als Frontend und Spring Boot als Backend erstellen. Die Schritt-für-Schritt-Anleitung führt Sie durch die Einrichtung beider Komponenten, gefolgt von einer detaillierten Implementierung der grundlegenden Datenbankoperationen. Nach Abschluss dieser ersten von sechs Folgen verfügen Sie über ein solides Fundament für die Entwicklung vollständiger RESTful-APIs und reaktiver Benutzeroberflächen.

Warum diese Kombination wählen?

Die Kombination aus Angular und Spring Boot bietet mehrere Vorteile für Entwickler, die skalierbare und wartbare Anwendungen erstellen möchten:

• Moderne Architektur: Angular 19 nutzt Standalone-Komponenten und funktionale Anbieter, was die Komplexität reduziert und die Entwicklung beschleunigt.
• Robustes Backend: Spring Boot vereinfacht die Erstellung von RESTful-APIs mit integrierter Datenbankunterstützung und automatischer Konfiguration.
• Modularität: Die klare Trennung zwischen Frontend und Backend erleichtert die Wartung und Erweiterung der Anwendung.
• Performance: Beide Frameworks optimieren die Ladezeiten und bieten eine reibungslose Benutzererfahrung.

Einrichtung des Angular-19-Projekts

Die Einrichtung eines neuen Angular-Projekts ist dank der Angular CLI denkbar einfach. Vorausgesetzt werden Node.js 18 oder höher, Angular CLI in der neuesten Version sowie grundlegende Kenntnisse in TypeScript und REST-Prinzipien. Die gesamte Einrichtung sollte in etwa 45 Minuten abgeschlossen sein.

Projektinitialisierung

Starten Sie mit der Erstellung des Angular-Projekts unter dem Namen friends-ui. Die folgenden Befehle konfigurieren das Projekt mit Routing, SCSS-Stylesheets und deaktiviertem Server-Side Rendering:

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

Bootstrap mit HttpClient

Angular 19 setzt auf funktionale Anbieter anstelle klassischer Module. Die Hauptdatei main.ts wird wie folgt angepasst, um die Anwendung mit dem Router und dem HttpClient zu starten:

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()
  ]
});

Root-Komponente als Standalone-Element

Erstellen Sie eine einfache Root-Komponente, die als Einstiegspunkt für die Anwendung dient. Diese nutzt das RouterOutlet für die Navigation:

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 {}

Konfiguration der API-Endpunkte

Die Verbindung zwischen Frontend und Backend wird über die Umgebungsdatei environment.ts gesteuert. Hier definieren Sie die Basis-URL des Spring-Boot-Backends:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: '
};

Service für Datenzugriff implementieren

Ein zentraler Service verwaltet die Kommunikation mit dem Backend. Der folgende Ausschnitt zeigt die Implementierung einer Methode zum Abrufen aller Freunde:

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);
  }
}

Spring Boot Backend einrichten

Parallel zum Angular-Projekt erstellen Sie ein Spring-Boot-Backend mit den folgenden Abhängigkeiten:

• Spring Web: Für die Erstellung von RESTful-APIs
• Spring Data JPA: Zur Interaktion mit der Datenbank
• H2 Database: Eine eingebettete Datenbank für Entwicklungszwecke

Projektstruktur und Entity

Die Backend-Anwendung umfasst vier Hauptkomponenten:

• FriendController: Verarbeitet HTTP-Anfragen und leitet sie an den Service weiter.
• Friend: Die JPA-Entity, die die Datenstruktur definiert.
• FriendService: Enthält die Business-Logik und interagiert mit dem Repository.
• FriendRepository: Verwaltet die Datenbankoperationen.

Zusätzlich wird eine data.sql-Datei bereitgestellt, um initiale Testdaten in die H2-Datenbank zu laden. Ein Referenzprojekt auf GitHub zeigt die vollständige Implementierung.

Konfiguration und Start

Die Anwendung wird über die application.properties-Datei konfiguriert. Hier legen Sie den Port und die Datenbankverbindung fest:

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

Ausblick auf die nächsten Schritte

Diese erste Folge legt den Grundstein für eine vollständige CRUD-Anwendung. In den folgenden Teilen der Serie werden die verbleibenden Operationen implementiert:

1. GET – Daten abrufen (Teil 2)
2. POST – Neue Einträge erstellen (Teil 3)
3. Detailsansicht anzeigen (Teil 4)
4. PUT – Daten bearbeiten (Teil 5)
5. DELETE – Daten löschen (Teil 6)

Eine umfassende Anleitung mit allen sechs Teilen finden Sie auf der Projektseite des Autors. Dort erhalten Sie auch den vollständigen Quellcode und weitere Ressourcen für die Vertiefung Ihrer Kenntnisse.

Die Kombination aus Angular 19 und Spring Boot bietet eine zukunftssichere Grundlage für moderne Webanwendungen. Mit den in dieser Anleitung erlernten Schritten können Sie nun eigene Projekte starten und Ihre Fähigkeiten in der Full-Stack-Entwicklung weiter ausbauen.