How does Angular gets rendered on webserver?

What is Hoisting in JavaScript?
How to install an angular CLI for your project? According to the angular cli website, we can find this command
npm install -g @angular/cli
To create a new project, we have the below command.
ng new my-app-name
To run your newly created project using node, use the below command
cd my-app-name //navigating to project
ng serve
So, How an angular app get started and loaded?
Q. How does our browser or server hosting our application know that it should render the content of our app component html here. Actually it is not the file get served by our server, instead the “index.html” file served by the server. Since angular is a framework which allow you to create single page application, this is the single page.
insert
when you create a angular project via CLI, angular cli will create a default component for you something like “App Component” and all the files under app component will be related to the same component.
Lets take a closer look of our app.component.ts file
insert
Here, you can see we have @Component decorator, but more important we have a selector property which assigns a string as a value and this string holds app-root and this is clearly the same text we have in our index.html file and that is the information angular need in order to replace these files with the template of this component having this below selector and template of this component is simply the app.component.html file in the app component.
insert
insert
So, now the question is how the angular triggered or we can say kicked off to run the body of our index html file.
The answer is, in the final html index file which is getting served in the browser. we can verify by going into the source code of this page.
insert
Above we can see the couple of scripts imports at the end. These are injected by the angular cli automatically, that is why we dont see in our code editor raw htm file.
Whenever ng-serve gets run, it rebuilds our project, it create bundle, JavaScript bundles and automatically add right below the html index file. It is a little convenient functionality for us.
Now you may be thinking, where does our code will be placed? The answer is those all will be placed in the same javascript imported files. So these scripts files are executed and are the first to be executed . If we see in our code editor we will find main.ts file which is the very first one to be executed.
insert
Now lets have close look in the main.ts file.
insert
Here in the above screenshots of main.ts file, we have couple of imports and then we check if we are in production mode or not but the most importantly the below line in the below screenshot. Bootstrap starts our angular by passing AppModule to this method
insert
insert
and app module refers the file “app.module.ts” and now if we have look in this ts file , we have a bootstrap array which lists basically all the components which should be know to the angular at the point of time it analyzes our index.html file and here we reference our AppComponent.
insert
Now summing up the entire concepts, we can say 1. Angular start up the main.ts file. 2. There it bootstrap the angular application where we pass our module name as an argument. 3. In this module we tell our angular, we tell angular that there a app component which you should know when you try to start yourself.
insert
Now angular analyzes the app component ts file and read the setup we pass inside and therefore knows this selector “app-root” and now the angular is able to handle the app-root in the index.html file and all it does is this is the selector you told I should know which was listed in the bootstrap array in the app module of the app component and now i should insert the app component which happens to have some html component file, a template attached to it which can be the html elements inside it.
insert
This is how Angular application starts here.

Thanks for reading this article. I hope you have enjoyed this.

People Reaction : 0

Rohit Sharma
Name : Email : Website :
© 2020 WriteSomeCode. All Right Reserved. A Rohit Sharma Blog. Creative Commons License licensed under a Creative Commons Attribution 4.0 International License