Using Angular Router

In Everyday Market, let's implement the following routes:

• /products: This is the default route that displays the product's listing homepage.
• /products/new : This displays the form to create a new product.
• /products/:id : This displays product details for the specified product id. The fact that the id is prefixed with a colon instructs Angular Router to treat it as a parameter and match it with the URL.

These routes are illustrated in the following diagram:

 

Using Angular Router, let's implement client-side routing with the following steps:

1. Create the components to be used in the new routes with the following command:

 ng generate component modules/market/product-view-page

 ng generate component modules/market/product-edit-page

2. Define the market routes configuration in market.module.ts as follows:
   1. Import RouterModule and Routes from the @angular/router package.
   2. Create a routes configuration object.
   3. Import RouterModule as part of MarketModule.
   4. You can remove the exported ProductsPageComponent...