Introducing child routes to Workout Builder
Angular supports our goal of isolating the routing for our new Workout Builder by providing us with the ability to create a hierarchy of router components within our application. We currently have just one router component, which is in the root component of our application. But Angular allows us to add what are called child router components under our root component. This means that one feature can be ignorant of the routes the other is using and each is free to adapt its routes in response to changes within that feature.
Getting back to our application, we can use child routing in Angular to match the routing for the two features of our application with the code that will be using them. So in our application, we can structure the routing into the following routing hierarchy for our Workout Builder (at this point, we are leaving the Workout Runner as is to show the before and after comparison):
With this approach, we can create a logical separation of our routes by feature and make them easier to manage and maintain.
So, let's get started by adding child routing to our application.
From this point on in this section, we'll be adding to the code that we downloaded earlier for this chapter. If you want to see the complete code for this next section, you can download it from checkpoint 4.2 in the GitHub repository. If you want to work along with us as we build out the code for this section, still be sure to add the changes in styles.css in the trainer/src folder that are part of this checkpoint, since we won't be discussing them here. Also be sure and add the files for exercise(s) ,workout(s), and navigation from the trainer/src/app/workout-builder folder in the repository. At this stage, these are just stub files, which we will implement later in this chapter. However, you will need these stub files here in order to implement navigation for the Workout Builder module. The code is available to download on GitHub at https://github.com/chandermani/angular6byexample. Checkpoints are implemented as branches in GitHub. The branch to download is as follows: GitHub Branch: checkpoint4.2 . If you are not using Git, download the snapshot of Checkpoint 4.2 (a ZIP file) from the following GitHub location: https://github.com/chandermani/angular6byexample/archive/checkpoint4.2.zip. Refer to the README.md file in the trainer folder when setting up the snapshot for the first time.