What you'll learn
In this project you’ll follow along with our instructions and build a music album store product page with Angular 5.x. You’ll create several different components, a Service class to request JSON data over HTTP, and navigate between components with the Angular Router.
Table of contents
Setup
15m
- Set up your local environment for projects. We'll walk you through everything you need to know, including how to install and configure your environment to be able to complete all of the tasks.
The Product Description Component
15m
- Refactor the existing HTML in the Product Page template over to a new component called Product Description.
Creating a Service to Get Album Data
35m
- Create a service class that will make an HTTP request for JSON data, and then refactor HTML in the Product Description template to display values from that response.
Using Interfaces to Describe Data
20m
- Create interfaces for Album and Track data, and refactor the existing components and service class to use those interface type annotations so that your IDE correctly reports any possible type-related mistakes in your code.
Adding the Tracklisting Component
25m
- Refactor existing HTML in the Product Page template over to a new component called Product Tracklisting. Then, use the service class to make an HTTP request for JSON data, and refactor HTML in the Product Tracklisting template to display values from that response.
Displaying a List of Products
25m
- Create a new component called Product List to display a list of all albums, and then update the service class to make an HTTP request for JSON data and use the response to display a list of products in the Product List HTML template.
Creating Navigation using the Angular Router
15m
- Add some routes using the Angular Router and create a simple navigation between components.
About the author
Jon is an author, developer, and Pluralsight team member via Code School. Lately, he's been working on content and products that help authors create content efficiently. Prior to that, he worked for several years on interactive learning at Code School, and later helped bring that to Pluralsight as Interactive Content.