Summary

Let's look at all the operations of the Angular router one more time:

When the browser is loading /inbox/33/messages/44(popup:compose), the router will do the following. First, it will apply redirects. In this example, none of them will be applied, and the URL will stay as is. Then the router will use this URL to construct a new router state:

Next, the router will instantiate the conversation and message components:

Now, let's say the message component has the following link in its template:

<a [routerLink]="[{outlets: {popup: ['message', this.id]}}]">Edit</a>

The router link directive will take the array and will set the href attribute to

/inbox/33/messages/44(popup:message/44). Now, the user triggers a navigation by clicking on the link. The router will take the constructed URL and start the process all over again: it will find that the conversation and message components are already in place. So no work is needed there. But it will create an instance of PopupMessageCmp and place it into the popup outlet. Once this is done, the router will update the location property with the new URL.

That was intense-a lot of information! But we learned quite a few things. We learned about the core operations of the Angular router: applying redirects, state recognition, running guards and resolving data, component activation, and navigation. Finally, we looked at an e2e example showing the router in action.

In the rest of this book we will discuss the same operations one more time in much greater depth.