- Lab
- Core Tech
Build an Album Store Product Page with Angular
In this code lab, you'll follow instructions to 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.
Path Info
Table of Contents
-
Challenge
The Product Description Component
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.
In this module you'll refactor the existing HTML in the Product Page template over to a new component called Product Description.
To run the project, in the Terminal, type in
npm start. ### Solution The solution can be found in thesolutiondirectory. -
Challenge
Creating a Service to Get Album Data
In this module you'll 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.
-
Challenge
Using Interfaces to Describe Data
In this module you'll 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.
-
Challenge
Adding the Tracklisting Component
In this module you'll refactor existing HTML in the Product Page template over to a new component called Product Tracklisting. Then, you'll 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.
-
Challenge
Displaying a List of Products
In this module you'll create a new component called Product List to display a list of all albums, and then you'll 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.
-
Challenge
Creating Navigation using the Angular Router
In this module you'll add some routes using the Angular Router and create a simple navigation between components.
What's a lab?
Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.
Provided environment for hands-on practice
We will provide the credentials and environment necessary for you to practice right within your browser.
Guided walkthrough
Follow along with the author’s guided walkthrough and build something new in your provided environment!
Did you know?
On average, you retain 75% more of your learning if you get time for practice.