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.

3.1. Routing basics

You can think of an SPA as a collection of states, such as home, product detail, and shipping. Each state represents a different view of the same SPA.

3.2. Location strategies

3.3. The building blocks of client-side navigation

3.4. Navigating to routes with navigate()

3.5. Passing data to routes

3.6. Child routes

3.7. Hands-on: Adding navigation to the online auction

Summary