If we want to transform our current approach into an effective Master/Detail navigation pattern, implementing the routes isn't the only thing we need to do--we also need to change our existing component structure to make it routing-friendly. Actually, it can be wise to get this done first, since it will involve some minor refactoring.

Let’s try to get a visual picture of what we need to do before proceeding. It’s time to get rid of this working, yet rather inconsistent, cascading structure:

We'll switch to this navigable one:

While we were there, we took the chance to enrich our app with a couple more components (AboutComponent and LoginComponents) that we will implement later on.

In order to achieve all of this, we need to take care of the following tasks:

• Register and implement a new route that will make our QuizComponent load in stand-alone mode instead of being a mere element of the QuizListComponent template.
  • Change the QuizComponent loading behavior so that it can work independently; more specifically, it should fetch the selected quiz details with a server-side API call using a single parameter (such as the quiz ID ), instead of receiving the whole object from its parent using the data-bind feature.
• Add more sample Components to test the routing behavior with a number of different requests and configure them into the AppRouting scheme as well.

Let’s do this.