Routing and Navigation

Chapter learning outcomes

So far, we’ve looked at what Angular is, how to get started, and how to use the Angular CLI to help us build our first Angular application. However, the application we’ve built so far doesn’t have a lot of functionality. We will start adding more functionality to our application over the next couple of chapters in order to make it more interactive.

In this chapter, we will start by looking at Routing and Navigation in Angular and how we can use the features that Angular provides for routing to create complex and sophisticated navigation systems to support our application’s needs.

In this chapter, we will cover the following topics:

• What are the routes?
• How routes work in Angular
• How to set up routes for your Angular application
• How to add navigation to an Angular application
• What route guards are and how to use them
• What asynchronous routing is and what benefits it can bring to your Angular application

Client contacts manager application

We will be expanding on our Client Contacts Manager application by adding navigation to it so that a user can navigate between the sections of the application.

📝 Note: Here is the preview of what we will create in this chapter. Press the RUN button to compile and serve the application. Once the app compiles, you can see its output in the Output tab or by clicking on the URL given after Your app can be found at.