26 Routing and navigation: part 3

 

This chapter covers

  • Using resolvers and route guards to control route activation
  • Displaying placeholder content to the user until data is loaded

In this chapter, I continue to describe the Angular URL routing system, focusing on the most advanced features. I explain how to control route activation, how to load feature modules dynamically, and how to use multiple outlet elements in a template. Table 26.1 summarizes the chapter.

Table 26.1. Chapter summary
Problem
Solution
Listing
Delaying navigation until a task is complete
Use a route resolver
1–6
Preventing route activation
Use an activation guard
7–13
Preventing the user from navigating away from the current content
Use a deactivation guard
14–17

26.1 Preparing the example project

For this chapter, I will continue using the exampleApp project that was created in chapter 20 and has been modified in each subsequent chapter. No changes are required for this chapter.

Tip

You can download the example project for this chapter—and for all the other chapters in this book—from https://github.com/manningbooks/pro-angular-16. See chapter 1 for how to get help if you have problems running the examples.

Open a new command prompt, navigate to the exampleApp folder, and run the following command to start the server that provides the RESTful web server:

npm run json

Open a separate command prompt, navigate to the exampleApp folder, and run the following command to start the Angular development tools:

ng serve

26.2 Guarding routes

26.2.1 Delaying navigation with a resolver

26.2.2 Preventing navigation with guards

26.3 Summary