Building Large-Scale Web Applications with Angular

上QQ阅读APP看书，第一时间看更新

Side navigation

Side-level navigation within the Workout Builder will vary depending on the child component that we navigate to. For instance, when we first navigate to the Workout Builder, we are taken to the Workouts screen because the WorkoutsComponent route is the default route for the Workout Builder. That component will need side navigation; it will allow us to select to view a list of workouts or a list of exercises.

The component-based nature of Angular gives us an easy way to implement these context-sensitive menus. We can define new components for each of the menus and then import them into the components that need them. In this case, we have three components that will need side menus: Workouts, Exercises, and Workout. The first two of these components can actually use the same menu so we really only need two side menu components: LeftNavMainComponent, which will be like the preceding menu and will be used by the Exercises and Workouts components, and LeftNavExercisesComponent, which will contain a list of existing exercises and will be used by the Workouts component.

We already have files for the two menu components, including template files, and have imported them into WorkoutBuilderModule. We will now integrate these into the components that need them.

First, modify the workouts.component.html template to add the selector for the menu:

<div class="row">
    <div>
        <abe-left-nav-main></abe-left-nav-main>
    </div>
    <div class="col-sm-10 builder-content">
        <h1 class="text-center">Workouts</h1>
    </div>
  </div>

Then, replace the placeholder text in the left-nav-main.component.html with the navigation links to WorkoutsComponent and ExercisesComponent:

<div class="left-nav-bar">
    <div class="list-group">
        <a [routerLink]="['/builder/workouts']" class="list-group-item list-group-item-action">Workouts</a>
        <a [routerLink]="['/builder/exercises']" class="list-group-item list-group-item-action">Exercises</a>
    </div>
</div>

Run the application and you should see the following:

Follow the exact same steps to complete the side menu for the Exercises component.

We won't show the code for this menu here, but you can find it in the workout-builder/exercises folder under trainer/src/app in checkpoint 4.3 of the GitHub repository.

For the menu for the Workout screen, the steps are the same except that you should change left-nav-exercises.component.html to the following:

<div class="left-nav-bar">
  <h3>Exercises</h3>
</div>

We will use this template as the starting point for building out a list of exercises that will appear on the left-hand side of the screen and can be selected for inclusion in a workout.