In this tutorial, we will present how to create Spring Boot 2 application with the Angular in version 11 and MySQL database. The tutorial will cover the implementation of all layers: the backend, frontend, and database.
2. Architecture
In the application architecture we can distinguish three main layers:
The communication between the front-end and back-end will be implemented using REST API. On the front-end side, we will have an HTTP Client and the back-end will be handling those HTTP requests using Spring REST Controller. The angular application on the front-end side will create a fully-functional user interface to manage posts (adding, edit, search). All data will be saved in the MySQL database, integrated with the application using Spring Data JPA.
3. Back-end
3.1. Technology stack
Java 8
Spring Boot 2.3.1.RELEASE,
MySQL
Maven 3.6.1
3.2. Project structure
Project will have the following structure:
Elements in project structure:
Post - is an entity class representing posts table in Java application,
PostRepository - an interface that extends Spring's JpaRepository class with CRUD operations on posts table,
PostsController - Spring controller used to handle HTTP requests from the Angular HTTP client,
application.properties - the configuration file used by Spring Boot,
pom.xml - Maven dependencies used in the application.
3.3. REST API Overview
The following REST calls will be provided by the Spring Boot application:
URL
HTTP Method
Action
/posts
GET
Get list all created Posts
/posts?title={title}
GET
Get post list filtered by title
/posts
POST
Create new Post
/posts/{id}
GET
Get Post by provided id
/posts/{id}
DELETE
Delete Post by provided id
/posts/{id}
PUT
Update Post
3.3. Setup the Spring Boot project
First, we need to create the pom.xml file have the following dependencies:
Dependencies used in this project:
spring-boot-starter-web - contains a web embedded container for Spring Boot applications,
spring-boot-starter-data-jpa - Spring Data JPA dependency used for interaction with database,
mysql-connector-java - MySQL database driver.
The latest versions of these dependencies could be found in the following links:
spring.jpa.properties.hibernate.dialect - set MySQL dialect org.hibernate.dialect.MySQL5InnoDBDialect to integrate with MySQL database,
spring.jpa.hibernate.ddl-auto - parameter that control export schema DDL to the database - update - update the schema.
3.5. MySQL database
In order to create an MySQL database instance we can used docker commands:
First pull the latest MySQL docker image:
Then start docker with MySQL database in background:
3.6. Entity class
The entity class will contain the following fields:
id - the autogenerated UUID that will be our primary key,
title - contains post title,
content - contains post content,
published - published flag - true/false,
tags - post tags.
The following annotations were used in the entity class:
@Entity - marks the class as a persistent Java object representing table posts from the database.
@Table - a database table that this entity class will represent,
@Id - indicates a primary key for this entity,
@GenericGenerator - automatically generating id,
@GeneratedValue - generation strategy for the primary key.
3.7. Post Request
JSON requests will be represent by the PostRequest object with the following structure:
3.8. Repository interface
The PostRepository that exteds JpaRepository is used for interactions with MySQL database. This object contains all CRUD methods like save(), delete(), findAll(), deleteById().
We created a findAllByTitleContaining(...) method that will be reasponsible for searching posts by a specified title provided in GUI.
3.9. Service class
The PostService is used to create a separete layer between the data access object (PostRepository) and Rest Controller (PostsController):
3.10. REST Controller
The PostsController is a Spring REST controller used to handle HTTP requests. Root endpoint will start with /api/posts URI.
We used here some interesting annotations that need a little explanation:
@RestController used to identify a class as a REST controller,
@CrossOrigin that allows cross-domain requests,
@RequestMapping to connect a specific endpoint with this particular class.
4. Front-end
4.1. Project structure
Angular application contains the following elements:
post-form - and post-list components,
post.service - with HTTP client for communication with Spring Boot Restful application,
post.model - JavaScript object that represents Post in Java application,
app.module - the main Angular module with Forms and HttpClient angular modules imported,
app.routing.module - contains route configuration - connect URL with specific Angular component.
In order to generate Angular initial application we need to run the following commands:
With the --minimal flag ng will create a minimal workspace without testing framework.
Next, we need to create the service and GUI components:
4.2. Model
The model object will represent a Post:
4.2. Post service
The PostService is responsible for communication with Spring Boot REST API:
4.2. Post list component
Post list component will be presenting a list of posts. The details will be presented on the right panel when post will be selected on the list.
4.2. Post form component
Post form component will be used to create new posts and also edit an existing one.
5. Run and Test Application
To run back-end Spring Boot application server we need to run:
or
To start front-end application on a default port 4200 run:
If the ng command is not found install it using npm (-g flag will install it globally):
Application presents the following functionality:
6. Conclusion
In this tutorial, we presented how to create a Spring Boot 2 application with Angular 11 integrated with MySQL database.
As usual, the code used in this tutorial is available in our GitHub repository.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}