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:

spring-boot-angular-example-github-crud-create

– Retrieve Tutorials:

spring-boot-angular-example-github-crud-retrieve

– Click on Edit button to go to a Tutorial page:

spring-boot-angular-example-github-crud-retrieve-one

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

spring-boot-angular-example-github-crud-update

– Search Tutorials by title:

spring-boot-angular-example-github-crud-search

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:

Github Source code:
– Frontend:

– Backend: Spring Boot + H2: Rest API

Spring Boot + Angular + MySQL Github

Tutorials:

Github Source code:
– Frontend:

– Backend: Spring Boot + MySQL: Rest API

– Video:

Spring Boot + Angular + PostgreSQL Github

Tutorials:

Github Source code:
– Frontend:

– Backend: Spring Boot + PostgreSQL: Rest API

– Video:

Spring Boot + Angular + MongoDB Github

Tutorials:

Github Source code:
– Frontend:

– Backend: Spring Boot + MongoDB: Rest API

Spring Boot + Angular + Oracle Github

Github Source code:
– Frontend:

– Backend: Spring Boot + Oracle: Rest API

Spring Boot + Angular + Cassandra Github

Github Source code:
– Frontend:

– Backend: Spring Boot + Cassandra: Rest API

Spring Boot + Angular + SQL Server Github

Github Source code:
– Frontend:

– Backend: Spring Boot + SQL Server: Rest API

Spring Boot + Angular JWT Github

– Tutorials:

Github Source code:
– Frontend:

– Backend:

– Video:

Using HttpOnly Cookies instead:
– Frontend:

– Backend:

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.

You may also like...