Spring Boot + Angular 8 CRUD Example Tutorial

Go to Part 1 In this tutorial, we will learn how to develop a CRUD (Create, Read, Update, Delete) Web Application using Angular 8 as a front-end and Spring boot 2 restful API as a backend.

If you are looking for Angular 6 with spring boot 2 integration example then check out Spring Boot + Angular 6 CRUD Example article.

If you are looking for Angular 7 with spring boot 2 integration example then check out Spring Boot 2 + Angular 7 CRUD Example article.

You can download the source code of this tutorial from my GitHub repository at the end of this tutorial.

Check out Angular 8 + Spring Boot Basic Authentication Example - You can implement basic login and logout features in this CRUD example. All the REST calls made from Angular to Spring Boot will be authenticated using Basic Authentication.

Video

This tutorial is explained in below YouTube video. Subscribe to our youtube channel for future updates at https://www.youtube.com/c/javaguides.

Spring Boot + Angular 8 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 8 CRUD, Part 1 - Develop Spring Boot CRUD Rest APIs
  • create employee
  • list employee
  • delete employee
  • update employee
  • get employee by id
2. Spring Boot + Angular 8 CRUD, Part 2 - Create Angular 8 App
  • Install the latest version of Angular CLI
  • Create Angular 8 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 8 CRUD, Part 3 - Develop Angular 8 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 8 CRUD, Part 4 - Angular 8 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 8 CRUD, Part 5 - Running Angular 8 CRUD App
  • Running Angular 8 Client Application
  • Demo

Features Implementation

  • Create an Employee
  • Update an Employee
  • List of Employees
  • Delete Employee
  • View Employee
  • You will develop your first FULL STACK Application with Angular 8 and Spring Boot.

What we will build?

Basically, we will create two projects:
  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. angular8-springboot-client: This project is used to develop single page application using Angular 8 as front-end technology. This Angular 8 application consumes CRUD Restful APIs developed and exposed by a springboot2-jpa-crud-example project.
Below are the screenshots shows UI of our Employee Management System App:

Employee List Page

Add Employee Page

Update Employee Page

View Employee Details Page

Delete Employee

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+

Front end technologies

  • Angular 8.0.0
  • Bootstrap 4
  • npm- 6.9.0
  • JQuery

Tools

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

Move to Part 1 - Develop Spring Boot CRUD Rest APIs

In the next part 1 of this tutorial series, we will learn how to create CRUD REST APIs using Spring Boot 2.

Use below links to visit different parts of this tutorial:
  1. Spring Boot + Angular 8 CRUD Example Tutorial - Main Tutorial
  2. Spring Boot + Angular 8 CRUD, Part 1 - Develop Spring Boot CRUD Rest APIs
  3. Spring Boot + Angular 8 CRUD, Part 2 - Create Angular 8 App
  4. Spring Boot + Angular 8 CRUD, Part 3 - Develop Angular 8 CRUD Operations
  5. Spring Boot + Angular 8 CRUD, Part 4 - Angular 8 CRUD App Configuration
  6. Spring Boot + Angular 8 CRUD, Part 5 - Running Angular 8 CRUD App
Go to Part 1

Comments

Post a Comment