جولة تفصيلية داخل بنية ملفات ومجلدات المشروع

هيكلة مشروع Angularملفات أنجلرمجلد srcملف angular.jsonدراسة بنية الملفاتتنظيم مشروع الويب

جدول مرجعي سريع

المجلد أو الملف	مكانه في المشروع	الوظيفة الأساسية
src	المجلد الرئيسي للمشروع	يحتوي على كافة ملفات البرمجة وتصميم واجهة المستخدم الخاصة بتطبيقك
src/app	داخل مجلد src	المكان الذي سنكتب فيه مكونات التطبيق (Components) والصفحات والخدمات
angular.json	في الجذر الرئيسي للمشروع	ملف الإعدادات العامة والتكوينات المسؤولة عن بناء وتجميع المشروع
package.json	في الجذر الرئيسي للمشروع	يحتوي على قائمة المكتبات والحزم الخارجية المُثبتة وأوامر التشغيل

الشرح

بعد أن أنشأنا مشروعنا الأول ونجحنا في تشغيله محلياً في الدرس السابق، حان الوقت لنفهم ماذا يحدث خلف الكواليس. عندما نفتتح مجلد المشروع في محرر الأكواد (VS Code)، سنجد مجموعة كبيرة من الملفات والمجلدات التي تم إنشاؤها تلقائياً. فهم وظيفة كل ملف ومجلد داخل هيكل Angular هو الخطوة الأساسية لتنظيم أكوادك باحترافية وتجنب العشوائية مع كبر حجم مشروعك.

نظرة عميقة على هيكل ملفات المشروع

عند فتح مجلد المشروع الجديد، ستجد عدة ملفات ومجلدات رئيسية، إليك تفصيل أهمها:

مجلد src/ (Source Code):

هذا هو المجلد الأهم على الإطلاق، فكل الأكواد التي ستكتبها طوال فترة تطوير التطبيق (مكونات، تصميمات، صور، ملفات منطقية) ستكون بداخل هذا المجلد.

مجلد src/app/:

هو القلب النابض لتطبيقك. يحتوي افتراضياً على المكون الأساسي الأول وملفات التوجيه (Routing). هنا ستقوم بإنشاء كافة مكونات مشروعك المستقبلية.

ملف angular.json:

ملف إعدادات التكوين الخاص بأداة Angular CLI. يحدد كيفية بناء التطبيق (Build Configurations)، ومسارات الملفات، وملفات التصميم الخارجية.

ملف package.json:

كما ذكرنا سابقاً، يحتوي على إصدارات الحزم والمكتبات التي يعتمد عليها مشروعك، بالإضافة إلى الاختصارات (Scripts) التي تستخدمها لتشغيل أو بناء التطبيق (مثل ng serve أو ng build).

أمثلة برمجية وفهم الملفات التشغيلية

ℹ️ معلومة

لفهم كيف تتكامل هذه الملفات معاً، دعنا نلقي نظرة على محتويات بعض الملفات الهامة في الجذر الرئيسي للمشروع:

المثال الأول: هيكلة ملف الإعدادات package.json

يوضح هذا الملف الحزم البرمجية التي يعتمد عليها مشروعك، وكيفية تعريف الأوامر الخاصة بها:

json

1	{
2	"name": "my-app",
3	"version": "0.0.0",
4	"scripts": {
5	"ng": "ng",
6	"start": "ng serve",
7	"build": "ng build",
8	"watch": "ng build --watch --configuration development"
9	},
10	"dependencies": {
11	"@angular/core": "^18.0.0",
12	"@angular/common": "^18.0.0",
13	"rxjs": "~7.8.0",
14	"tslib": "^2.3.0"
15	}
16	}

المثال الثاني: ملف إعدادات التكوين angular.json (نظرة خاطفة)

يستخدم هذا الملف لتحديد المسارات الأساسية وملفات البداية للمشروع:

json

1	{
2	"projects": {
3	"my-app": {
4	"architect": {
5	"build": {
6	"options": {
7	"outputPath": "dist/my-app",
8	"index": "src/index.html",
9	"main": "src/main.ts"
10	}
11	}
12	}
13	}
14	}
15	}

نصائح احترافية

—لا تعبث أبداً بملفات الإعدادات الجذرية إلا للضرورة القصوى!
—في بداية تعلمك لـ Angular، تجنب تعديل ملفات مثل angular.json أو tsconfig.json عشوائياً. تركيزك الأساسي يجب أن ينصب داخل مجلد src/app. أي خطأ في ملفات الإعدادات الجذرية قد يؤدي إلى توقف المشروع بالكامل عن التجميع والعمل.

الدرس السابق

إنشاء أول تطبيق Angular وتشغيله محلياً

الدرس التالي

فهم مسار تشغيل التطبيق

المجلد أو الملف

مكانه في المشروع

الوظيفة الأساسية

src

المجلد الرئيسي للمشروع

يحتوي على كافة ملفات البرمجة وتصميم واجهة المستخدم الخاصة بتطبيقك

src/app

داخل مجلد src

المكان الذي سنكتب فيه مكونات التطبيق (Components) والصفحات والخدمات

angular.json

في الجذر الرئيسي للمشروع

ملف الإعدادات العامة والتكوينات المسؤولة عن بناء وتجميع المشروع

package.json

في الجذر الرئيسي للمشروع

يحتوي على قائمة المكتبات والحزم الخارجية المُثبتة وأوامر التشغيل

نظرة عميقة على هيكل ملفات المشروع

عند فتح مجلد المشروع الجديد، ستجد عدة ملفات ومجلدات رئيسية، إليك تفصيل أهمها:

مجلد src/ (Source Code):

مجلد src/app/:

ملف angular.json:

ملف package.json:

أمثلة برمجية وفهم الملفات التشغيلية

ℹ️ معلومة

لفهم كيف تتكامل هذه الملفات معاً، دعنا نلقي نظرة على محتويات بعض الملفات الهامة في الجذر الرئيسي للمشروع:

المثال الأول: هيكلة ملف الإعدادات package.json

يوضح هذا الملف الحزم البرمجية التي يعتمد عليها مشروعك، وكيفية تعريف الأوامر الخاصة بها:

json

1	{
2	"name": "my-app",
3	"version": "0.0.0",
4	"scripts": {
5	"ng": "ng",
6	"start": "ng serve",
7	"build": "ng build",
8	"watch": "ng build --watch --configuration development"
9	},
10	"dependencies": {
11	"@angular/core": "^18.0.0",
12	"@angular/common": "^18.0.0",
13	"rxjs": "~7.8.0",
14	"tslib": "^2.3.0"
15	}
16	}

المثال الثاني: ملف إعدادات التكوين angular.json (نظرة خاطفة)

يستخدم هذا الملف لتحديد المسارات الأساسية وملفات البداية للمشروع:

json

1	{
2	"projects": {
3	"my-app": {
4	"architect": {
5	"build": {
6	"options": {
7	"outputPath": "dist/my-app",
8	"index": "src/index.html",
9	"main": "src/main.ts"
10	}
11	}
12	}
13	}
14	}
15	}