In this tutorial, we will learn how to build a full stack Angular 10 + Spring Boot example with a CRUD App. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data JPA for interacting with MySQL/PostgreSQL database. Front-end side is made with Angular 10, HTTPClient & Router.
Angular 10 & Spring Boot CRUD example
We will build a full-stack Tutorial 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.
– Add Tutorial:
– Retrieve all Tutorials:
– 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:
Angular 10 & Spring Boot Architecture
This is the application architecture we will build:
– Spring Boot exports REST Apis using Spring Web MVC & interacts with 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.
– Database could be MySQL or PostgreSQL.
This is our Angular 10 Spring Boot CRUD application demo and brief instruction, running with MySQL database:
Spring Boot Back-end
These are APIs that Spring Boot App will export:
|POST||/api/tutorials||create new Tutorial|
|GET||/api/tutorials||retrieve all Tutorials|
|GET||/api/tutorials/:id||retrieve a Tutorial by |
|PUT||/api/tutorials/:id||update a Tutorial by |
|DELETE||/api/tutorials/:id||delete a Tutorial by |
|DELETE||/api/tutorials||delete all Tutorials|
|GET||/api/tutorials?title=[keyword]||find all Tutorials which title contains |
– We make CRUD operations & finder methods with Spring Data JPA’s
– The database could be PostgreSQL or MySQL depending on the way we configure project dependency & datasource.
- Java 8
- Spring Boot 2.2.1 (with Spring Web MVC, Spring Data JPA)
- Maven 3.6.1
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 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 MySQL/PostgreSQL.
You can find step by step to implement this Spring Boot Server Application in the post:
Spring Boot, Spring Data JPA – Building Rest CRUD API example
Angular 10 Front-end
App component is a container with
router-outlet. It has navbar that links to routes paths via
TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on
AddTutorial component has form for submission new Tutorial.
– These Components call
TutorialService methods which use Angular
HTTPClient to make HTTP requests and receive responses.
- Angular 10
- Angular HTTPClient
- Angular Router
– There are 3 components:
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.
You can find step by step to implement this Angular App in the post:
Angular 10 CRUD Application example with Web API
Older version: Angular 8 CRUD Application example with Web API
Now we have an overview of Angular 10 + Spring Boot CRUD example when building a CRUD App.
We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.
Next tutorials show you more details about how to implement the system:
You will want to know how to run both projects in one place:
How to Integrate Angular with Spring Boot Rest API
Or Angular 10 uploading File to Spring Boot Server:
Angular 10 + Spring Boot: File upload example
Happy learning, see you again!