Chapter 3. Navigation with the Angular router
This chapter covers
- Configuring routes
- Passing data while navigating from one route to another
- Having more than one area for navigation (a.k.a. outlet) on the same page using auxiliary routes
- Lazy-loading modules with the router
In chapter 2, you built the home page of the online auction with the intent to create a single-page application (SPA): the main page won’t be reloaded, but its parts may change. You now want to add navigation to this application so it’ll change the content area of the page (we’ll define that a bit later) based on the user’s actions. Imagine that the user needs to be able to see product details, bid on products, and chat with sellers. The Angular router allows you to configure and implement such navigation without performing a page reload.
Not only do you want to be able to change the view inside the page, but you may also want to bookmark its URL so you can get to specific product details faster. To do this, you need to assign a unique URL for each view.
In general, you can think of a router as an object responsible for the view state of the application. Every application has one router, and you need to configure the router to make it work.
We’ll first cover the main features of the router, and then you’ll add a second view (Product Details) to the online auction so that if the user clicks a particular product on the home page, the page’s content will change to display the details of the selected product.