Javatpoint Logo
Javatpoint Logo

How an Angular's app get loaded and started

When you create an Angular app and run it by using ng serve command, it looks like the following image.

Angular app get loaded and started

It is a simple Angular app created by using ng new app_name command and nothing is edited in the app. The name of the app is angular8firstapp.

Now, we will learn how the Angular's app is loaded and started.

Let's remove all the code from the app.compoment.html file and write some basic HTML code. For example:

This is the original code in the app.compoment.html file

Angular app get loaded and started

Now, it is replaced and looked like this:

Angular app get loaded and started

You can also see it in browser:

Angular app get loaded and started

Here, the above file is not served by the server. The server served an index.html file.

Angular app get loaded and started

Angular is a framework which allows us to create "Single Page Applications", and here the index.html is the single page which was provided by the server.

Index.html:

The above code looks like a normal HTML code and here the <title> tag shows the same title in the browser as the app's title. But the <body> code is different from normal HTML code. Here, you see "<app-root>" tag which is provided by the CLI. We can say that, whenever we create a project from CLI, by default, one component is created, i.e., "app component".

Now, see the "app.component.ts" file. It is a TypeScript file. Here, you see the "selector" property.


Angular app get loaded and started

You can see that the selector property contains the string as index.html file. This information is required the Angular to place this part into an index.html file with the template of the component.

The template of the component is "./app.component.html", so, Angular includes this part into the body of the index.html file.

Now, you see how an "app-root" is included in index.html file. Now, let's see "How does Angular trigger?"

Whenever ng-serve builds the application, it creates "bundles" and automatically adds these to index.html file at runtime. So, from these bundles, the first code has to be executed from "main.ts" file, i.e., "main.ts" file is the main file from where the execution of an Angular application starts.

Main.ts file:


Angular app get loaded and started

Here, the bootstrap method starts the Angular application. It refers to AppModule, which looks into the app folders. You can see in the "app.module" file that a bootstrap array which is basically a list of all the components analyzes the index.html file.

See app.module.ts file:


Angular app get loaded and started

Now, you can see that the Angular application gets loaded as:






Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA