The structure of an Angular application
We will take the first intrepid steps in examining our Angular application. The Angular CLI has already scaffolded our project and done much of the heavy lifting for us. All we need to do is fire up our favorite IDE and start working with the Angular project. We will use VSCode in this book, but feel free to choose any editor you are comfortable with:
- Open VSCode and select File | Open Folder… from the main menu.
- Navigate to the
my-appfolder and select it. VSCode will load the associated Angular CLI workspace. - Expand the
srcfolder.
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 contains the following:
app: All the Angular-related files of the application. You interact with this folder most of the time during development.index.html: The main HTML page of the Angular application.main.ts: The main entry point of the Angular application.styles.css: CSS styles that apply globally to the Angular application. The extension of this file depends on the stylesheet format you choose when creating the application.
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 was created automatically from the Angular CLI contains the following files:
app.component.css: Contains CSS styles specific to the sample page. The extension of this file depends on the stylesheet format you choose when creating the application.app.component.html: Contains the HTML content of the sample page.app.component.spec.ts: Contains unit tests for the sample page.app.component.ts: Defines the presentational logic of the sample page.app.config.ts: Defines the configuration of the Angular application.app.routes.ts: Defines the routing configuration of the Angular application.
The filename extension .ts refers to TypeScript files.
In the following sections, we will learn how Angular orchestrates some of those files to display the sample page of the application.
Components
The files whose names start 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.
Each Angular application has a main HTML file, named index.html, that exists inside the src folder and contains the following <body> HTML element:
<body>
<app-root></app-root>
</body>
The <app-root> tag is used to identify the main component of the application and acts as a container to display its HTML content. It instructs Angular to render the template of the main component inside that tag. We will learn how it works in Chapter 3, Structuring User Interfaces with Components.
When the Angular CLI builds an Angular application, it parses the index.html file and identifies HTML tags inside the <body> element. An Angular application is always rendered inside the <body> element and comprises a tree of components. When the Angular CLI finds a tag that is not a known HTML element, such as <app-root>, it starts searching through the components of the application tree. But how does it know where to start?
Bootstrapping
The startup method of an Angular application is called bootstrapping, and it is defined in the main.ts file inside the src folder:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
The main task of the bootstrapping file is to define the component that will be loaded at application startup. It calls the bootstrapApplication method, passing AppComponent as a parameter to specify the starting component of the application. It also passes the appConfig object as a second parameter to specify the configuration that will be used in the application startup. The application configuration is described in the app.config.ts file:
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};
The appConfig object contains a providers property to define services provided throughout the Angular application. We will learn more about services in Chapter 5, Managing Complex Tasks with Services.
A new Angular CLI application provides routing services by default. Routing is related to in-app navigation between different components using the browser URL. It is activated using the provideRouter method, passing a routes object, called route configuration, as a parameter. The route configuration of the application is defined in the app.routes.ts file:
import { Routes } from '@angular/router';
export const routes: Routes = [];
Our application does not have a route configuration yet, as indicated by the empty routes array. We will learn how to set up routing and configure it in Chapter 9, Navigating through Applications with Routing.
Template syntax
Now that we have taken a brief overview of our sample application, it’s time to start interacting with the source code:
- Run the following command in a terminal window to start the application if it is not running already:
ng serve
If you are working with VSCode, it is preferable to use its integrated terminal, which is accessible from the Terminal | New Terminal option in the main menu.
- Open the application with your browser at
http://localhost:4200, and notice the text below the Angular logo that reads Hello, my-app. The word my-app, which corresponds to the application name, comes from a variable declared in the TypeScript file of the main component. Open theapp.component.tsfile and locate thetitlevariable:import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'my-app'; }
The title variable is a component property that is used in the component template.
- Open the
app.component.htmlfile and go to line 228:<h1>Hello, {{ title }}</h1>
The title property is surrounded by double curly braces syntax called interpolation, which is part of the Angular template syntax. In a nutshell, interpolation converts the value of the title property to text and prints it on the page.
Angular uses specific template syntax to extend and enrich the standard HTML syntax in the application template. We will learn more about the Angular template syntax in Chapter 3, Structuring User Interfaces with Components.
- Change the value of the
titleproperty in theAppComponentclass toWorld, save the changes, wait for the application to reload, and examine the output in the browser:
Figure 1.2: Landing page title
Congratulations! You have successfully interacted with the source code of your application.
By now, you should have a basic understanding of how Angular works and what the basic parts of an Angular application are. As a reader, you have had to absorb a lot of information so far. However, you will get a chance to get more acquainted with the components in the upcoming chapters. For now, the focus is to get you up and running, by giving you a powerful tool like the Angular CLI and showing you how only a few steps are needed to display an application on the screen.
