Angular + Spring Boot + MySQL CRUD Example

Go to Part 1In this full-stack development tutorial, we will learn how to develop a full-stack CRUD (Create, Read, Update, Delete) web application using Angular as a front-end, Spring boot Restful API as a backend, and MySQL database to store and retrieve the data.

Check out Angular 9 with spring boot 2 integration example at Spring Boot + Angular 9 CRUD Example Tutorial.

Check out Angular 8 with spring boot 2 integration example at Spring Boot + Angular 8 CRUD Example Tutorial.

Check out Angular 7 with spring boot 2 integration example at Spring Boot 2 + Angular 7 CRUD Example.

Check out Angular 6 with spring boot 2 integration example at Spring Boot + Angular 6 CRUD Example.

Angular Spring boot Full-Stack Architecture

The application will be constructed using the following architecture:

What you will learn?

1. Learn how to develop a CRUD Full Stack application with Angular front-end and Spring Boot back-end
2. You will learn how to Build great RESTful APIs with Spring Boot and the MySQL database.
3. You will learn how to connect Spring boot application to MySQL database and perform CRUD operations.
4. You will learn to solve the challenges of connecting an Angular Frontend to a RESTful API ( spring boot)
5. You will learn to connect REST API to JPA/Hibernate with Spring Boot
6. You will learn to use a wide variety of Spring Boot Starter Projects - Spring Boot Web, and Spring Boot Data JPA
7. You will learn the basics of Angular - Angular Modules, Components, Data Binding, and Routing

Free Course on YouTube - Angular 10 + Spring Boot CRUD Full Stack Application

This is the complete Angular + Spring Boot CRUD Full Stack Application development course series on my YouTube channel at Free Course on YouTube - Angular + Spring Boot CRUD Full Stack Application:

Spring Boot + Angular 10 CRUD Example Tutorial - 5 Part Series

To keep it simple, I divide this tutorial into 5 parts, and here are the topics that I am going to cover in each Part.

1. Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs

• create employee
• list employee
• delete employee
• update employee
• get employee by id

2. Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App

• Install the latest version of Angular CLI
• Create Angular 10 client application using Angular CLI
• Identify Components, Services, and Modules
• Create Service & Components using Angular CLI
• Integrate JQuery and Bootstrap with Angular

3. Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations

• Create an Employee class
• Employee Service
• Creating Employee List Template and Component
• Create Add Employee Template and Component
• Update Employee Template and Component
• Create View Employee Details Template and Component

4. Spring Boot  + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration

• npm package.json - Configure Dependencies
• App Routing Module
• App Component
• App Component Template
• App Module
• Main Index Html File
• Main (Bootstrap) File
• Polyfills
• TypeScript tsconfig.json

5. Spring Boot 2 + Angular 10 CRUD, Part 5 - Running Angular 10 CRUD App

• Running Angular 10 Client Application
• Demo

Spring Boot Angular 10 CRUD App Architecture

Features Implementation

• Create an Employee

• Update an Employee

• List of Employees

• Delete Employee

• View Employee

What we will build?

Basically, we will create two projects (Client and Server):

1. springboot2-jpa-crud-example: This project is used to develop CRUD RESTFul APIs for a simple Employee Management System using Spring Boot 2, JPA, and MySQL as a database.
2. angular10-springboot-client: This project is used to develop single page application using Angular 10 as front-end technology. This Angular 10 application consumes CRUD Restful APIs developed and exposed by a springboot2-jpa-crud-example project.

Below are the screenshots shows the UI of our Employee Management System App:

Employee List Page

Add Employee Page

Update Employee Page

View Employee Details Page

Tools and technologies used

Server-side technologies

• Spring Boot - 2.0.5.RELEASE
• JDK - 1.8 or later
• Spring Framework - 5.0.8 RELEASE
• Hibernate - 5.2.17.Final
• Spring Data JPA - 2+

Database

• MySQL database

Front end technologies

• Angular 10
• Bootstrap 4
• npm- 6.9.0
• JQuery
• Node js 10+

Tools

• Maven - 3.2+
• IDE - Eclipse or Spring Tool Suite (STS) // Spring boot API development
• Visual Studio 2017 // Angular App development
• Angular CLI 10

Move to Part 1 - Develop Spring Boot CRUD Rest APIs 

In the next part 1 of this tutorial series, we will learn how to build CRUD ( Create, Read, Update and Delete) REST APIs using Spring Boot 2 and MySQL database.

Use the below links to visit different parts of this tutorial:

1. Spring Boot + Angular 10 CRUD Example Tutorial - Main Tutorial
2. Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs
3. Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
4. Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
5. Spring Boot  + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
6. Spring Boot 2 + Angular 10 CRUD Full Stack - Part 5 - Running Angular 10 CRUD App

Go to Part 1