If we try to visualize all this, we can easily see that we're talking about a standard, straightforward Master/Detail navigation pattern; the same approach, with minor differences, can also be found on countless websites. When we’re done, users will be able to perform a basic navigation loop, as follows:

Note that we will also give the user two additional choices, other than going back:

• Actually try the quiz by clicking on the Take It! button
• Change the quiz details and settings by clicking on the Edit button

We’ll dedicate this chapter to creating the main navigation interface and implementing the Go Back button, which is by far the easiest one; the other buttons will require additional effort and will be addressed later on.

Any experienced developer will hardly miss the fact that the Edit button will most likely require the greatest amount of effort, as it will force us to deal with the underlying Data Model on both the client-side and server-side levels. Doing that in Angular is a rather seamless task, thanks to the framework’s built-in two-way data binding features. Persisting these changes to the application's Data Source will be a whole different story, though, as it will require us to implement a couple more features, such as the following:

• A dedicated server-side API that will receive the updated data from the client Model and sync it to the server Model
• A client-side update command pattern--such as a button, a focus event, or something like that--that will trigger the aforementioned update API call

This is something we’ll do in the next chapter, when we’ll implement a persistent Data Source and replace our Dummy Data Provider sample with a working one; we won’t be able to properly handle any persisting update command until then.