In this tutorial, we will learn how to build a full stack Angular 11 + Spring Boot + PostgreSQL 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 PostgreSQL database. Front-end side is made with Angular 11, HTTPClient & Router.
Angular 11 + Spring Boot + PostgreSQL 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 an object:
– 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:
– This is tutorials table on the PostgreSQL database:
Angular 11 & Spring Boot PostgreSQL Architecture
This is the application architecture we will build:
– Spring Boot exports REST Apis using Spring Web MVC & interacts with PostgreSQL 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.
Video
This is our Angular Spring Boot CRUD application demo and brief instruction, running with PostgreSQL database:
In the video, we use Angular 10, but it has the same logic & UI as Angular version 11 in this tutorial.
For more details, implementation and Github source code please visit:
https://bezkoder.com/angular-11-spring-boot-postgresql/
#spring #angular #spring-boot #postgresql #crud #javascript
