Structure of an Angular Application

We are about to take the first intrepid steps into examining our Angular application. The Angular CLI has already scaffolded our project and done much of the heavy lifting for us.

When we develop an Angular application, we’ll likely interact with the src folder. It is where we write the code and tests of our application. It is also where we define the styles of our application and any static assets we use, such as icons, images, and JSON files. It contains the following:

• app: This contains all the Angular-related files of the application. We interact with this folder most of the time during development.

• assets: This contains static assets such as fonts, images, and icons.

• favicon.ico: This is the icon displayed in the tab of our browser, along with the page title.

• index.html: This is the main HTML page of the Angular application.

• main.ts: This is the main entry point of the Angular application.

• styles.css: This contains application-wide styles. These are CSS styles that apply globally to the Angular application. The extension of this file depends on the stylesheet format we choose when creating the application.

Inside the app folder

The app folder contains the actual source code we write for our application. Developers spend most of their time inside that folder. The Angular application that is created automatically from the Angular CLI contains the following files:

• app.component.css: This contains CSS styles specific to the sample page.

• app.component.html: This contains the HTML content of the sample page.

• app.component.spec.ts: This contains unit tests for the sample page.

• app.component.ts: This defines the presentational logic of the sample page.

• app.module.ts: This defines the main module of the Angular application.

Note: The filename extension .ts refers to TypeScript files.

In the following sections, we will learn about the purpose of each of these files in more detail.

Components

The files whose names starts with app.component constitute an Angular component. A component in Angular controls part of a web page by orchestrating the interaction of the presentational logic with the HTML content of the page called a template. A typical Angular application has at least a main component called AppComponent by convention.

Each Angular application has a main HTML file, named index.html, that exists inside the src folder and contains the following body HTML element: