Spring Boot and Angular: Hands-on full stack web development with Java, Spring, and Angular

BIRMINGHAM—MUMBAI

Spring Boot and Angular

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Hayden Edwards

Content Development Editor: Abhishek Jadhav

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Project Coordinator: Sonam Pandey

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Aparna Bhagat

Marketing Coordinator: Anamika Singh

First published: December 2022

Production reference: 1021222

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80324-321-4

www.packt.com

To my father Alberto Duldulao, I miss you, tay (dad). On the day I lost you, I lost a father, a friend, and an idol who I looked up to. You will always be in my heart, tay. I miss you every day. Thanks again for your love, support, and inspiration.

– Devlin Duldulao (Utoy)

To my mother Arceli Villafranca, who gave everything to me and who is the reason why I’m here. To my sister Sheila Villafranca, who always supports me, and to my partner Shey Cadavero, who gives me strength and inspiration every day.

– Seiji Villafranca

Contributors

About the authors

Devlin Basilan Duldulao is a full-stack engineer with over 8 years of web, mobile, and cloud development experience. He has been a recipient of Microsoft’s Most Valuable Professional (MVP) award since 2018 and earned the title of Auth0 Ambassador for his passion for sharing best practices in application securities. Devlin has passed some prestigious exams in software and cloud development such as the MSCD, Azure Associate Developer, AWS Associate Developer, and Terraform Associate certifications.

Perhaps it was serendipity that made him venture into the coding world after a short stint in the medical field. However, once he stepped into it, he fell for it hook, line, and sinker – but in the right way, he claims. Devlin often finds himself engrossed in solving coding problems and developing apps, even to the detriment of his once-active social life.

One of the things that motivates him is ensuring the long-term quality of his code, including looking into ways to transform legacy code into more maintainable and scalable applications. Devlin enjoys tackling challenging projects or applications for high-level clients and customers, as he currently does at his company based in Norway. He also provides training and consultation for international corporations.

One of his other interests is giving talks at IT conferences worldwide and meeting unique people in the industry. Devlin is currently based in Oslo, Norway with his wife. He is a senior software engineer at Inmeta Consulting, a subsidiary of the Crayon group of companies.

Seiji Ralph Villafranca graduated cum laude with a BSc in computer science from the University of Santo Tomas in the Philippines. He has 6 years of experience in web and mobile development and has also earned the title of Auth0 Ambassador for his passion for application security. He holds several certifications in Angular development from beginner to expert level.

Seiji is also one of the community leaders of Angular Philippines, which is the largest Angular group in the Philippines; the community has led him to speak at different meetups of tech communities, workshops, and even local and international conferences. He is enthusiastic about sharing knowledge of coding and organizing events and meetups for the community, as well as writing content for students and professionals. He also has been a mentor at several hackathons, as he loves the startup community.

Seiji loves to develop new projects that are on the web or mobile and he is currently a senior software engineer at a company based in Malaysia. He is not only a coder but also a mentor, teacher, and trainer for students, professionals, and companies.

About the reviewer

Rajeshkumar Muthaiah works as Technical Lead in an international bank. He has strong experience in designing and developing high scale applications using a wide range of technologies since 2010. He works on various technologies including Java, Dart, Flutter, Angular, React, Spring, Hibernate, and Sass. Rajeshkumar has worked on various industries including Aviation, Banking, and Finance. He is very passionate about learning new technologies.

When not working on code, he likes reading books, as well as solving puzzles and traveling. He is very fond of cubes such as 5x5, megaminx, pyraminx, and so on., Currently, he lives with his wife Ranju in Singapore.

Table of Contents

Preface

Part 1: Overview of Spring Boot and Angular Development

1

Spring Boot and Angular – The Big Picture

Technical requirements

Introducing Spring Boot

The advantages of using Spring Boot

Differences between Spring and Spring Boot

Dependency examples for Spring and Spring Boot

What’s new in Java 17?

Sealed classes

The foreign function and memory API

Pattern matching with switch statements

The Applet API

The experimental AOT and JIT compilers

Introducing Angular

History of Angular

The advantages of using Angular

Summary

2

Setting Up the Development Environment

Technical requirements

Installing VS Code and IntelliJ IDEA

VS Code

IntelliJ IDEA

Installing Java 17

Windows installation

macOS installation

Linux installation

Installing SDKMAN

SDKMAN features

Installation on macOS and Linux

Installation on Windows

Setting up IntelliJ IDEA with Java 17

Using Java 17 on new projects

Using Java 17 on existing projects

Installing REST Client VS Code or JetBrains and Angular DevTools

Installing REST Client in VS Code

Installing Angular DevTools

Installing Git version control

Summary

Part 2: Backend Development

3

Moving into Spring Boot

Technical requirements

Understanding Spring Boot

Spring Boot architecture

Spring Boot flow architecture

Understanding REST

Using Spring Initializr

Web-based interface

Via IntelliJ IDEA

Dependency injection

Inversion of control

The basics of dependency injection

Annotation and beans

Types of annotations

Understanding beans

Summary

4

Setting Up the Database and Spring Data JPA

Technical requirements

Connecting to a database using a PSQL container

PostgreSQL

Installing PostgreSQL

Spring Data JPA

The advantages of Spring Data JPA

Repositories provided by Spring Data JPA

Spring Data JPA on Spring Boot

Adding Spring Data JPA and PostgreSQL dependencies

Adding with Spring Initializr

Adding an existing project

Connecting to a database

Configuring the database properties

Connecting using Spring JDBC

Connecting using Spring Data JPA

Summary

5

Building APIs with Spring

Technical requirements

Starting the server

Adding models

Creating models with DTOs and Lombok

Writing services

JPA repository

Adding controllers

Adding Redis for caching

Installing the Redis server

Configuring Redis on Spring Boot

Summary

6

Documenting APIs with the OpenAPI Specification

Technical requirements

Setting up springdoc-openapi

The properties of springdoc-openapi

The plugins of springdoc-openapi

Configuring springdoc-openapi

Setting up Swagger UI

Installing and using Swagger UI

Displaying pagination information in Swagger UI

Summary

7

Adding Spring Boot Security with JWT

Technical requirements

Understanding CORS

How CORS works

Adding a CORS policy

CORS applications for each method

CORS applications at the controller level

CORS application at the controller and method levels

Global CORS configuration

Understanding Spring Security

Features of Spring Security

Authentication and authorization in Spring Boot

Configuring Spring Boot and implementing authentication

Creating user endpoints

JWT

IDaaS

Types of IDaaS

Summary

8

Logging Events in Spring Boot

Technical requirements

Getting started with SLF4J and Log4j2

Features of a logging framework

Logging using SLF4J

Methods and classes of SLF4J

Features of SLF4J

Logging using Log4j2

The Log4j2 Logger

Log4j2 Appenders

Log4j2 Layouts

Log4j2 Markers

Log4j2 Filters

Setting up SLF4J and Log4j2

Configuring Logback

Configuring Log4j2

Using logs

Annotations in Lombok

Summary

9

Writing Tests in Spring Boot

Technical requirements

Understanding JUnit and AssertJ

JUnit framework

Assertions in JUnit

Annotations

Using AssertJ

Character assertions

Class assertions

Iterable assertions

File assertions

Map assertions

Writing a test

Testing with the H2 database

Testing a repository

Writing tests in a service using Mockito

Adding behavior

Verifying behavior

Expecting calls

Exception handling

Mockito in Spring Boot

Summary

Part 3: Frontend Development

10

Setting Up Our Angular Project and Architecture

Technical requirements

Organizing features and modules

Generating an Angular project

Angular features

Creating the Angular folder structure

Implementing the structure

Structuring components

Smart and dumb or presentation components

Implementing smart and dumb components in the project

Adding Angular Material

Configuring Angular Material

Implementing Angular Material

Summary

11

Building Reactive Forms

Technical requirements

Understanding reactive forms

The template-driven approach

The reactive approach

Basic form controls

Form control methods

Initializing form controls

Resetting form controls

Listening to events

Grouping form controls

Creating form groups

Creating nested form groups

Creating form arrays

Using the FormBuilder service to generate controls

Validating form input

Built-in validators

Custom validators

Implementing reactive forms in our project

Summary

12

Managing States with NgRx

Technical requirements

Understanding complexities in managing the states of large applications

The flow of data without state management

The flow of data with state management

State management and the global state

Global state/store

Actions

Reducers

Selectors

Effects

Getting started and setting up NgRx

Adding NgRx to our Angular project

Installing NgRx DevTools

Writing an action

Implementing actions in the project

Writing an effect

Writing a reducer

The state interface

The initial state

The reducer function

Writing a selector and using a selector and dispatching it in a component

Selecting root states

Selecting feature states

Implementing selectors in our project

Configuring the store

Runtime checks

Summary

13

Saving, Deleting, and Updating with NgRx

Technical requirements

Removing an item without a side effect using NgRx

Creating the delete action

Creating the delete reducer

Dispatching the action

Removing an item with side effects using NgRx

Creating a new action type

Creating the delete effect

Modifying the dispatch

Adding an item with side effects using NgRx

Creating the actions

Creating the effect

Creating the reducer

Dispatching the action

Updating an item with a side effect using NgRx

Creating the actions

Creating the effect

Creating the reducer

Dispatching the action

Summary

14

Adding Authentication in Angular

Technical requirements

Adding user authentication

The authentication API

The HTTP interceptor

The authentication module

The routing module

Protecting routes

Project implementation

Calling an API

Creating the actions

Creating the effects

Creating the reducers

Creating the selectors

Syncing in local storage

Dispatching and selecting a component

Summary

15

Writing Tests in Angular

Technical requirements

Getting started with Cypress

Installation

Updating the Cypress config file

Writing Cypress tests

Mocking HTTP responses and intercepting HTTP requests

Summary

Part 4: Deployment

16

Packaging Backend and Frontend with Maven

Technical requirements

What is frontend-maven-plugin?

Adding configurations to Spring Boot and Angular’s integration

Adding the Angular app to the Spring Boot project

Using frontend-maven-plugin

Using maven-antrun-plugin

Implementing WebMvcConfigurer

Packaging Spring Boot

Running the JAR file

Summary

17

Deploying Spring Boot and the Angular App

Technical requirements

Understanding GitHub Actions

Components of GitHub Actions

Setting up Heroku

Creating GitHub and Heroku accounts

Creating a new app in Heroku

Adding a Postgres database

Adding system properties

Adding config variables

Manual deployment in Heroku

Creating a CI workflow or pipeline

Summary

Index

Other Books You May Enjoy

Preface

Spring Boot provides JavaScript users with a platform to get an application up and running with just a few lines of code. At the same time, Angular is a component-based framework that makes building a web application’s frontend easy. This book explains how Spring Boot and Angular work together to help you create full-stack applications quickly and effectively.

In this book, you will begin by exploring why Spring Boot and Angular are in-demand frameworks, before being guided by expert solutions and best practices to build your own web application. Regarding the backend, you will see how Spring Boot allows you to build applications efficiently by letting the Spring Framework and Spring Boot extension do the heavy lifting, while using Spring Data JPA and Postgres dependencies in your project to save or persist data in a database. With the frontend, you will use Angular to construct a project architecture, build Reactive forms, and add authentication to avoid malicious users stealing data from the application.

Finally, you will see how to test services with Mockito, deploy applications using continuous integration and continuous deployment, and integrate Spring Boot and Angular to create a single package so that, by the end of the book, you will be able to build your very own full-stack web application.

Who this book is for

The book is for busy Java web developers and TypeScript developers with little experience of developing Angular and Spring Boot apps who want to learn about the best practices for building full-stack web apps.

What this book covers

Chapter 1, Spring Boot and Angular – The Big Picture, serves as a short recap regarding Spring Boot and Angular’s current state to give you a glimpse of what lies ahead in the web development of Java Spring Boot and Angular. You will also see how stable and reliable Vue.js is as an app and the team behind writing and maintaining the Vue.js framework.

Chapter 2, Setting Up the Development Environment, teaches you how to set up your computer’s development environment to build backend and frontend web applications. We will turn to different IDEs and text editors to write the code and make sure everything has been set up before we proceed in the app development.

Chapter 3, Moving into Spring Boot, uncovers the inner workings of Spring Boot and how to start a project using Spring Initializr. This chapter will also teach you about the concept of dependency injection and the IoC container. This chapter will also tackle how Beans and annotations work.

Chapter 4, Setting Up the Database and Spring Data JPA, helps you to connect the Java Spring Boot to a database. This chapter will describe Spring Data JPA and how to add Spring Data JPA and Postgres dependencies in the project. This chapter will also show how to use a config file to connect the Java Spring Boot to a Postgres database instance.

Chapter 5, Building APIs with Spring, shows you how to start and run a Java Spring Boot application. This chapter will also show how to add models for the application and use them when writing routers and controllers. Afterward, this chapter will explain how to use Redis for caching to improve the performance of an application.

Chapter 6, Documenting APIs with OpenAPI Specification, covers the documentation part of the APIs of the Java Spring Boot application. This chapter will also show you how to include the Swagger UI in the application to provide graphical interfaces in the documentation of APIs.

Chapter 7, Adding Spring Boot Security with JWT, details what CORS is and how to add a CORS policy in the Spring Boot application. This chapter describes Spring security, authentication, and authorization. This chapter will also demonstrate how JSON web tokens work and what Identity as a Service (IaaS) is.

Chapter 8, Logging Events in Spring Boot, explains what logging is and what the popular packages to implement logging are. This chapter will also teach you where to save logs and what to do with logs.

Chapter 9, Writing Tests in Spring Boot, is all about writing tests for a Java Spring Boot application. This chapter describes JUnit and AssertJ. This chapter will also teach you how to write tests, how to test a repository, and how to test a service using Mockito.

Chapter 10, Setting Up Our Angular Project and Architecture, focuses on how to organize features and modules, how to structure components, and how to add Angular Material.

Chapter 11, Building Reactive Forms, demonstrates how to build Reactive forms, basic form control, and grouping form controls. This chapter will also explain how to use FormBuilder and validate form input.

Chapter 12, Managing States with NgRx, covers state management in complex applications. This chapter will also introduce NgRx and how to set it up and use it in an Angular application.

Chapter 13, Saving, Deleting, and Updating with NgRx, describes how to remove an item using NgRx, how to add an item using NgRx, and how to update an item using NgRx.

Chapter 14, Adding Authentication in Angular, explores how to add user login and logout, retrieve user profile information, protect application routes, and call an API with protected endpoints.

Chapter 15, Writing Tests in Angular, illustrates how to write basic Cypress tests and how to mock HTTP requests for testing.

Chapter 16, Packaging Backend and Frontend with Maven, exemplifies how to utilize the Maven frontend plugin for Angular and Spring Boot to integrate them into one package.

Chapter 17, Deploying Spring Boot and the Angular App, describes CI/CD and GitHub Actions. This chapter will also show you how to create a CI workflow or pipeline for a Spring Boot and Angular application.

To get the most out of this book

You should ensure that you have a basic understanding of HTML, CSS, JavaScript, TypeScript, Java, and REST API. You don’t need intermediate or advanced knowledge of the requirements mentioned.

Don’t lose hope if you are facing problems when installing runtimes, SDKs, or any software tools in general when developing an application. Errors are common, but searching for error messages on Google greatly helps developers when troubleshooting certain problems.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Play around with Angular on stackblitz.com or codesandbox.io to see the look and feel of Angular without installing anything on your computer.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Spring-Boot-and-Angular. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/pIe6D.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: Spring Boot only requires spring-boot-starter-web, which is a Spring Starter, for our application to run.

A block of code is set as follows:

@Configuration

public class AppConfig

{

   @Bean

   public Student student() {

       return new Student(grades());

    }

   @Bean

   public Grades grades() {

      return new Grades();

    }

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

dependencies {

   implementation 'org.springframework.boot:spring-boot-

   starter-data-jpa'

   runtimeOnly 'com.h2database:h2'    runtimeOnly 'org.postgresql:postgresql'

}

Any command-line input or output is written as follows:

rpm -ivh jdk-17.interim.update.patch_linux-x64_bin.rpm

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: Select Spring Initializr and this will open a form with the same web interface.

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Spring Boot 3 and Angular, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/?asin=180324321X for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803243214

Submit your proof of purchase

That’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: Overview of Spring Boot and Angular Development

This part contains a real-world scenario on how to start a web application project. The following chapters are covered in this part:

Chapter 1, Spring Boot and Angular – The Big Picture

Chapter 2, Setting Up the Development Environment

1

Spring Boot and Angular – The Big Picture

First of all, we would like to thank you for getting a copy of this book, which was created for developers to learn how to build a full-stack web application using the standards that are being used in the development industry. This book is tailored based on the applications we have developed from our training and workshops. So, let’s begin our adventure.

This chapter will serve as a short recap regarding the Java Spring Boot and Angular foundations to give you an idea of what lies ahead in terms of conducting web development for them. You will also learn how large the community is and that the support that’s available for Angular makes it reliable for developing applications.

In this chapter, we will cover the following topics:

Introducing Spring Boot

The advantages of using Spring Boot

What’s new in Java 17

Introducing Angular

The advantages of using Angular

Technical requirements

The GitHub repository for the application we will be building can be found at https://github.com/PacktPublishing/Spring-Boot-and-Angular.

Every chapter has a directory where the completed portion of the project is located.

Note

No directories will be available for Chapter 1, Spring Boot and Angular – The Big Picture, to Chapter 4, Setting Up the Database and Spring Data JPA because most of the topics we will be covering will consist of theories and some sample code. The actual project will begin in Chapter 5, Building APIs with Spring.

Introducing Spring Boot

Spring Boot is an open source micro framework from Pivotal. It is an enterprise-level framework for developers to create standalone applications on Java Virtual Machines (JVMs). Its primary focus is to shorten your code so that it’s easier for you to run your application.

The framework extends the Spring Framework, which provides you with a more opinionated way of configuring your applications. In addition, it comes with built-in autoconfiguration capabilities that configure both the Spring Framework and third-party packages based on your settings. Spring Boot uses this knowledge to avoid code errors at configuration time as it reduces boilerplate code when you’re setting up our application.

Now, let’s discuss the main advantages of using Spring Boot.

The advantages of using Spring Boot

The following are the four main advantages of using Spring Boot to develop applications:

Autoconfiguration: When you’re configuring your Spring Boot application, it downloads all the dependencies that will be needed to run your application. It will also configure your Spring Framework with the relevant third-party packages, depending on the settings you have applied. Thus, Spring Boot avoids boilerplate code and configuration errors, and you can directly start developing your Spring application.

Opinionated approach: Spring Boot uses a narrow approach to installing dependencies based on your application needs. It will install all the required packages of your application and removes the idea of configuring it manually.

Spring starters: You can choose a list of starter dependencies to define your application’s expected needs during the initialization process. One example of a Spring Starter is Spring Web, which allows you to initialize a Spring-based web application without configuring the dependencies that are required to run the application. Instead, it will automatically install the Apache Tomcat Web Server and Spring Security for authentication features.

Create standalone applications: Spring Boot can run standalone applications that have no dependencies on external web servers. For example, we can embed servers such as Tomcat and run the application.

Differences between