How an Angular App gets Loaded and Started

Angular Startup Flow:

Request Flow:

Step 1: 
User sends http request to web server.Web servers receives the request and tries to return requested content from web server.

Step 2: 
In case angular framework is registered to web server(Node.Js), It will not
directly return the pure html. Instead of that It returns the angular bundles.

Files downloaded on first request:

• polyfills.bundle.js 
• styles.bundle.js
• vendor.bundle.js
• main.bundle.js
• inline.bundle.js

Step 3: 
Angular framework loads all the components and its selector as mentioned below

Step 3.1: 

Entry Point of Angular : 

Main.ts file.

What it does?

Registers the bootstrap module of our application using platformBrowserDynamic().bootstrapModule.

Points to remember:

1)Is it allow to register multiple modules? 

No. It will not allow.

Step 3.2(BootstrapModule):

What bootstrapModule Does?

Registers the bootstrap component of our application.

Points to remember: 

1)Is it allow to register multiple components as a startup component?

Yes. It will allow

2)What is the use case to register multiple component?

If Index page uses multiple components to construct final content, then it needs to be registered.

3)What will happen, If i use the component not registered as bootstrap component in index page?

It will not be rendered. Angular simply ignores the selector specified in index page.

Step 3.3(BootstrapComponent):

What BootstrapComponent Does?

Registers the selector and its content(Inline content/URL to get the content)

Points to remember: 

1)What are required attribute needs to be passes to @Component?

selector and templateUrl(Or "template" for inline content)

Step 4: 
Based on the selector specified in index.html , Angular replaces the content form its component templates.

Step 5:
After all the sequence of  above steps, final content will be visible to the end user.

Flow Chart:

Conclusion:

• Angular does powerful stuffs very simply which makes angular as a popular client side framework.

Upcoming blogs will describe more angular concepts deeply with real time examples.

Stay tuned.Happy Learning