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