Angular Flow: Working Behind Scenes

Introduction

       Angular is a popular single page application development platform backed by Google. It is complex framework. Thus, for beginners it is important to understand the flow of angular to get clear picture of what`s going on in the background

1. Angularjson.file

• It is a file which has various configurations and projects defined for the angular project.
• This is the first file looked by builder for paths, configurations and main file
• main property of build in angular.json tells the builder from which file to start the app. 

• src/main.ts is the file from which app will start to run.

2. Main.ts

• This file acts as the entry point of the application
• It helps in creating the browser environment for application to run.
• This is one is two steps: 

              a) platformBroswerDynamic is imported

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

                  b) main.ts calls function bootstrapModule(AppModule) which tells the builder to bootstrap the app

platformBrowserDynamic().bootstrapModule(AppModule)

3. App.module.ts

• This module is created using @NgModule decorator
• Here, we import array of other modules to use in the app
• bootstrap property in NgModule tells, which component to bootstrap the app.

bootstrap: [AppComponent]

4. App.component.ts

• This is the file which interacts with html of web page and serves it with required data.
• This component is created using @Component decorator
• @Component decorator contains three main properties selector, templateUrl, styleUrl
• selector - it is custom html tag which we can use to call that component
• template/templateUrl - it is the path of html page to be displayed
• styleUrl - it is the path of CSS/SCCS.
• By this time, compiler has all the details of component to be used.

5. index.html

• After the component is loaded it is the time to display the page.
• index.html file is called
• compiler dynamically adds java script file at end of html file
• html file calls root component app-root
• The root component is defined in app.component.ts which targets app.component.html
• In body tag, you can see html like tag <app-root></app-root>
• This is our component selector for app component, which is defined in app.component.ts file
• It asks to load that component

5. app.component.html

• This is the file contains all elements to be displayed when app loads.
• Contents of the this file are the first things to be rendered on the web site.

Flow Diagram