Overview

Angular, a popular front-end framework, provides developers with a structured and organized way to build dynamic web applications. Understanding the control flow within an Angular application is crucial for managing the execution of code, handling user interactions, and creating a seamless user experience. In this article, we will delve into the control flow of an Angular application, discussing its key components and how they work.

Control Flow

The story starts from a file. Oh yeah, every angular application starts thanks to the angular.json. It's not the application's entry door, but an Angular app starts thanks to this configuration file.

What's the entry point?

Angular.json

When you open up your angular application you might have noticed a file sitting at the project root - angular.json. The angular.json contains all the configurations of the app. The Angular builder will look at this file to find the entry door of the application. Good, we found the entry (^_^).

It is a very important file and contains several important configuration information to run the angular application.

When the application first starts, Angular looks for this file. So now if you open the file you will find a node called main under architect→build→options, you would see a main node. Once Angular found the main node. The value of the main node is a file path that Angular is looking for - the main.ts under src folder (src/main.ts).

main.ts

This is the main entry point. As an analogy if you have a prior knowledge of C/C++/Java you must have seen there also that main is the starting point. The main.ts file is present under the src folder. The path/name of the main.ts can be changed but it should also be changed in angular.json file.

main.ts contents:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic creates the platform. This function is also used to bootstrap the Angular Application. Here we specify the first module that should be loaded when the application for the first time - the root module. In other words the bootstrapping module. The function bootstrapModule(AppModule) tells the builder to bootstrap the app.

app.module.ts

From the main.ts file, it is very clear that we are bootstrapping the app with AppModule. This AppModule is defined in App.Module.ts file which is found in:

<project_directory>/src/app/app.module.ts

This is the module, created with tht @NgModule decorator which has declarations of all the components we are creating within the app module so that angular is aware of them. Here, we also have imports array where we can import other modules and use in our app. Below is the code of the app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ContentComponent } from './content/content.component';

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    SidebarComponent,
    ContentComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once angular finds the starting module the app.module.ts (where all the components/ directives/ pipes associated to this module is present and dependency to other module is also present) it looks for the bootstrap-option.

In bootstrap Option - the starting component name has been specified (In this case the AppComponent).

By now Angular compiler has all the required information it needs to work.

App.Component.ts

From the app.module.ts file above, we can clearly see that the module asks to bootstrap the app component. This app component is in app.component.ts file. This is the file which interacts with the html of the webpage and serves it with the data. The component is imported from @angular/core. The component has a selector, which is like a custom html tag which we can use to call that component. It then has template or templateUrl which contains the html of the page to be displayed. It also has the styleUrls array where component specific style sheets can be placed. This is how a component file looks:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TheAdmin';

  constructor(private router: Router) {}

}

By this time, compiler has all the details about the components of the app and now they are ready to be used.

index.html

Now, since angular is well aware of the modules, components, styles, scripts etc. which are required to display the page, it's show time!

Here, the index.html file is called. It is found in the src directory of the app. Compiler dynamically adds all the javascript files at the end of the file. Since all the components are now known, the html file calls the root component that is app-root. The root component is defined in app.component.ts which targets app.component.html.

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset=utf-8>
  <title>TheAdmin</title>
  <base href="/">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <link rel="icon" type=image/x-icon href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

When this angular app is served and opened in the browser, the scripts injection is done by the compiler and this is how the file looks like to the browser: