با مطالعه‌ی فصل گذشته اطلاعات مفیدی از مقدمات انگولار و زبان تایپ اسکریپت بدست آوردید. حالا وقت آن رسیده است که شیرجه‌ی عمیق‌تری زده و به قلب انگولار نشانه برویم. در این فصل قصد داریم توضیحات عمیق و تکمیلی تری در ارتباط با انواع قسمت‌های فریم‌ورک قدرتمند انگولار ارائه دهیم. با ما همراه باشید.
همانطور که با یکدیگر بررسی کردیم اگر صفحه‌ی مربوط به app.component.html را باز کرده و سپس محتویات فایل درون آن را حذف کنیم و در نهایت اقدام به اجرای دستور ng serve نماییم، آنگاه صفحه‌ای سفید و بدون اطلاعات نمایش داده می‌شود.
اما این تصور ذهنی نباید وجود داشته باشد که فایل app.component.html در سرور کامپایل و در صفحه مانیتور اجرا می‌شود بلکه تمام محتویات موجود در کل کامپوننت ها باید در یک فایل به نام index.html خلاصه شود. این بدین معنی‌ست که هر تعداد کامپوننت داشته باشیم با فرخوانی تگ‌های آنها در فایل index.html به قالب ساختاری آنها دسترسی داریم.
بنابراین اگر فایل Index.html را از مسیر src باز کنید مجموعه‌ی کدهایی به صورت زیر در آن قرار گرفته است:
تمام تگ‌های موجود در این صفحه از نوع html بوده و چنانچه به این زبان تسلط داشته باشید برای شما قابل فهم هستند. اما یک تگ به نام <app-root> وجود دارد که تا به حال به آن برخورد نکردید. این تگ در واقع همان رابط بین کامپوننت app و مشتقات آن با صفحه اصلی وب اپلیکیشن شما است. کامپوننت app در مسیر src -> app موجود می‌باشد.
این فایل به عنوان یک کنترلر یا مرکز کنترل کامپوننت شما (که در اینجا app نام دارد) انجام وظیفه می کند. محتویات دستورات و اطلاعات موجود در این کامپوننت را با یکدیگر بررسی خواهیم کرد:
در این فایل یک عبارت با عنوان Component تعریف شده و محتویاتی را برای معرفی مجموعه‌ی خود ارائه می‌دهد. یکی از کلمات کلیدی که درون این کامپوننت استفاده شده است برابر است با selector.
بنابراین در این فایل که به صورت پیش‌فرض ایجاد شده یک سلکتور برای کامپوننت app به نام <app-root> معرفی شده است.
به عبارت دیگر دستور <app-root></app-root> معرف چهار فایل app.component.ts, app.component.html, app.component.spec.ts و app.component.css است.
حال اگر آدرس http://localhost:4200 را باز کنید و روی آن راست کلیک کرده و سپس عبارت view page source را انتخاب کنید با مجموعه‌ی دستورهای زیر روبه‌رو خواهید شد: