Lesson Weekend

The Angular applications we've created so far are single-page apps. Last week, before using Angular CLI, the URL of our To Do List was always localhost:3000 no matter what the application or user was doing, displaying, or clicking.

While Angular allows us to perform many dynamic actions on a single page, sometimes our applications require multiple pages. In the next few lessons we'll learn how creating multi-page apps differs from the single-page apps we've made so far. We'll also plan what pages the application we're creating together should contain.

This lesson will only cover planning the structure of our new app. You do not need to create any of the components discussed here yet. We'll create the components detailed here together in upcoming lessons.

Planning the Component Tree

Let's start building an online store together. The online store in our lesson will sell music Albums. You may also choose to put a different product in your online store. You can see just a few of the large online marketplaces built in Angular here.

What will our multi-page online store application require? We'll focus on the pages detailed below for now and then add more features later this week.

Root Module

Our content will reside in the default root module and root component. The root module, as usual, will contain the root component.

Our root component will contain special <router-outlet></router-outlet> tags. The content for all our different routes will render between these tags.

route-planning-1

Welcome Page

We'll want a welcome page (sometimes called a "splash page") to greet visitors. Just as with other online stores, this page will appear when the user visits the homepage of our site: 'localhost:4200/'. Its contents will reside in a WelcomeComponent. (We actually already generated this component in a previous lesson, while testing out Angular CLI commands. But we'll populate it with content together in an upcoming lesson).

When a user navigates to this route, the WelcomeComponent will be displayed between the <router-outlet> tags in the root AppComponent.

route-planning-2

About Page

We'll also include an about page. This could contain an introduction or backstory for our fictional store, contact information, and anything else that might be helpful for users to know.

This page will appear when the user visits 'localhost:4200/about' in the browser. Its contents will eventually reside in an AboutComponent.

route-planning-2

Marketplace Page

We also need an area to display items for sale. The data on this page will change as we add new products, sell out of products and put items on sale.

It will be located at 'localhost:4200/items' in the browser. Its contents will eventually reside in a MarketplaceComponent.

route-planning-3

Album Page

We also want users to be able to click any Album on the Marketplace page in order to see a page detailing that particular item. We'll eventually include an "Add to Cart" option here, too.

This page will appear when the user clicks on a specific Album. Its URL will change depending on the selected Album. For instance, selecting the Album with an id property of 1 would result in the URL localhost:4200/albums/1. This is called dynamic routing.

The content for this page will eventually reside in an AlbumDetailComponent.

route-planning-4

Now that we've planned out the basic pages our application should have, we can implement a router. The router will be responsible for matching different URLs to the components, templates, and other content required to render different areas of our sites within the <router-outlet> tags.