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

مسار تشغيل Angularعملية الـ Bootstrappingملف main.tsنقطة بداية Angularدالة bootstrapApplicationدورة حياة تشغيل التطبيق

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

الملف أو العنصر	مساره في المشروع	دوره في عملية التشغيل
index.html	src/index.html	ملف الويب الأساسي الوحيد الذي يفتحه المتصفح ويحتوي على وسم العرض
main.ts	src/main.ts	نقطة البداية البرمجية (Entry Point) التي تطلق عمل Angular
app.config.ts	src/app/app.config.ts	ملف التكوينات والإعدادات العامة للتطبيق (مثل التوجيه والاتصال بالخادم)
app.component.ts	src/app/app.component.ts	المكون الأساسي الأول (Root Component) الذي يتم عرضه داخل الصفحة

الشرح

بعد أن تعرفنا في الدرس السابق على بنية الملفات ومجلدات المشروع بالتفصيل، حان الوقت للإجابة عن السؤال الأهم: كيف يبدأ التطبيق بالعمل فعلياً؟ عندما تفتح مشروعك في المتصفح، ما هو أول ملف يقرأه المتصفح؟ وكيف يستيقظ إطار عمل Angular ليعرض مكوناتك؟ في هذا الدرس، سنتتبع رحلة تشغيل التطبيق (Bootstrapping Process) من نقطة الصفر، وكيف يعمل ملف main.ts مع المكونات المستقلة الحديثة.

كيف يبدأ Angular بالعمل؟ (رحلة الـ Bootstrapping)

في العمارة الحديثة لـ Angular، تسير عملية تشغيل التطبيق بترتيب منطقي دقيق ومباشر:

فتح ملف HTML:

يبدأ المتصفح بقراءة ملف src/index.html. هذا الملف فارغ تقريبا من المحتوى الحقيقي، ولكنه يحتوي على وسم رئيسي مخصص لعرض التطبيق (غالباً يكون <app-root></app-root>).

استدعاء نقطة البداية (main.ts):

يبحث الملف عن سكريبت التشغيل الأساسي وهو main.ts.

إطلاق التطبيق (Bootstrapping):

يقوم ملف main.ts باستدعاء دالة الإطلاق الحديثة لتفعيل المكون الرئيسي (AppComponent) وربطه مباشرة بوسم الـ HTML الموجود في الصفحة.

أمثلة برمجية: ملفات التشغيل الأساسية

لنفهم كيف يتم ربط الأكواد ببعضها، دعنا نلقي نظرة على محتويات أهم ملفين مسؤولين عن تشغيل التطبيق:

المثال الأول: ملف نقطة البداية main.ts (الإصدار الحديث)

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

typescript

1	import { bootstrapApplication } from '@angular/platform-browser';
2	import { appConfig } from './app/app.config';
3	import { AppComponent } from './app/app.component';
4
5	// إطلاق التطبيق باستخدام المكون الجذري والتكوينات الخاصة به
6	bootstrapApplication(AppComponent, appConfig)
7	.catch((err) => console.error(err));

المثال الثاني: ملف العرض الأساسي index.html

هذا هو ملف HTML الوحيد الذي يتم تحميله، وبداخله يتم حقن وعرض جميع مكونات Angular ديناميكياً:

html

1	<!doctype html>
2	<html lang="ar" dir="rtl">
3	<head>
4	<meta charset="utf-8">
5	<title>تطبيقي الأول في Angular</title>
6	<base href="/">
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	</head>
9	<body>
10	<!-- هنا يتم عرض المكون الرئيسي وتغيير محتواه ديناميكياً -->
11	<app-root></app-root>
12	</body>
13	</html>

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

—افهم مسار البيانات ولا تحفظه!
—لا داعي لحفظ الأكواد السابقة غيباً؛ ففهمك لأن المتصفح يقرأ index.html ثم ينتقل لملف main.ts ليقوم بتشغيل AppComponent سيجعلك قادراً على تتبع أي مشكلة في ظهور صفحتك الأولى واكتشاف مكان الخطأ الفني فوراً دون تخبط.

الدرس السابق

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

الدرس التالي

ما هي لغة TypeScript

الملف أو العنصر

مساره في المشروع

دوره في عملية التشغيل

index.html

src/index.html

ملف الويب الأساسي الوحيد الذي يفتحه المتصفح ويحتوي على وسم العرض

main.ts

src/main.ts

نقطة البداية البرمجية (Entry Point) التي تطلق عمل Angular

app.config.ts

src/app/app.config.ts

ملف التكوينات والإعدادات العامة للتطبيق (مثل التوجيه والاتصال بالخادم)

app.component.ts

src/app/app.component.ts

المكون الأساسي الأول (Root Component) الذي يتم عرضه داخل الصفحة

كيف يبدأ Angular بالعمل؟ (رحلة الـ Bootstrapping)

في العمارة الحديثة لـ Angular، تسير عملية تشغيل التطبيق بترتيب منطقي دقيق ومباشر:

فتح ملف HTML:

استدعاء نقطة البداية (main.ts):

يبحث الملف عن سكريبت التشغيل الأساسي وهو main.ts.

إطلاق التطبيق (Bootstrapping):

أمثلة برمجية: ملفات التشغيل الأساسية

لنفهم كيف يتم ربط الأكواد ببعضها، دعنا نلقي نظرة على محتويات أهم ملفين مسؤولين عن تشغيل التطبيق:

المثال الأول: ملف نقطة البداية main.ts (الإصدار الحديث)

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

typescript

1	import { bootstrapApplication } from '@angular/platform-browser';
2	import { appConfig } from './app/app.config';
3	import { AppComponent } from './app/app.component';
4
5	// إطلاق التطبيق باستخدام المكون الجذري والتكوينات الخاصة به
6	bootstrapApplication(AppComponent, appConfig)
7	.catch((err) => console.error(err));

المثال الثاني: ملف العرض الأساسي index.html

هذا هو ملف HTML الوحيد الذي يتم تحميله، وبداخله يتم حقن وعرض جميع مكونات Angular ديناميكياً:

html

1	<!doctype html>
2	<html lang="ar" dir="rtl">
3	<head>
4	<meta charset="utf-8">
5	<title>تطبيقي الأول في Angular</title>
6	<base href="/">
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	</head>
9	<body>
10	<!-- هنا يتم عرض المكون الرئيسي وتغيير محتواه ديناميكياً -->
11	<app-root></app-root>
12	</body>
13	</html>