How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts.

In index.html file there is a <app-root> custom html code, this app-root is a selector of app component of application.

During the build process the whole application build is generated and this script filess added to the bottom of index.html files.

app component is connected to the index.html file through its app-root selector.

This app-root selector scope the content of app component html file to index.html file.

In the app.module.ts file we declare this app component and also bootstrap it.

 declarations: [AppComponent],
 bootstrap: [AppComponent]

We can only bootstrap one component at a time to make it a root component.

But we can declare multiple components and connect them to each other.

How it start the angular application ?

In main.ts (it execute first) file platformBrowserDynamic() function executes and it start the angular application in browser then we call another function bootstrapModule() function.

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

Here we pass the link of our own module which is AppModule in this case.

We pass this as an argument and this say angular to start the application.

Now angular parse this module

Register the components which are declared

Import some other modules.

detects bootstrap array and looks for selector of this components.

Related Posts

angular change detection techniques

Understanding Angular Change Detection for Beginners | Angular 17 Change Detection Methods

Understanding how the Angular change detection technique helps in the process of building dynamic and responsive web applications. In this article, we’ll explore some essential concepts of…

TypeScript Strategies for Angular, Explaining Best Practices and Techniques

Angular has fully embraced TypeScript as its primary development language, a decision that has evolved into a widely accepted standard practice. TypeScript introduces robust features for static…

Unlocking the Future of Web Development: A Deep Dive into Angular 17 Features

Angular 17, the powerhouse in the realm of JavaScript frameworks, celebrated its 13th anniversary recently. From its inception with AngularJS, the framework has continuously evolved to meet…

angular-icon

How to use ngx-spinner in Angular to create a loading spinner for smoother user interactions

In this article, we will create a loading spinner component with ngx-spinner in angular application. ngx-spinner in angular provides a loading spinner component that we can use…

angular-icon

Master AngularFire2 and Angular by building a CRUD operation app

In this article, we are creating a CRUD application with angularFire2 and angular, This module basically provides direct access to the Firebase database, and by using angular…

angular-icon

Master Angular NgRx by creating a To-Do Application

In this article we are building a todo application using Angular NgRx, NgRx is used for state management in angular applications. Let’s start by creating a new…

This Post Has One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *