Setting Up a Backend

A web CRUD application usually connects to a server and uses an HTTP backend API to perform operations on data. It fetches existing data, updates it, creates new data, or deletes it. In a real-world scenario, we will most likely interact with a real backend API service through HTTP. There are cases, though, where we do not have access to a real backend API:

• We may work remotely, and the server is only accessible through a VPN connection to which we do not have access.

• We want to set up a quick prototype for demo purposes.

• Available HTTP endpoints are not yet ready for consumption from the backend development team, a common problem when working in a large team of different types of developers.

To overcome all the previous obstacles during development, we can use a fake server using the Fake Store API. The Fake Store API is a backend REST API available online that we can use when we need fake data for an e-commerce or e-shop web application. It can manage products, shopping carts, and users that are available in the JSON format. It exposes the following main endpoints:

• products: This manages a set of product items.

• cart: This manages the shopping cart of a user.

• user: This manages a collection of application users.

• login: This handles user authentication.

All operations that modify data in the previous endpoints do not persist data in the database. However, they return an indication if the operation was successful. All GET operations in the previous endpoints return a predefined collection of data.

Note: In this chapter, we will work only with the products and login endpoints. However, we will revisit the cart endpoint later in the course.

Handling CRUD data in Angular

CRUD applications are widespread in the Angular world, particularly in the enterprise sector. We will hardly find any web application that does not follow this pattern. Angular does a great job supporting this type of application by providing the HttpClient service. In this section, we will explore the Angular HTTP client by interacting with the products endpoint of the FakeStore API. In particular, we will create an Angular CRUD application to manage products from our products module. Let’s get started by scaffolding our application:

1. Create a new Angular application using the following Angular CLI command:

Note: The command below is for creating a new Angular application on the local machine using the Angular CLI.