Spring Boot + Angular CRUD Example Tutorial

Author:
In this tutorial, we will learn how to develop a CRUD (Create, Read, Update, Delete) web application using Angular as a front-end and Spring boot 2 restful API as a backend.

Check out the latest Angular 12 and Spring boot 2 integration tutorial at Angular 12 CRUD Example with Spring Boot
Check out this tutorial on my YouTube at Angular 10 + Spring Boot CRUD Full Stack Application
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.

Free YouTube Course - 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 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 Example Tutorial - 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 Example Tutorial - 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 Example Tutorial - 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 Example Tutorial - Part 5 - Running Angular 8 CRUD App

  • Running Angular 8 Client Application
  • Demo

Spring Boot Angular CRUD App Architecture

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

Related Spring and Spring Boot Tutorials/Guides:

Spring Boot Tutorials [500+] Spring Boot Testing Tutorial Spring Boot Microservice Tutorial Spring Boot Kafka Microservices Spring Boot + Apache Kafka Tutorial Spring Core Tutorial Spring MVC Tutorial Spring Data JPA Tutorial Spring Framework for Beginners Spring AOP Tutorial Spring Security Tutorial Spring Exceptions Tutorial Spring Boot Interview Questions Spring Boot Microservices Interview Questions Apache Kafka Tutorials Docker Tutorials and Guides Spring Boot RabbitMQ Tutorials Angular CRUD Example with Spring Boot Spring Boot + Angular 12 CRUD Full Stack Spring Boot + Angular 8 CRUD Full Stack Spring Boot + Angular 10 CRUD Full Stack Spring Boot + React JS CRUD Full Stack React JS ( React Hooks) + Spring Boot Spring Boot Thymeleaf CRUD Full Stack Spring Boot User Registration and Login Node Js + Express + MongoDB CRUD Vue JS + Spring Boot REST API Tutorial

Comments

  1. seb5 September 2019 at 00:06

    where's the sql?

    ReplyDelete
    Replies
    1. Ramesh Fadatare1 December 2019 at 21:20

      Visit all the parts of this tutorial. FYI, we are using spring data JPA (Hibernate) at DAO layer so don't need SQL stuff here.

      Delete
    2. Mohammad Shahul31 January 2020 at 03:45

      hi i didn't found sql scripts for using in work bench.

      Delete
    3. Ramesh Fadatare31 January 2020 at 20:57

      We no need to create table here. We are using Spring Data JPA (Hibernate), which will automatically create table for us. Just create database and configure in spring boot application.properties (look into part 1).

      Delete
  2. AA23 December 2019 at 09:58

    Nice Explanation thanks.
    Have you come across "CORS" issue, if yes how did you fix it.

    This is the exception i see in console....

    Access to XMLHttpRequest at 'http://localhost:8082/getAllEnquires' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    ReplyDelete
    Replies
    1. Joel Augustine17 January 2020 at 07:33

      You can follow this thread for details https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

      Delete
  3. Unknown29 January 2020 at 19:51

    I dont see update button on my screen. Why is that so?

    ReplyDelete
  4. Mohammad Shahul31 January 2020 at 03:46

    hi i didn't found sql scripts for using in mysql workbench.

    ReplyDelete
    Replies
    1. Ramesh Fadatare31 January 2020 at 20:57

      We no need to create table here. We are using Spring Data JPA (Hibernate), which will automatically create table for us. Just create database and configure in spring boot application.properties (look into part 1).

      Delete
    2. Unknown5 April 2020 at 10:18

      user hbm.ddl.auto=true in properties file

      Delete
  5. VRizki12 February 2020 at 23:36

    hi sir Ramesh, how to add the loading icon when requesting http ?
    anyone can help me to found that tutorial ?

    ReplyDelete
  6. Santosh28 March 2020 at 00:19

    hey could you implement login module in this app with spring security

    ReplyDelete
  7. Unknown6 April 2020 at 22:30

    'http://localhost:8080/newproject/api/v1/employees'
    hi this url cannot work properly ..

    ReplyDelete
  8. Unknown15 November 2020 at 13:24

    If you are having issues following this, it is probably CORS issues (research how to tell)

    install the Moesif CORS changer extension. It forces chrome to ignore CORS error (OBVIOUSLY only use this on your private projects, never a public website).

    ReplyDelete
  9. Unknown15 November 2020 at 13:24

    https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-US

    ReplyDelete

Post a Comment

Leave Comment