In this tutorial, we will learn how to create Spring Boot application with Angular 11 on the frontend integrated with PostgreSQL database. The tutorial will include simple step-by-step instructions on how to create and connect all the pieces to built a fully-functional application for managing posts.
The application will be constructed using the following architecture:
We can distinguish three main layers:
front-end - with Angular 11 as the main framework, with Templates, Components and HTTP Client for communication with the REST-full application server,
back-end - server side with Spring Boot, Spring REST Controllers, and Spring Data JPA for communication with the database,
database - submitted data will be stored in the PostgreSQL database.
3.1. Technology stack
Spring Boot 2.3.1.RELEASE,
3.2. Project structure
In the structure, we have:
Post - an entity class that is a Java representation of a database table posts,
PostRepository - interface reponsible for CRUD operations on table posts,
PostsController - a REST controller that handles API requests on /posts endpoint,
application.properties - Spring Boot configuration file, contains important credencials for database connection,
pom.xml - file with a Maven dependencies.
3.3. REST API Overview
Spring Boot application server will provide API with the following endpoints:
Get list all created Posts
Get post list filtered by title
Create new Post
Get Post by specific id
Delete Post by specific id
3.3. Setup the Spring Boot project
The pom.xml file have the following structure:
We used several dependencies here:
spring-boot-starter-web - used for building web applications with a Tomcat as a default web embedded container,
spring-boot-starter-data-jpa - Spring Data JPA with Hibernate framework,
spring.jpa.properties.hibernate.dialect - here we need to use org.hibernate.dialect.PostgreSQLDialect in order to connect JPA with PostgreSQL,
spring.jpa.hibernate.ddl-auto - parameter that control export schema DDL to the database, available values are:
validate - validate the schema, makes no changes to the database,
update - update the schema,
create - creates the schema, destroying previous data,
create-drop - drop the schema at the end of the session,
none - is all other cases.
Note that spring.jpa.hibernate.ddl-auto should be switched off in a production environment.
3.5. Entity class
The Post is our entity class that represents table posts in the PostgreSQL database. It contains fiels such as:
id - post id that will be autogenerated UUID,
title - post title,
content - post content,
published flag that tell if post is published,
tags - post tags.
We used some interesting annotation here, like:
@Entity - indicates that the class is a persistent Java object.
@Table - provides a database table that this entity class will represent,
@Id - mark a primary key,
@GenericGenerator - used to automatically generating id for new posts,
@GeneratedValue - define the generation strategy for the primary key.
3.6. Post Request
For the REST request, we prepared a simple POJO object PostRequest that will be used for creating and updating posts.
3.7. Repository interface
The PostRepository is used for interaction with PostgreSQL database. It extends JpaRepository that allows us to used CRUD methods like save(), delete(), findAll(), deleteById() etc.
We also added findAllByTitleContaining(...) method that will be searching for posts with a title that contains a specific string.
The service class PostService is used to separate logic used for managing posts, and to avoid many lines of code in the PostsController:
3.9. REST Controller
Spring REST controller is used to handle requests to /api/posts endpoint.
The annotations we used in this class are as follows:
@RestController to mark a class as a REST controller,
@CrossOrigin to allow cross-domain requests from http://localhost:8081 - the port on which angular will be served,
@RequestMapping to connect a specific endpoint with this particular class.
4.1. Project structure
Front-end Angular 11 project contains two components: post-form and post-list,
post.service is responsible for communication with REST api,
app.module is an Angular main module where we imported modules like Forms and HttpClient,
app.routing.module contains URL with Angular Component matches.
To generate Angular 11 initial workspace we need to run the following commands:
Note that if the --minimal flag is set, ng will create an initial application without any testing frameworks.
Next, we need to create a service and components:
Model object contains fields like id, title, content, tags, published. The same fields exist in the entity class in Java:
4.2. Post service
The PostService is an HTTP Client that will be responsible for communication with a Spring Boot Rest-full API.
4.2. Post list component
The post list component presents a list of posts that could be selected. If a single post has been selected on the right side we will see details about that post with options like Edit, Publish/Unpublish, Delete. The implementation of this component looks as follows:
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:
To start front-end application run:
to change the listening port run the following command:
5.1. Post list
5.2. Create new post
5.3. List with selected post
5.4. Edit post
5.5. Filter posts by title
In this tutorial, we presented how to create a Spring Boot application with Angular 11. The sample application for managing posts should cover the most useful integrations such as:
Angular HttpClient -> Spring Boot Controller,
Spring Data Jpa -> PostgreSQL database.
As usual, the code used in this tutorial is available in our GitHub repository. You can clone it, and change it according to your needs. Have fun!