7 Routing

 

This chapter covers

  • What routes are and demonstrates how to create them
  • Different patterns for navigation and their merits
  • How to protect pages from access without authorization
  • Organizing code into modules
  • Using secondary routes for multiple routes

Most applications require the ability to navigate between different pages during the lifecycle of the application. Typically, an application has at least a few basic pages, such as a login page, home page, user’s account page, and so forth. Routing is the term used to describe the capability for the application to change the content on the page as the user navigates around. Our previous chapter examples haven’t used routing; they’ve been limited to displaying all the content at once.

The web has a well-established pattern of using URLs to maintain the current location of a user. This has traditionally happened (and often still does today) by the browser requesting a page from a server and the server responding with the necessary HTML, CSS, and JavaScript assets. When single page applications (SPAs) became viable, the role of routing had to move fully into the browser, by allowing JavaScript to manipulate the current URL in the browser to maintain the current location within the application, even if the application runs entirely in the browser.

7.1 Setting up the chapter example

7.2 Route definitions and router setup

7.3 Feature modules and routing

7.4 Route parameters

7.4.1 Creating links in templates with routerLink

7.4.2 Accessing the route parameters in a component

7.5 Child routes

7.6 Secondary routes

7.6.1 Defining a secondary route

7.6.2 Navigating between secondary routes

7.6.3 Closing a secondary route and programmatic routing

7.7 Route guards to limit access

7.8 Lazy loading

7.9 Routing best practices

Summary