24 Routing and navigation: part 1

 

This chapter covers

  • Using the Angular routing system to select components based on the current URL
  • Defining and using routes
  • Using directives to enable navigation to different URLs
  • Inspecting the active route within components
  • Receiving events that describe route changes

The Angular routing feature allows applications to change the components and templates that are displayed to the user by responding to changes to the browser’s URL. This allows complex applications to be created that adapt the content they present openly and flexibly, with minimal coding. To support this feature, data bindings and services can be used to change the browser’s URL, allowing the user to navigate around the application.

Routing is useful as the complexity of a project increases because it allows the structure of an application to be defined separately from the components and directives, meaning that changes to the structure can be made in the routing configuration and do not have to be applied to the individual components.

In this chapter, I demonstrate how the basic routing system works and apply it to the example application. In chapters 25 and 26, I explain the more advanced routing features. Table 24.1 puts routing in context.

24.1 Preparing the example project

24.2 Getting started with routing

24.2.1 Creating a routing configuration

24.2.2 Creating the routing component

24.2.3 Updating the root module

24.2.4 Completing the Configuration

24.2.5 Adding navigation links

24.2.6 Understanding the effect of routing

24.3 Completing the routing implementation

24.3.1 Handling route changes in components

24.3.2 Using route parameters

24.3.3 Navigating in code

24.3.4 Receiving navigation events

24.3.5 Removing the event bindings and supporting code

24.4 Summary