Return to site

ANGULAR: How does an Angular application get started? 🚀

July 16, 2022

An Angular application gets loaded or started by the following way:

1ïļâƒĢ 𝐋ðĻ𝐚𝐝 ðĒð§ððžðą.ðĄð­ðĶðĨ 🚀

The starting point of any Angular web application is the index.html page.

Code ðŸ‘Ļ‍ðŸ’ŧ👇👇👇

<â„Žð‘Ąð‘šð‘™ 𝑙𝑎𝑛𝑔="𝑒𝑛">

<ℎ𝑒𝑎𝑑>

...

<ð‘Ąð‘–ð‘Ąð‘™ð‘’>ðšð‘’ð‘Ąð‘Ąð‘–ð‘›ð‘”ð‘†ð‘Ąð‘Žð‘Ÿð‘Ąð‘’ð‘‘

...

<𝑏𝑜𝑑ð‘Ķ>

<𝑎𝑝𝑝-ð‘Ÿð‘œð‘œð‘Ą>

...

<𝒔𝒄𝒓𝒊𝒑𝒕 𝒔𝒓𝒄="𝒎𝒂𝒊𝒏-𝒆𝒔2015.𝒋𝒔" 𝒕𝒚𝒑𝒆="𝒎𝒐𝒅𝒖𝒍𝒆">

<𝒔𝒄𝒓𝒊𝒑𝒕 𝒔𝒓𝒄="𝒎𝒂𝒊𝒏-𝒆𝒔5.𝒋𝒔" 𝒏𝒐𝒎𝒐𝒅𝒖𝒍𝒆 𝒅𝒆𝒇𝒆𝒓>

ðŸ’Ą Notice the main.js which has the application code in it.

2ïļâƒĢ ð„ðąðžðœðŪ𝐭𝐞 ðĶ𝐚ðĒ𝐧.𝐭𝐎 𝐅ðĒðĨ𝐞 ⚡

The code inside the main.js file is the entry point for the application.

It does this thanks to the module platformBrowserDynamic.

Code ðŸ‘Ļ‍ðŸ’ŧ👇👇👇

ð‘ð‘™ð‘Žð‘Ąð‘“ð‘œð‘Ÿð‘šðĩ𝑟𝑜ð‘Ī𝑠𝑒𝑟𝐷ð‘Ķ𝑛𝑎𝑚𝑖𝑐().ð‘ð‘œð‘œð‘Ąð‘ ð‘Ąð‘Ÿð‘Žð‘ð‘€ð‘œð‘‘ð‘Ē𝑙𝑒(ðī𝑝𝑝𝑀𝑜𝑑ð‘Ē𝑙𝑒);

ðŸ’Ą This loads the AppModule.

3ïļâƒĢ 𝐋ðĻ𝐚𝐝 𝐀ðĐðĐ-𝐋𝐞ðŊ𝐞ðĨ 𝐌ðĻ𝐝ðŪðĨ𝐞 ðŸ“Ķ

The app-level module or root module has one app-level component or root component.

The bootstrap property or key of the NgModule decorator specifies which component should be loaded by Angular when the app-level module loads.

Code ðŸ‘Ļ‍ðŸ’ŧ👇👇👇

ð‘ð‘œð‘œð‘Ąð‘ ð‘Ąð‘Ÿð‘Žð‘: [ðī𝑝𝑝ðķð‘œð‘šð‘ð‘œð‘›ð‘’ð‘›ð‘Ą]

ðŸ’Ą Thus the AppComponent is loaded.

4ïļâƒĢ 𝐋ðĻ𝐚𝐝 𝐀ðĐðĐ-𝐋𝐞ðŊ𝐞ðĨ 𝐂ðĻðĶðĐðĻ𝐧𝐞𝐧𝐭 ⚙ïļ

The App component controller contains:

Code ðŸ‘Ļ‍ðŸ’ŧ👇👇👇

@ðķð‘œð‘šð‘ð‘œð‘›ð‘’ð‘›ð‘Ą({

ð‘ ð‘’ð‘™ð‘’ð‘ð‘Ąð‘œð‘Ÿ: '𝑎𝑝𝑝-ð‘Ÿð‘œð‘œð‘Ą',

ð‘Ąð‘’ð‘šð‘ð‘™ð‘Žð‘Ąð‘’ð‘ˆð‘Ÿð‘™: './𝑎𝑝𝑝.ð‘ð‘œð‘šð‘ð‘œð‘›ð‘’ð‘›ð‘Ą.â„Žð‘Ąð‘šð‘™',

ð‘ ð‘Ąð‘Ķ𝑙𝑒𝑈𝑟𝑙𝑠: ['./𝑎𝑝𝑝.ð‘ð‘œð‘šð‘ð‘œð‘›ð‘’ð‘›ð‘Ą.𝑠𝑐𝑠𝑠']

})

𝑒ð‘Ĩð‘ð‘œð‘Ÿð‘Ą 𝑐𝑙𝑎𝑠𝑠 ðī𝑝𝑝ðķð‘œð‘šð‘ð‘œð‘›ð‘’ð‘›ð‘Ą {...

ðŸ’Ą Thus, the next step is the proceeding of the template app.component.html.

5ïļâƒĢ 𝐏ðŦðĻ𝐜𝐞𝐎𝐎 𝐓𝐞ðĶðĐðĨ𝐚𝐭𝐞 🖞ïļ

The templateURL property points to the HTML template file, which will be rendered to the browser when this component is processed.

And this template in html will call the components whcih will call other components till you get all you require according to your app design.

Code ðŸ‘Ļ‍ðŸ’ŧ👇👇👇

<ℎ𝑒𝑎𝑑𝑒𝑟>

<𝑑𝑖ð‘Ģ 𝑐𝑙𝑎𝑠𝑠="𝑙𝑎ð‘Ķ𝑜ð‘Ēð‘Ą-𝑐𝑜𝑙ð‘Ē𝑚𝑛 ð‘–ð‘Ąð‘’ð‘š-ð‘™ð‘–ð‘ ð‘Ą 𝑗ð‘Ēð‘ ð‘Ąð‘–ð‘“ð‘Ķ-ð‘ð‘œð‘›ð‘Ąð‘’ð‘›ð‘Ą-ð‘ð‘’ð‘›ð‘Ąð‘’ð‘Ÿ">

<ℎ3>ðĩ𝑜𝑜𝑘 ðŋð‘–ð‘ ð‘Ą

<ð‘‘ð‘Žð‘Ąð‘Ž-ð‘™ð‘–ð‘ ð‘Ą [ð‘‘ð‘Žð‘Ąð‘Žðŋð‘–ð‘ ð‘Ą]="" [ð‘‘ð‘Žð‘Ąð‘Žð‘‡ð‘Ķ𝑝𝑒]="ðĩ𝑜𝑜𝑘" (ð‘œð‘›ðžð‘Ąð‘’ð‘šð·ð‘’ð‘™ð‘’ð‘Ąð‘’)="ð‘œð‘›ðžð‘Ąð‘’ð‘šð·ð‘’ð‘™ð‘’ð‘Ąð‘’($𝑒ð‘Ģð‘’ð‘›ð‘Ą)">

<ð‘“ð‘œð‘œð‘Ąð‘’ð‘Ÿ>

#angular #boostrapping #til

 

PreviousNext
 Return to site
Leave a Comment