Angular Application Flow

Angular Application Flow

Angular Application Flow

We created our first angular app (hello-world) in the our previous section. In this post, I’ll explain the hello-world application in detail. We will try to modify the html output of the application.

So let’s get started.

Open the hello-world application in Microsoft Visual Studio Code , which should look like below:

Angular Application Flow


Now run the angular application. Invoke the below command to start the angular application.

ng serve



And you should be able to see the output as below :

Angular 4 Hello World

 

Modifying the Angular Application


Without any delay, let’s modify the output of the html. Open the below file and delete all the content inside this file.

hello-world\src\app\app.component.html

And add the below content  into this html file :

<h3> Welcome to the Angular Application. We modified the App Component </h3>



After that you should be able to see the output as below.

Angular Application



Now open the index.html file and look inside what it contains.

 


<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>HelloWorld</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
 <app-root></app-root>
</body>
</html>



We don’t see anything other than “<app-root></app-root>” selector or custom element. But the question is that how the content of “app.component.html” gets inside index.html.

To clear that, I will try to explain it with simple angular app flow. (If you are not able to see the image properly, click on the image to resize it)

Angular Application Flow




Step 1 : main.ts

The main.ts is the main file of angular application which bootstraps the app. This main file bootstraps the application with the default module as below :

platformBrowserDynamic().bootstrapModule(AppModule)
                        .catch(err => console.log(err));



As you can see above “AppModule” is the default module which will be picked up during application bootstrap.


Step 2 : AppModule

The app.module.ts is the default module or you can create your own modules. The AppModule is an type script class with special decorator or annotation “@NgModule” which tells the angular CLI on how to process this file.

So this file will be processed as module file which will contain all of your Components, Services etc.

bootstrap: [AppComponent]


Now look at the above property. It basically tells that bootstrap the application with the “AppComponent” which becomes the default component.

Step 3 : AppComponent

The AppComponent is picked up during application bootstrap, which is basically the default Component of the angular application.

As we already know that Component is basically a view which you see in your browser. So AppComponent is a type script class with a special decorator or annotation “@Component” which contains the information about the view and how to render the component.

You can tell the component by using “templateUrl” property of @Component annotation . The “selector” property is basically the important part here. It is the custom element which you can use in your html file as an element and all of your html content will be placed there.

Like in the case of “<app-root>” element we see in index.html.

So this is the overall flow of angular application which is quite basic and easy to understand.

Related Post

2 thoughts on “Angular Application Flow”

Leave a Reply

Your email address will not be published. Required fields are marked *