DEV Community

Cover image for Spring Boot + Angular 13 example: CRUD application
Tien Nguyen
Tien Nguyen

Posted on • Edited on

14 3

Spring Boot + Angular 13 example: CRUD application

In this tutorial, we will learn how to build a full stack Spring Boot + Angular 13 example with a CRUD Application. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data JPA for interacting with embedded database (H2 database). Front-end side is made with Angular 13, HttpClient, Router and Bootstrap 4.

Full article: https://www.bezkoder.com/spring-boot-angular-13-crud/

Using other databases:

Security: Angular 13 + Spring Boot JWT Authentication

Spring Boot and Angular 13 CRUD example

We will build a full-stack Angular 13 + Spring Boot Tutorial CRUD Application in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

  • Create a new Tutorial:

spring-boot-angular-13-crud-example-create-tutorial

  • Retrieve Tutorials:

spring-boot-angular-13-crud-example-retrieve-tutorial

  • Click on Edit button to update a Tutorial:

spring-boot-angular-13-crud-example-retrieve-one-tutorial

On this Page, you can:

  • change status to Published using Publish button
  • remove the Tutorial from Database using Delete button
  • update the Tutorial details on Database with Update button

spring-boot-angular-13-crud-example-update-tutorial

If you want to implement Form Validation, please visit:
Angular Form Validation example (Reactive Forms)

  • Search Tutorials by title:

spring-boot-angular-13-crud-example-search-tutorial

Spring Boot + Angular 13 fullstack Architecture

Now look at the application architecture we will build:

spring-boot-angular-13-crud-example-architecture

  • Spring Boot exports REST Apis using Spring Web MVC & interacts with embedded H2 Database using Spring Data JPA.
  • Angular 13 Client sends HTTP Requests and retrieve HTTP Responses using HttpClient Module, shows data on the components. We also use Angular Router for navigating to pages.
You can also find the Spring Restful Apis that works with other databases here: - Spring JPA + PostgreSQL - Spring JPA + MySQL - Spring Data + MongoDB - Spring JPA + SQL Server - Spring JPA + Oracle - Spring Data + Cassandra

Video

This is our Angular + Spring Boot CRUD application demo and brief instruction:

In the video, we use Angular 10 with MySQL database, but the logic and UI are the same as this Angular version 13 and embedded database.

Spring Boot Back-end

Overview

These are APIs that Spring Boot App will export:

Methods Urls Actions
POST /api/tutorials create new Tutorial
GET /api/tutorials retrieve all Tutorials
GET /api/tutorials/:id retrieve a Tutorial by :id
PUT /api/tutorials/:id update a Tutorial by :id
DELETE /api/tutorials/:id delete a Tutorial by :id
DELETE /api/tutorials delete all Tutorials
GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword
  • We make CRUD operations & finder methods with Spring Data JPA's JpaRepository.
  • The database will be H2 Database (in memory or on disk) by configuring project dependency & datasource.

Technology

  • Java 8
  • Spring Boot 2.2.1 (with Spring Web MVC, Spring Data JPA)
  • H2 Database
  • Maven 3.6.1

Project Structure

spring-boot-angular-13-crud-example-server-project-structure

Tutorial data model class corresponds to entity and table tutorials.
TutorialRepository is an interface that extends JpaRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished...
– Configuration for Spring Datasource, JPA & Hibernate in application.properties.
pom.xml contains dependencies for Spring Boot and H2 Database.

Angular 13 Front-end

Overview

spring-boot-angular-13-crud-example-client-overview

– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.

TutorialsList component gets and displays Tutorials.
TutorialDetails component has form for editing Tutorial's details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.

Technology

  • Angular 13
  • Angular HttpClient
  • Angular Router
  • Bootstrap 4

Project Structure

spring-boot-angular-13-crud-example-client-project-structure

  • tutorial.model.ts exports the main class model: Tutorial.
  • There are 3 components: tutorials-list, tutorial-details, add-tutorial.
  • tutorial.service has methods for sending HTTP requests to the Apis.
  • app-routing.module.ts defines routes for each component.
  • app component contains router view and navigation bar.
  • app.module.ts declares Angular components and import necessary modules.

For step by step instruction and Github, please visit:
https://www.bezkoder.com/spring-boot-angular-13-crud/

Further Reading

Security: Angular 13 + Spring Boot JWT Authentication

Upload: Angular + Spring Boot: File upload/download example

If you want to implement Form Validation, please visit:
Angular Form Validation example (Reactive Forms)

Or Pagination: Angular + Spring Boot: Pagination example

Serverless with Firebase:

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (0)

Jetbrains image

Is Your CI/CD Server a Prime Target for Attack?

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. It makes sense—CI/CD servers have access to source code, a highly valuable asset. Is yours secure? Check out nine practical tips to protect your CI/CD.

Learn more

👋 Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay