WorkoutService as a workout and exercise repository

The plan here is to create a WorkoutService instance that is responsible for exposing the exercise and workout data across the two applications. The main responsibilities of the service include:

  • Exercise-related CRUD operations: Get all exercises, get a specific exercise based on its name, create an exercise, update an exercise, and delete it
  • Workout-related CRUD operations: These are similar to the exercise-related operations, but targeted toward the workout entity

The code is available to download on GitHub at https://github.com/chandermani/angular6byexample. The branch to download is as follows: GitHub Branch: checkpoint4.4 (foldertrainer). If you are not using Git, download the snapshot of Checkpoint 4.4 (a ZIP file) from the following GitHub location: https://github.com/chandermani/angular6byexample/archive/checkpoint4.4.zip. Refer to the README.md file in the trainer folder when setting up the snapshot for the first time. Again, if you are working along with us as we build the application, be sure to update the styles.css file, which we are not discussing here. Because some of the files in this section are rather long, rather than showing the code here, we are also going to suggest at times that you simply copy the files into your solution.

Locate workout-service.ts in the trainer/src/core folder. The code in that file should look like the following, except for the implementation of the two methods setupInitialExercises and setupInitialWorkouts, which we have left out because of their length:

import {Injectable} from '@angular/core'; 
import {ExercisePlan} from './model'; 
import {WorkoutPlan} from './model'; 
import {Exercise} from "./model";
import { CoreModule } from './core.module'; 
 
@Injectable({
  providedIn: CoreModule
})
export class WorkoutService { 
    workouts: Array<WorkoutPlan> = []; 
    exercises: Array<Exercise> = []; 
 
    constructor() { 
        this.setupInitialExercises(); 
        this.setupInitialWorkouts(); 
    } 
 
    getExercises(){ 
        return this.exercises; 
    } 
 
    getWorkouts(){ 
        return this.workouts; 
    } 
    setupInitialExercises(){ 
     // implementation of in-memory store. 
    } 
 
    setupInitialWorkouts(){ 
     // implementation of in-memory store. 
    } 
}}

As we have mentioned before, the implementation of an Angular service is straightforward. Here, we are declaring a class with the name WorkoutService and decorating it with @Injectable . Within the @Injectable decorator, we have set the provided-in property to CoreModule.  This registers WorkoutService as a provider with Angular's Dependency Injection framework and makes it available throughout our application.

In the class definition, we first create two arrays: one for Workouts and one for Exercises. These arrays are of types WorkoutPlan and Exercise respectively, and we, therefore, need to import WorkoutPlan and Exericse from model.ts to get the type definitions for them.

The constructor calls two methods to set up the Workouts and Services List. At the moment, we are just using an in-memory store that populates these lists with data.

The two methods, getExercises and getWorkouts, as the names suggest, return a list of exercises and workouts respectively. Since we plan to use the in-memory store to store workout and exercise data, the Workouts and Exercises arrays store this data. As we go along, we will be adding more functions to the service.

Time to build out the components for the workout and exercise lists!

上一章目录下一章