با مطالعه‌ی فصل گذشته اطلاعات نسبتا کلی در ارتباط با انگولار و انواع نسخه های آن بدست آوردید. سپس با اعمال یک سری دستور سیستم مدیریت پکیج یا NPM و سیستم مدیریت خط فرمان انگولار تحت عنوان Angular CLI، را نصب کردید. در نهایت پس از انجام تمام این مراحل با وارد کردن آدرس http://localhost:4200 به صفحه اولین پروژه انگولار خود وارد شده و پیام app Works که به معنای کار کردن نرم افزار شماست، را مشاهده کردید.
حال در ادامه به توضیح ساختار پوشه بندی انگولار و همچنین نحوه‌ی ویرایش آنها می‌پردازیم.
فایل‌های انگولار
پس از نصب انگولار یک پوشه که نام آن را خودتان مشخص کرده اید در مسیر مورد نظرتان ایجاد می‌گردد. توضیح هر یک از این فایل‌ها به صورت زیر است:
پوشه e2e: به عنوان یک پوشه برای تست کردن پروژه مورد استفاده قرار می‌گیرد که مخفف عبارت End 2 End است.
پوشه src: به عنوان پوشه اصلی نرم‌افزار شما محسوب شده که درون آن فایل‌هایی با فرمت‌های html و ts و … وجود دارند و اصلی ترین فایل آن به نام index.html است که بدنه‌ی اصلی نرم افزار میباشد.
سایر فایل‌ها: به عنوان فایل‌های برای تنظیمات نرم‌افزار بوده که اغلب به صورت پیش فرض توسط خط فرمان Angular CLI ایجاد شده است.
محتویات درون پوشه src
این پوشه شامل یک سری فایل‌های ویژه است که برای اجرای نرم افزار شما مورد استفاده قرار می‌گیرند همانطور که قبلا ذکر کردیم مهم‌ترین فایل موجود تحت عنوان index.html در ریشه یا root این پوشه قرار دارد و با کلیک روی آن می‌توانید محتویات درون آن را ملاحظه بفرمایید. علاوه بر این یک سری پوشه‌های دیگر درون src وجود دارند که شرح هر کدام از آنها به صورت زیر است:
پوشه app: این پوشه به عنوان قلب کنترلی اصلی نرم افزار معرفی می‌شود و شامل کامپوننت های نرم‌افزار شما میباشد.
پوشه assets: از این پوشه معمولا برای قرار دادن تصاویر و سایر فایل‌های جانبی استفاده می‌کنند.
پوشه environment: درون این پوشه معمولا متغییرهای مربوط به محیط نرم‌افزار تنظیم می‌شود که به صورت پیش فرض ثابت می‌باشند و در طول این سری از دوره های آموزشی کمتر به آن می‌پردازیم.
کار کردن با محیط انگولار
برای ایجاد یک سری عملیات مقدماتی در پروژه خود نیاز داریم تا تغییراتی را ایجاد کرده و در وهله‌ی اول با محیط ساختاری انگولار آشنا شویم.
هنگامیکه شما آدرس http://localhost:4200 را وارد می‌کنید با عبارت app works روبه‌رو خواهید شد. البته در نسخه‌های جدید این فریم‌ورک یک آرم از انگولار ۴ مشابه تصویر زیر ملاحظه می‌کنید:
برای ایجاد تغییرات روی این صفحه کافی‌ست وارد پوشه‌ی app شده و روی فایل app.component.ts کلیک نمایید. پسوند ts مخفف عبارت TypeScript می باشد که در ادامه بیشتر درباره آن بحث می‌کنیم. بنابراین محتویات فایل app.component.ts به صورت زیر خواهد بود:
در صورتیکه مقدار عبارت روبه‌روی title را به عبارت roxo App یا هر عنوان دلخواه دیگری تغییر دهید. عنوان بالای آرم انگولار به Welcome to roxo App!! تغییر می‌کند.
این قابلیت توسط سرور Nodejs برای شما فراهم شده است تا در سریع‌ترین زمان ممکن تغییرات موردنظر خود را به صورت آنلاین و در لحظه مشاهده کنید. در اصطلاح به این حالت watch یا watch-poll گفته می‌شود. یعنی سرور به حالت انتظار می‌نشیند تا پس از اعمال اولین تغییرات در صفحه، سریعا آن را نمایش دهد.
در پوشه app یک فایل دیگر تحت عنوان app.component.html وجود دارد که به عنوان فایل html برای کامپوننت app همواره و در طول برنامه مورد استفاده قرار می‌گیرد. اگر این فایل را باز کنید محتویات آن به صورت زیر خواهد بود: