The advantage of Angular CLI is that is dictates a code organization structure that works for applications of all sizes. Here is how the current code organization looks:
trainer
is the application root folder.- The files inside
trainer
are configuration files and some standard files that are part of every standard node application. - The
e2e
folder will contain end to end tests for the app. src
is the primary folder where all the development happens. All the application artifacts go intosrc
.- The
assets
folder insidesrc
hosts static content (such as images, CSS, audio files, and others). - The
app
folder has the app's source code. - The
environments
folder is useful to set configurations for different deployment environments (such as dev, qa, production).
To organize Angular code inside the app
folder, we take a leaf from the Angular style guide (http://bit.ly/ng6be-style-guide) released by the Angular team.
The style guide recommends the use of feature folders to organize code. With feature folders, files linked to a single feature are placed together. If a feature grows, we break it down further into sub features and tuck the code into sub folders. Consider the app
folder to be our first feature folder! As the application grows, app
will add sub features for better code organization.
Let's get straight into building the application. Our first focus area, the app's model!