Chapter 3. Router basics
This chapter covers
- Configuring parent and child routes
- Passing data while navigating from one route to another
- Configuring and using child routes
In a single-page application (SPA), the web page won’t be reloaded, but its parts may change. You’ll want to add navigation to this application so it’ll change the content area of the page (known as the router outlet) based on the user’s actions. The Angular router allows you to configure and implement such navigation without performing a full page reload.
In general, you can think of a router as an object responsible for the view state of the application. Every application has one router object, and you need to configure the routes of your app.
In this chapter, we’ll discuss the major features of the Angular router, including configuring routes in parent and child components, passing data to routes, and adding router support to the HTML anchor elements.
The ngAuction app now has a home view; you’ll add a second view so that if the user clicks the title of a product on the home page, the page’s content will change to display the details of the selected product. At any given time, the user will see either the HomeComponent or the ProductDetailComponent in the <router-outlet> area.