5 SportsStore: A real application

 

This chapter covers

  • Creating the SportsStore project
  • Starting a data model with dummy data
  • Using signals to track changes in data
  • Displaying a list of products to the user
  • Filtering products by category
  • Paginating products

In chapter 2, I built a quick and simple Angular application. Small and focused examples allow me to demonstrate specific Angular features, but they can lack context. To help overcome this problem, I am going to create a simple but realistic e-commerce application.

My application, called SportsStore, will follow the classic approach taken by online stores everywhere. I will create an online product catalog that customers can browse by category and page, a shopping cart where users can add and remove products, and a checkout where customers can enter their shipping details and place their orders. I will also create an administration area that includes create, read, update, and delete (CRUD) facilities for managing the catalog—and I will protect it so that only logged-in administrators can make changes. Finally, I show you how to prepare and deploy an Angular application.

My goal in this chapter and those that follow is to give you a sense of what real Angular development is like by creating as realistic an example as possible. I want to focus on Angular, of course, and so I have simplified the integration with external systems, such as the data store, and omitted others entirely, such as payment processing.

5.1 Preparing the project

5.1.1 Installing the additional NPM packages

5.1.2 Preparing the RESTful web service

5.1.3 Preparing the HTML file

5.1.4 Creating the folder structure

5.1.5 Running the example application

5.1.6 Starting the RESTful web service

5.2 Preparing the Angular project features

5.2.1 Updating the root component

5.2.2 Inspecting the root module

5.2.3 Inspecting the bootstrap file

5.3 Starting the data model

5.3.1 Creating the model classes

5.3.2 Creating the dummy data source

5.3.3 Creating the model repository

5.3.4 Creating the feature module

5.4 Starting the store

5.4.1 Creating the store component and template

5.4.2 Creating the store feature module

5.4.3 Updating the root component and root module

5.5 Adding store features

5.5.1 Displaying the product details

5.5.2 Adding category selection

5.5.3 Adding product pagination

5.5.4 Creating a custom directive

5.6 Summary