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 application.properties 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 – Expense.java


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 – ExpenseRepository.java


Create service and implementation class to communicate with the repository


ExpenseService.java

ExpenseServiceImpl.java

Create a controller class to expose the rest endpoints – ExpenseController.java


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 –








You can find the Github repository here

You can find the step by step video series here

 

Leave a Reply

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