 |
How an Angular's app get loaded and startedWhen you create an Angular app and run it by using 
It is a simple Angular app created by using Now, we will learn how the Angular's app is loaded and started. Let's remove all the code from the This is the original code in the 
Now, it is replaced and looked like this: 
You can also see it in browser: 
Here, the above file is not served by the server. The server served an index.html file. 
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. 
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: 
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: 
Now, you can see that the Angular application gets loaded as:
Next TopicAngular 8 Architecture
|
For Videos Join Our Youtube Channel: Join Now
Feedback
- Send your Feedback to [email protected]
Help Others, Please Share
