Angular 9 and Spring Boot CRUD Tutorial – Feature 1 Display list of records in browser

Hey in this post we will quickly create spring boot and angular 9 application and create rest endpoint to retrieve the list of records. We will also make HTTP GET requests from the angular application to the rest endpoint which is exposed by spring boot application. let’s begin…

Create Spring Boot Application using Spring Initializer

There are many ways to create spring boot application, the quick and easy way to create a spring boot application is from Spring InitializrOne thing about spring initializer is that it keeps updating, so when you navigate this website you may not see the screen which is showing the above. Make sure the enter the details correctly –

  • Project – Maven
  • Language – Java
  • Spring boot version – 2.3.1 (this may varies time to time)
  • Project metadata
    • Group – in.bushansirgur
    • Artifact – expensetracker
    • Name – Expense Tracker
    • Description – Full stack application with Angular and spring boot
    • Package name – in.bushansirgur.expensetracker
    • Packaging – jar
    • Java – 8
  • Dependencies
    • Spring web
    • Spring boot devtools
    • Lombok
    • Spring Data JPA
    • Mysql driver

Create generate button, this will download the project in zip format, extract it, open it in any IDE eclipse/sts/IntelliJ

Spring Boot Project Structure

Let’s open the files one by one and add the following code…

pom.xml contains the following dependencies

Configure the database

As we added the dependency MySQL driver, now let’s configure the database inside the file.

spring.jpa.generate-ddl=true this will help us to create tables inside the database when we run the application.

Make sure the that you already have database created with name expensetracker inside the mysql database

Create an entity class –

if you remember, we have added the Lombok dependency while creating the spring boot application, its a java library, helps us to reduce all the boilerplate code, we don’t need to override the setters and getters inside the entity class instead we can use @Setter and @Getter annotation, Lombok behind the scenes creates setters and getters for us.

Create a repository to perform database operations –

Create service and implementation class to communicate with the repository

Create a controller class to expose the rest endpoints –

Now this will expose the rest endpoint, http://localhost:8080/expenses

Next, let’s create angular 9 application and make HTTP GET request to above rest endpoint to get the list of expenses

Create angular project

We will create an angular project using Angular CLI, let enter the following command inside your command prompt

You can read more about angular cli here

this will ask you a couple of questions, the first question is to adding support for routing, enter no, later we will add manually, next it will ask which stylesheet to use, make sure to select CSS, that’s it, with this it will create an angular project for us.

Angular project structure

following is the directory structure for angular 9 project –

Create a model, component, and service using Angular CLI

To create a model class

–skipTests will not create the spec files

To create component
To create service

Here c – component, s – service and g – generate

Let’s open index.html and add the bootstrap4 library for styling –

Next, open app.module.ts file and add the following code –

So I have created 4 routes,

  • expenses – for displaying the list of expenses
  • addexpense – adding/editing an expense
  • editexpense/:id – getting a single expense
  • '' – this navigate to /expenses route

Next, open app.component.html and add the router-outlet to display the view template –

Next, open expense.ts file and add the following code –

Next, open expense.service.ts file and add the following code –

Next, open list-expenses.component.ts and add the following code –

Now, open list-expenses.component.html and add the following code –

With this in place, now if you run the application, you will see the following output –

IntroductionFeature – 2

You can find the Github repository here

You can find the step by step video series here


About the author

Bushan Sirgur

Well, I am Bushan Sirgur from Banglore, India. Currently, I am working as a Software Developer in a Service Base Company. I am interested in JAVA/J2EE, Angular 2, JavaScript, jQuery, MongoDB.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *