Book Image

Spring Boot and Angular

By : Devlin Basilan Duldulao, Seiji Ralph Villafranca
Book Image

Spring Boot and Angular

By: Devlin Basilan Duldulao, Seiji Ralph Villafranca

Overview of this book

Angular makes building applications with the web easy and Spring Boot helps get an application up and running using just a few lines of code and minimal configuration. This book provides insights into building full-stack apps using Angular and Spring Boot effectively to reduce overall development time and increase efficiency. You'll start by setting up your CI/CD pipeline and then build your web application’s backend guided by best practices. You'll then see how Spring Boot allows you to build applications faster and more efficiently by letting the Spring Framework and Spring Boot extension do the heavy lifting. The book demonstrates how to use Spring Data JPA and add its dependencies along with Postgres dependencies in the project to save or persist a user's data in a database for future use. As you advance, you'll see how to write tests and test a service using Mockito. Finally, you'll create a CI workflow or pipeline for a Spring Boot and Angular application to enable operations to deliver quality applications faster. By the end of this Spring Boot and Angular book, you'll be able to build a full-stack web application and deploy it through continuous integration and continuous deployment.
Table of Contents (24 chapters)
Part 1: Overview of Spring Boot and Angular Development
Part 2: Backend Development
Part 3: Frontend Development
Part 4: Deployment

Adding an item with side effects using NgRx

In this section, we will implement the add functionality with side effects in NgRx. The steps are similar to how we implemented the delete feature. We will create the building blocks step by step and create the dispatch logic in our component.

Creating the actions

The first step we need to do is create the required action types and actions for our add feature. To implement the actions, we can think of how we created the actions for the delete feature.

The concept is the same. There are two action types that we need to create, and these are ADD_ANTI_HERO_API and ADD_ANTI_HERO_STATE. The first type will be used by the effect that will call the API, and the second type will be used by the reducer that will modify the state by adding the newly created data.

After creating the two action types, we also need to create an action using the createAction() function for the ADD_ANTI_HERO_STATE type. The effect will dispatch this once the...