Spring Boot + Angular 8 CRUD Example Tutorial


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.

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
  • 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

What you'll learn

  • You will develop your first FULL STACK Application with Angular 8 and Spring Boot 2
  • You will learn the basics of building AWESOME Frontend Applications with Angular 8
  • You will be introduced to building great CRUD RESTful APIs with Spring Boot 2
  • You will learn to solve the challenges of connecting an Angular frontend to a RESTful API
  • You will learn the basics of Angular - Angular Modules, Components, Data Binding and Routing
  • 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

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


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

Comments

Post a Comment