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?
- Learn how to develop a CRUD Full Stack application with Angular front-end and Spring Boot back-end
- You will learn how to Build great RESTful APIs with Spring Boot and the MySQL database.
- You will learn how to connect Spring boot application to MySQL database and perform CRUD operations.
- You will learn to solve the challenges of connecting an Angular Frontend to a RESTful API ( spring boot)
- You will learn to connect REST API to JPA/Hibernate with Spring Boot
- You will learn to use a wide variety of Spring Boot Starter Projects - Spring Boot Web, and Spring Boot Data JPA
- 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
- 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
- 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
- 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
- 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):
- 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.
- 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:
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:
Go to Part 1Use the below links to visit different parts of this tutorial:
- Spring Boot + Angular 10 CRUD Example Tutorial - Main Tutorial
- Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs
- Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
- Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
- Spring Boot + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
- Spring Boot 2 + Angular 10 CRUD Full Stack - Part 5 - Running Angular 10 CRUD App
Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours
Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course