First feature module

The primary feature of 7 Minute Workout is to execute a predefined set of exercises. Hence we are going to create a feature module now and later add the feature implementation to this module. We call this module workout-runner. Let's initialize the feature with Angular CLI's scaffolding capabilities.

From the command line, navigate to the trainer/src/app folder and run the following:

ng generate module workout-runner --module app.module.ts

Follow the console logs to know what files are generated. The command essentially:

  • Creates a new Angular WorkoutRunnerModule module inside a new workout-runner folder
  • Imports the newly created module into the main application module app (app.module.ts)

We now have a new feature module.

Give every feature its own module.
Make special note of the conventions Angular CLI follows when scaffolding Angular artifacts. From the preceding example, the module name provided with the command line was workout-runner. While the generated folder and filenames use the same name, the class name for the generated module is WorkoutRunnerModule (pascal case with the  Module suffix).

Open the newly generated module definition (workout-runner.module.ts) and look at the generated content. WorkoutRunnerModule imports CommonModule, a module with common Angular directives such as ngIf and ngFor, allowing us to use these common directives across any component/directive defined in WorkoutRunnerModule.


Modules are Angular's way of organizing code. We will touch upon Angular modules shortly.

Copy the model.ts file from http://bit.ly/ng6be-2-1-model-ts into the workout-runner folder. Shortly, we will see how these model classes are utilized.

Since we have started with a preconfigured Angular app, we just need to understand how the app starts.

上一章目录下一章