Dealing with Angular routes

At this point, we will continue with the development of our sample application. In the previous chapter, we created some Angular components for the frontend application, but before we write the contents of each one of them, we are going to create some routes.

Before we dive into the code, it’s important for you to understand how the Angular router works.

When you click on a link or go to a URL (for example, http://localhost:4200/bikes), the Angular router:

1. Checks the browser URL.
2. Finds which router state corresponds to the URL.
3. Applies route guards, if they were defined in the router state.
4. Activates the respective Angular component to display the page.

Also, each route can contain the following properties:

• path: String; the path to match the URL
• patchMatch: String; how to match the URL
• component: Class reference; component to activate when...