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:

Retrieve Tutorials:

Click on Edit button to update a 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

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

Search Tutorials by title:

Spring Boot + Angular 13 fullstack Architecture

Now look at the application architecture we will build:

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

– 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

– 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

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/

Spring Boot + Angular 13 example: CRUD application

Spring Boot and Angular 13 CRUD example

Spring Boot + Angular 13 fullstack Architecture

Video

Spring Boot Back-end

Overview

Technology

Project Structure

Angular 13 Front-end

Overview

Technology

Project Structure

Further Reading