Saturday, 11 September 2021

Angular Application Flow - Behind The Scenes Detailed Explanation



How application work means the flow of application. Flow here is how the files are called and in which sequence of files the app gets executed when we are developing it.
So here I am providing the files detail who are comes under application work flow.


1.      Angular.Json

Every Angular app consists of a file named angular.json. It is the file which has various properties and configuration of your Angular project. While building the app, the builder looks at this file to find the entry point of the application. Following is an image of the angular.json file:


“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/angular-starter”,
“index”: “src/index.html”,
“main”: “src/main.ts“,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“aot”: false,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css”,
“src/style.css”
]
}
}

1.     

Inside the build section, the main property of the options object defines the entry point of the application which is main.ts.

2.      Main.ts

This file acts as the entry point of the application. The main.ts file creates a browser environment for the application to run, and, along with this, it also calls a function called bootstrapModule, which bootstraps the application. These two steps are performed in the following order inside the main.ts file:

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

 

platformBrowserDynamic().bootstrapModule(AppModule)

In the above line of code, AppModule is getting bootstrapped.

3.      AppModule.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

/src/app/app.module.ts

This is the module, created with the @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 an example of app.module.ts file with a test component declared and two modules imported.

Below is an example of app.module.ts file:

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
entryComponents: [],
bootstrap: [AppComponent]
})
export class AppModule { }

As one can see in the above file, AppComponent is getting bootstrapped. This component is defined in app.component.ts file.

4.      App.Component.Ts

This is the file which interacts with the html of the webpage and serves it with the data. The component is made by using @Component decorator which is imported from @angular/core.
Each component is declared with three properties:

1.    Selector – used for accessing the component

2.    Template/TemplateURL – contains HTML of the component

3.    StylesURL – contains component-specific stylesheets

Below is an example of app.component.ts file:

import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘angular’;
}

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

5.      Index.html

Here, the index.html file is called. It is found in the src folder of the app. Compiler dynamically adds all the javascript files at the end of this 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.components.ts which targets app.component.html. This is how index.html file looks like :

//   <!doctype html>
      // <html lang=”en”>
      // <head>
      //   <meta charset=”utf-8″>
      //   <title>Angular</title>
      //   <base href=”/”>
      //   <meta name=”viewport” content=”width=device-width, initial-scale=1″>
      // </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 .

6.      App.Component.Html

This is the file which contains all the html elements and their binding which are to be displayed when the app loads. Contents of this file are the first things to be displayed. 

No comments:

Post a Comment