You are currently viewing Angular 9 and Spring Boot CRUD Tutorial – Introduction and Setup

Angular 9 and Spring Boot CRUD Tutorial – Introduction and Setup

Hey in this post, we will develop a full-stack web application using Angular 9 and Spring boot. We will connect this application to the MySQL database and perform the basic database operations like Create, Read, Update, and Delete (CRUD operations). The idea here is to first develop Restful web services using Spring boot and expose the rest endpoints and then using the Angular 9 we will make Http requests to those rest endpoints. So let’s begin…




To keep this post simple let’s develop, let’s develop this application feature by feature, meaning instead developing the backend application first and then consuming those rest endpoints in the frontend, let’s develop this together.

Application features


Following are the application features that we will build as a part of this tutorial

Feature-1, Displaying the records in the browser – This involves the following topics

  • Create spring boot application using Spring initializer
  • Setup the MySQL database
  • Connect spring boot application to MySQL database
  • Create rest endpoint to retrieve the database records
  • Create Angular 9 projects using Angular CLI
  • Make an HTTP GET request to spring boot application
  • Display the records in the browser

Feature-2, Save the record to the database – This involves the following topics

  • Create rest endpoint to save the record
  • Create an angular form to add new record
  • Make an HTTP POST request to spring boot application
  • Save the record to the database

Feature-3, Update the record – This involves the following topics

  • Create rest endpoint to retrieve the single record
  • Make an HTTP GET request to get a single record
  • Populate the record inside the angular form
  • Make an HTTP request to update the record

Feature-4, Delete the record – This involves the following topics

  • Create rest endpoint to delete the record
  • Make an HTTP DELETE request from the angular application
  • Delete the record from the database

Feature-5, Filter the records by keyword – This involves the following topics

  • Create textbox for filters
  • Filter the records using built-in array methods filter() and includes()

Feature-6, Sort the records based on name and amount

  • Create dropdown for sorting
  • Sort the names in ascending order
  • Sort the amount in descending order




What we will build?


We will build an Expense Tracker Application, user can create an expense, update an expense, delete an expense and filter the expenses by keyword and also sort the expenses based on expense name (ascending order) and amount (descending order)

Tools and Technologies Used


  • Spring Boot – 2.3.1.RELEASE
  • JDK – 1.8
  • Spring – 5.2.7.RELEASE
  • Hibernate – 5.4.17. Final
  • Spring Data JPA – 2.3.1.RELEASE
  • Lombok – 1.18.12
  • Maven – 3.3.1
  • Angular 9
  • Bootstrap 4
  • STS – 3.7.2.RELEASE
  • Visual studio code
  • MySQL Server/Workbench

So let’s build this together… I will see inside the Feature 1…


 





You can find the Github repository here

You can find the step by step video series here

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

This Post Has One Comment

  1. osura

    Hi Bushan,

    I love your videos and appreciate the work you do to fulfill our what our universities should comply with.

    I tried making the model and the even got the correct database application.properties from MySQL, but the tables haven’t automatically been made and updated on MySQL. I went a step further and made table and continued the tutorial to have the repos and controller but when i check it from postman, it doesn’t retrieve the data and shows a whitelable.

    Do you know what could be the issue? I appreciate if you could help me out.

    Thanks alot again.
    Osura

Leave a Reply to osura Cancel reply