In the previous chapters, we did a great job separating concerns in our applications and adding different layers of abstraction to increase the maintainability of the app. However, we have neglected the visual side of things, as well as the user experience part.

At this moment, our UI is bloated with components and stuff scattered across a single screen, and we need to provide a better navigational experience and a logical way to change the application's state intuitively.

This is the moment where routing acquires special relevance and gives us the opportunity to build a navigational narrative for our applications, allowing us to split the different areas of interest into different pages that are interconnected by a grid of links and URLs.

However, our application is only a set of components, so how do we deploy a navigation scheme between them? The Angular router was built with componentization in mind. We will see how can we create our custom links and make components react to them in the following pages.

In this chapter, we will:

• Discover how to define routes to switch components on and off, and redirect them to other routes
• Trigger routes and load components in our views, depending on the requested route
• Handle and pass different types of parameters
• Dive into more advanced routing
• Look at different ways of securing our routes
• Uncover how to improve the response time by looking at different async strategies