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: ...

Get Hands-On Full-Stack Web Development with ASP.NET Core now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.