How does Angular gets rendered on webserver?
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.
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
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.
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.
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.
Now lets have close look in the main.ts file.
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
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.
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.
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.
This is how Angular application starts here.
Thanks for reading this article. I hope you have enjoyed this.
People Reaction : 0
Name :
Email :
Website :
