Search This Blog

Spring Boot 2 + Angular 7 CRUD Example Tutorial

In this tutorial, we will learn how to develop a CRUD (Create, Read, Update, Delete) Web Application using Angular 7 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.You can download the source code of this tutorial from my GitHub repository at end of this tutorial.

What we will build?

Basically, we will create two projects:

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.

angular7-springboot-client: This project is used to develop single page application using Angular 7 as front-end technology. This Angular 7 application consumes CRUD Restful APIs developed and exposed by a springboot2-jpa-crud-example project.

Let me list out tools and technologies used to develop these two applications.

Tools and technologies used

Server-side technologies

Spring Boot - 2.0.4.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 7.2

Bootstrap 4

npm- 6.4.1

JQuery

Tools

Maven - 3.2+

IDE - Eclipse or Spring Tool Suite (STS)

Visual Studio 2017

Angular CLI

Spring Boot CRUD Rest APIs

Let's first we will build a CRUD RESTFul APIs for a Simple Employee Management System using Spring Boot 2 JPA and MySQL. Later we will consume these Rest APIs using Angular 7 client application. Following are five REST APIs (Controller handler methods) are created for Employee resource.

1. Creating and Importing a Project

There are many ways to create a Spring Boot application. The simplest way is to use Spring Initializrat http://start.spring.io/, which is an online Spring Boot application generator.

Look at the above diagram, we have specified the following details:

Generate: Maven Project

Java Version: 1.8 (Default)

Spring Boot:2.0.4

Group: net.guides.springboot2

Artifact: springboot2-jpa-crud-example

Name: springboot2-jpa-crud-example

Description: Rest API for a Simple Employee Management Application

Package Name : net.guides.springboot2.springboot2jpacrudexample

Packaging: jar (This is the default value)

Dependencies: Web, JPA, MySQL, DevTools

Once, all the details are entered, click on Generate Project button will generate a spring boot project and downloads it. Next, Unzip the downloaded zip file and import it into your favorite IDE.

2. Packaging Structure

Following is the packing structure of our Employee Management System -

Or you can start spring boot application via command line using mvn spring-boot:run command.This completes the development of Spring boot CRUD Rest APIs. Now we will develop client application using Angular 7.

Create Angular 7 client application using Angular CLI

Let's use below command to generate Angular 7 Client application. We name this project as "angular7-springboot-client".

ng new angular7-springboot-client

Components, Services, and Modules

Let's list out what are components, service, and modules we are going to create in this application. We will use Angular CLI to generate components, services because Angular CLI follows best practices and saves much of time.

Components

create-employee

employee-list

employee-details

Services

employee.service.ts - Service for Http Client methods

Modules

FormsModule

HttpClientModule

AppRoutingModule.

Employee Class (Typescript class)

employee.ts: class Employee (id, firstName, lastName, emailId)

In this next step, we will generate these components, classes, and services using Angular CLI.

Create Service & Components

Let's auto-generate service and components using Angular CLI. Change your project directory to angular7-springboot-client\src\app and run following commands:

app/app.module.ts

Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

Running Angular 7 Application

Output

Employee List Page

Add Employee Page

Delete Employee

Note that update employee functionality is not implemented so you can take as exercise and try to implement yourself (Tip: Add an update button to the employee list page and based on employee id you can implement update functionality. Note that Rest API is already created for update employee functionality).