Spring Boot + Angular Project

In this post, I will show you some Project examples that use Spring Boot and Angular for full-stack application. You will see Github links for making following projects:

• Spring Boot + Angular + Embedded database (H2)
• Spring Boot + Angular + MySQL
• Spring Boot + Angular + PostgreSQL
• Spring Boot + Angular + MongoDB
• Spring Boot + Angular + Oracle
• Spring Boot + Angular + Cassandra
• Spring Boot + Angular + SQL Server (MSSQL)
• Spring Boot + Angular: JWT Authentication and Authorization

Overview

The Github source code shows many full stack Angular + Spring Boot Project examples with CRUD Operations. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data for interacting with databases. Front-end side is made with Angular 8/10/11/12/13/14/15/16, HttpClient, Router and Bootstrap.

Each of them is the 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.

– Add Tutorial:

– Retrieve 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:

How to Run

Spring Boot server:
Open command line at the project root folder, run:

mvn spring-boot:run

The Spring Application will export Rest APIs at port 8080, CORS configuration for working with port 8081.

Angular Client:
Choose Angular Github source code as you need (version).
Open command line at the project root folder, run:

npm install
ng serve --port 8081

Spring Boot + Angular + Embedded database Github

Tutorials:

• Spring Boot + Angular 13 + H2: CRUD example
• Spring Boot + Angular 14 + H2: CRUD example
• Spring Boot + Angular 15 + H2: CRUD example
• Spring Boot + Angular 16 + H2: CRUD example

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + H2: Rest API

Spring Boot + Angular + MySQL Github

Tutorials:

• Spring Boot + Angular 13 + MySQL: CRUD example
• Spring Boot + Angular 14 + MySQL: CRUD example
• Spring Boot + Angular 15 + MySQL: CRUD example
• Spring Boot + Angular 16 + MySQL: CRUD example

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + MySQL: Rest API

– Video:

Spring Boot + Angular + PostgreSQL Github

Tutorials:

• Spring Boot + Angular 13 + PostgreSQL: CRUD example
• Spring Boot + Angular 14 + PostgreSQL: CRUD example
• Spring Boot + Angular 15 + PostgreSQL: CRUD example
• Spring Boot + Angular 16 + PostgreSQL: CRUD example

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + PostgreSQL: Rest API

– Video:

Spring Boot + Angular + MongoDB Github

Tutorials:

• Spring Boot + Angular 13 + MongoDB: CRUD example
• Spring Boot + Angular 14 + MongoDB: CRUD example
• Spring Boot + Angular 15 + MongoDB: CRUD example
• Spring Boot + Angular 16 + MongoDB: CRUD example

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + MongoDB: Rest API

Spring Boot + Angular + Oracle Github

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + Oracle: Rest API

Spring Boot + Angular + Cassandra Github

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + Cassandra: Rest API

Spring Boot + Angular + SQL Server Github

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13
• Angular 14
• Angular 15
• Angular 16

– Backend: Spring Boot + SQL Server: Rest API

Spring Boot + Angular JWT Github

– Tutorials:

• Spring Boot + Angular 13: JWT Authentication and Authorization
• Spring Boot + Angular 14: JWT Authentication and Authorization
• Spring Boot + Angular 15: JWT Authentication and Authorization
• Spring Boot + Angular 16: JWT Authentication and Authorization

Github Source code:
– Frontend:

• Angular 8
• Angular 10
• Angular 11
• Angular 12
• Angular 13

– Backend:

• Spring Boot + MySQL
• Spring Boot + PostgreSQL
• Spring Boot + MongoDB

– Video:

Using HttpOnly Cookies instead:
– Frontend:

• Angular 16 JWT Auth with HttpOnly Cookies
• Angular 15 JWT Auth with HttpOnly Cookies
• Angular 14 JWT Auth with HttpOnly Cookies
• Angular 13 JWT Auth with HttpOnly Cookies
• Angular 12 JWT Auth with HttpOnly Cookies

– Backend:

• Spring Boot + H2
• Spring Boot + MySQL/PostgreSQL
• Spring Boot + MongoDB

How to run Angular and Spring Boot on same Port

Assume that we have 2 projects: Angular & Spring Boot.

If we run them separately:

• Spring Boot Server exports Rest Apis at Url: http://localhost:8080/
• Angular Client runs at url: http://localhost:8081/

Otherwise, when deploying Angular production-build with Spring Boot project, we only need to run Spring Boot Project for the fullstack (Angular + Spring Boot) system.

In this example, we access http://localhost:8080/ for the UI.

You can find step by step instruction at How to Integrate Angular with Spring Boot Rest API.