Application Structure and Modules
Explore the Angular application structure including key configuration files and directories. Learn to create a new component using the Angular CLI and understand how modules group components, manage dependencies, and render components in the application. Understand how to modify the main component to include newly created components and see how Angular updates the app in real time during development.
We'll cover the following...
Application structure
Before we go ahead and modify our new Angular application, let’s take a quick tour of the application structure that the Angular CLI has put in place for us.
In the project root directory, we can find a tsconfig.json file, a package.json file, and an angular.json file, among others.
As a reminder:
- The
tsconfig.jsonfile will be used for TypeScript compilation options. - The
package.jsonfile will be used to store the package dependencies we are using. - The
angular.jsonfile is used for Angular-specific settings.
As an example, the "build" option specifies what stylesheets should be included, where the output path is, and the configuration options that are used when building production code, as opposed to development code.
Interestingly, there are also options for linting, internationalization, unit testing, and end-to-end testing.
The Angular CLI will also create an src directory, and under this directory, an app, assets, and environments directory. The src/app directory contains the Angular components and modules that are used to build our application, and the assets
directory is used for static content, such as images or fonts.
Within the src ...