Build a CRUD App with Angular 19 and Spring Boot in 2026

Building a full-stack application doesn't require complex setups anymore. With Angular 19's standalone components and Spring Boot 3.x, developers can create a fully functional CRUD application in less than an hour. The modern approach eliminates traditional module declarations and streamlines the development process. This guide walks through setting up a Friends CRUD application with a Spring Boot backend and Angular frontend, ready for production deployment.

Setting Up the Angular 19 Frontend

Angular 19 introduces a simplified architecture using standalone components, removing the need for an AppModule. The framework now relies on functional providers and direct application bootstrapping. Developers can initialize a new project with just a few commands, setting up routing and SCSS styling in the process.

Start by installing the latest Angular CLI globally:

npm install -g @angular/cli@latest

Create a new Angular project named friends-ui with routing enabled and SCSS styling, ensuring server-side rendering is disabled:

ng new friends-ui --routing --style=scss --ssr=false
cd friends-ui

Configure the development server to run on port 9002 to avoid conflicts with the backend:

ng serve --port 9002

The application requires the HttpClient module for API communication. Bootstrap the application in main.ts with the router and HTTP client providers:

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

Define the root component as a standalone entity, importing only the RouterOutlet dependency:

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

Configure the API endpoint in the environment file to point to the Spring Boot backend running on port 9001:

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

Create an injectable service to handle HTTP requests. The FriendService will interact with the backend API:

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

Developing the Spring Boot Backend

The backend requires a RESTful API to handle CRUD operations. Spring Boot 3.x simplifies this setup with built-in support for JPA, H2 database, and Web dependencies. Start by creating a new Spring Boot project with the necessary dependencies:

• Spring Web for REST endpoints
• Spring Data JPA for database operations
• H2 Database for in-memory storage

Define the Friend entity class, mapping database columns to Java fields:

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class Friend {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;

    // Constructors, getters, and setters
}

Create a repository interface extending JpaRepository to handle database operations automatically:

import org.springframework.data.jpa.repository.JpaRepository;

public interface FriendRepository extends JpaRepository<Friend, Long> {}

Implement a service class to encapsulate business logic and interact with the repository:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class FriendService {
    @Autowired
    private FriendRepository friendRepository;

    public List<Friend> getAllFriends() {
        return friendRepository.findAll();
    }
}

Set up a REST controller to expose endpoints for CRUD operations:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/friends")
public class FriendController {
    @Autowired
    private FriendService friendService;

    @GetMapping
    public List<Friend> getAllFriends() {
        return friendService.getAllFriends();
    }
}

Configure the H2 database and server port in application.properties:

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

Seed the database with initial data using a data.sql file:

INSERT INTO friend (name, email) VALUES ('Alice Johnson', 'alice@example.com');
INSERT INTO friend (name, email) VALUES ('Bob Smith', 'bob@example.com');

Next Steps in Your CRUD Journey

This tutorial establishes the foundation for a full-stack CRUD application. The next phase involves implementing the remaining endpoints for creating, reading individual records, updating, and deleting entries. The complete guide spans six parts, each focusing on a specific CRUD operation to ensure comprehensive understanding.

• Part 2: Implementing the GET endpoint to retrieve all records
• Part 3: Building the POST endpoint for creating new entries
• Part 4: Developing the GET endpoint for fetching individual records
• Part 5: Creating the PUT endpoint for updating existing entries
• Part 6: Designing the DELETE endpoint for removing records

A complete implementation is available in the reference repository, providing a production-ready example for developers to study and adapt.