What will you build?

Instead of rewriting MediaMan from scratch, we are going to port the existing code step by step. This will let us focus on the Angular way of doing things.

We will start by creating a new application using the Angular CLI. Then, we will integrate our existing data model, services, and visual elements, making sure that we leverage the Angular concepts that we learned about in the previous chapter.

We will go through two stages. During the first iteration, we will create MediaMan v2, which will keep the same user interface as before. After that, we will add Angular Material to the project and then we'll recreate the user interface using Angular Material components.

From a functional point of view, our application will remain exactly the same as before, but it'll have a better code structure and a nicer user interface. As an added benefit, any other Angular developer should be able to quickly join the project and get up to speed.

Going through the migration process will give you a clear understanding of how Angular and Angular Material work.

Let's get started!