6. فهم مساحة عمل Angular وهيكلة الملفات

يتم تنظيم مشاريع Angular في مساحة عمل (workspace). يعد فهم الهيكلية أمراً أساسياً للتطوير الفعال.

ملفات جذر مساحة العمل (Workspace Root Files)

• angular.json: تهيئة مساحة العمل بالكامل. يحدد المشاريع وخيارات البناء وأطر الاختبار والأوامر.
• package.json: يحتوي على البيانات الوصفية للمشروع، والتبعيات (المكتبات اللازمة لتشغيل التطبيق)، وتبعيات التطوير (الأدوات اللازمة للتطوير/البناء).
• tsconfig.json: ملفات تهيئة TypeScript. تحدد كيفية تجميع التعليمات البرمجية لـ TypeScript وتحويلها إلى JavaScript.

مجلد src (التعليمات البرمجية المصدر)

هذا هو المكان الذي توجد فيه جميع التعليمات البرمجية لتطبيقك. الملفات الأساسية هنا هي:

1. index.html: صفحة المضيف الواحدة لتطبيق SPA. يقوم Angular بحقن محتواه في وسم <app-root> هنا.
2. main.ts: نقطة الدخول للتطبيق. يقوم بتمهيد وحدة Angular الرئيسية (AppModule) لبدء التطبيق.
3. styles.css: الأنماط العامة للتطبيق.
4. app/: يحتوي على وحدة التطبيق الرئيسية والمكونات الأساسية.

ملفات التطبيق الأساسية (src/app/)

يتكون كل تطبيق Angular من مكونات، وقوالب، وأنماط، ووحدات.

• app.module.ts: يحدد الوحدة الجذر (root module) للتطبيق. يعلن عن المكونات والخدمات والوحدات الأخرى المتاحة.
• app.component.ts: فئة المكون الرئيسية (المنطق).
• app.component.html: قالب المكون (العرض).
• app.component.css: الأنماط الخاصة بالمكون (الأنماط المحددة النطاق).
• app-routing.module.ts: يتعامل مع مسارات التنقل في التطبيق.

تشبيه: التطبيق عبارة عن شجرة. index.html هو التربة، main.ts هو البذرة، app.module.ts هو الجذع، و app.component.ts/html هو الفرع والورقة الأولى.