Understanding angular 9 flow

Understanding angular 4/5 flow:

In highlevel this is the flow,

Main.ts > AppModule > App.component, it serves the content available in the Template file.

I request you to run first angular cli project from this link,

How to install Angular-CLI in Windows 7 ?
Running First Angular-CLI Project in 2 Minutes

then read below to understand how angular / angular flow works in detail.

 

Now let me explain how angular works actually,

index.html file looks like this,

index.html file is the only file served by our servers, all the others are served by angular, that is why it is called as single page application.

<body>
<app-root>Loading...</app-root>
</body>

 

here app-root is the default and only component(referred as selector in angular) created by angular, which allows to load our own components.

 

and your first angular generates

  • component.ts file – it is a component file, because it is annotated with @Component annotation.
  • module.ts – NgModule file
  • .html – template file for the above mentioned component
  • .css – style file for the above mentioned component

 

Here in the angular component.ts file we have a selector:’app-root’ which is the one referred in the index.html file, which basically prints/gives the output based on the above templates(.html file) values configured in the component.

main.ts is the file where angular starts it execution, which just bootstraps or starts Angular Module (module.ts) then the module.ts file will just bootstraps the component.ts file and serves the output based on the template mapped to the particular component file.

 

Note, all angular pages source codes will not have any additional contents/source codes other than <app-root>, but angular internally imports many java script files based on our components/modules to bring the expected output.

 

Angular converts every typescript files to javascript internally,

Many browsers are not supporting typescript (ES6 standards), so even though angular 4 needs to be developed with typescript, which internally converts all your typescript codes to javascript during the compilation time before loading it on the browser.

So the overall flow where angular bootstraps and provides the output this way,

Main.ts > AppModule > App.component, it serves the content available in the Template file.

Leave a Reply