In this tutorial, I will show you how to build a full-stack (Spring Boot + Angular 8) example with a CRUD Application. The back-end server uses Spring Boot, Spring Data for REST APIs, front-end side is an Angular 8 App with HttpClient and Form Module.
The Tutorial Application in that:
- Tutorial has id, title, description, published status.
- User can create, retrieve, update, delete Tutorials.
- There is a search box for finding Tutorials by title.
Add an object:
Retrieve all objects:
Click on Edit button to go to a Tutorial page:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
Search Tutorials by title:
This is the application architecture we will build:
- Spring Boot exports REST Apis using Spring Web MVC & interacts with embedded Database using Spring Data JPA.
- Angular Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Angular Router for navigating to pages.
This is our Angular Spring Boot CRUD application demo and brief instruction, running with MySQL database:
In the video, we use Angular 10, but it has the same logic & UI as Angular version 8 and H2 database in this tutorial.
Tutorial link: Spring Boot + Angular 8: CRUD example
More Practice:
Security:
Angular 8 + Spring Boot: JWT Authentication & Authorization example