It’s almost time to hit F5 and see whether our revised Angular app is still holding its ground. Before we do that, let's quickly open the

/ClientApp/app/components/home/home.component.html file and replace our witty welcome text with something that can define our application better:

<h1>Welcome to TestMakerFree</h1>
<p>A sample SPA project made with .NET Core and Angular.</p>
<quiz-list class="latest"></quiz-list>
<quiz-list class="byTitle"></quiz-list>
<quiz-list class="random"></quiz-list>

If we did everything correctly, we should be greeted with something like this:

This definitely looks like the HomeView we wanted. Let’s check whether the improved Master-Detail navigation pattern is still working by clicking on one of the available quizzes. The HomeView should be replaced by the QuizView, displaying the test detail data:

Still ugly, yet still up and running. Note how the URL in the address bar properly switches from localhost/home to localhost/quiz/{n}, thus reflecting the user navigation up to this point.

Since the Master/Detail route seems to be working, let’s test the changes we made to the NavMenuComponent. Clicking on the About link element should update our page in the following way:

The Login link should be working as well:

Finally, we can go back to the HomeView and take another look at the initial layout:

If we compare the preceding screenshot with the previous one, we should be able to see some small differences, such as the Random Quizzes listing showing different entries. Mind you, this is hardly a surprise, since we want our app to always refresh that content by issuing a new API call each time. Neither Angular nor .NET Core will serve cached content unless we tell them to do so.

Did we forget about our PageNotFoundComponent? We didn't put it in the NavMenuComponent for obvious reasons, but it will be a shame not to test it as well. To do that, just write a non-existing route in the browser's address bar and see what happens:

That's it.