Angular / الأساسي / الدرس 1
الأدوات ونموذج المكوّن
افصل فحص TypeScript وترجمة قوالب Angular وتنفيذ المتصفح، ثم صف المكوّن ضمن أساس إصدارات صريح.
في هذه الصفحة
أهداف الدرس
- تحديد صنف المكوّن وقالبِه ومحددِه وعنصر استضافته.
- شرح استيرادات المكوّن المستقل وإقلاع التطبيق.
- تمييز النماذج المحلية المفحوصة من المقاطع التابعة للمتصفح.
تثبيت أدوات متوافقة بدل تخمين الأحدث
يستخدم المقرر Angular 20.3.0 وTypeScript 5.9.3 وRxJS 7.8.2 وNode.js 22.23.3 للتحقق المعزول، وهي تركيبة يسمح بها الجدول الرسمي. هذا أساس تعليمي مثبت وليس ادعاء أن 20 هي الأحدث. راجع توثيق 20 لسلوك الإطار وحالة الدعم منفصلة عند النشر الحقيقي. يشغل Node الأدوات والأمثلة، ويعرض المتصفح التطبيق. لا تثبت تصريحات TypeScript واجهة DOM ولا تجعل Node متصفحًا.
يربط المكوّن السلوك بالعرض
يتكون المكوّن من صنف وبيانات Angular وقالب يصف العرض. يحدد المحدد استعماله في قالب آخر، ويربط Angular نسخته بعنصر استضافة. اجعل الصنف لميزة متماسكة لا لكل عمليات الصفحة. يختبر نموذج TypeScript الأول حساب عرض دون ادعاء تقديم مكوّن. يسهل اختبار الحساب الخالص مستقلًا؛ ويحتاج المكوّن أيضًا ترجمة Angular وسياق اعتماديات وبيئة عرض مناسبة. هذه أدلة مختلفة.
export {};
function courseTitle(name: string): string { return `Course: ${name}`; }
console.log(courseTitle("Angular"));
Course: Angular
يطبع البرنامج Course: Angular ويفحص بناء النص فقط دون ادعاء عرض DOM أو إقلاع Angular.
التصريح باعتماديات المكوّن
يستخدم المثال standalone: true صراحة للوضوح. تصرّح المكوّنات المستقلة باعتماديات القالب في imports بدل اشتراط NgModule معلنة، لكنها تظل تحتاج المكوّنات والتوجيهات والأنابيب المستخدمة. لا تحتاج HTML والاستيفاء هنا استيراد ميزة إضافية. يقدم الصنف title. يحتاج المقطع إقلاعًا ومضيف HTML، لذا يصف العرض المتوقع في سياقه ولا يدّعي اختبار متصفح.
import { Component } from "@angular/core";
@Component({
selector: "app-course-card",
standalone: true,
template: `<h1>{{ title }}</h1>`
})
export class CourseCard { title = "Angular foundations"; }
في مضيف مقلع صحيحًا يظهر العنوان Angular foundations، ولا يبدأ المقطع وحده تطبيقًا أو يفحص عرضه بالمتصفح.
لكل مرحلة بناء مسؤولية مختلفة
يفحص TypeScript الصنف، ويترجم Angular القالب ويفحصه، وينفذ المتصفح الناتج. لا يعادل نزع الأنواع مترجم Angular الكامل. يقلع التطبيق المستقل عادة عبر bootstrapApplication مع مزودي التطبيق عند الحد. أظهر إعداد التوجيه وHTTP والبيئة بدل إعداد عام مجهول. تضم مساحة العمل نصوص الحزم والبناء؛ احفظ إصداراتها لإعادة الخطأ. لا يشغل المقرر خوادم تطوير أو يعدل مشروعًا قائمًا للشرح.
حفظ تجربة مكوّن قابلة للتكرار
سجّل الإطار والمترجم والبيئة والقفل والإقلاع وأصغر قالب يعيد المشكلة. لا يثبت تشخيص محرر أو نجاح نموذج صحة استيراد التطبيق. استخدم أسماء ومحددات ثابتة وقوالب صغيرة واضحة المسؤولية. افصل البيانات الاصطناعية عن الأسرار والإنتاج. توقع النص والتفاعل ثم اختبر المكوّن معزولًا عند الإمكان. صرّح هل فحصت الشيفرة أو حللت القالب أو شغلت المكوّن أو المتصفح؛ فلا تتساوى هذه الفحوص.
الأخطاء الشائعة وإصلاحها
محدد غير معروف في قالب المستهلك.
- لماذا يحدث؟
- يغيب المكوّن المستقل عن imports للمستهلك.
- كيف تصلحه؟
- استورده عند مالك القالب الفعلي.
- كيف تتجنب تكراره؟
- تتبّع اعتماديات القالب مستقلة عن استيراد TypeScript.
وصف نموذج Node كاختبار متصفح.
- لماذا يحدث؟
- خُلط الحساب المحلي ببنية العرض.
- كيف تصلحه؟
- حدّد مستوى التحقق وأضف تجربة مكوّن.
- كيف تتجنب تكراره؟
- افصل فحوص النموذج والقالب والمتصفح.
يجمع المشروع إصدارات مترجم غير مدعومة.
- لماذا يحدث؟
- افتُرض التوافق من أحدث حزم منفصلة.
- كيف تصلحه؟
- اختر تركيبة من الجدول الرسمي.
- كيف تتجنب تكراره؟
- ثبّت تغييرات الأدوات وراجعها معًا.
اختبر فهمك
1. غيّر مدخل النموذج إلى Forms. أعط الناتج والدليل الإضافي لتغيير عنوان المكوّن.
اعرض الحل المشروح
يطبع النموذج Course: Forms. لإثبات تغيير عنوان المكوّن غيّر حالته أو مدخله وترجم قالبه وافحص العنوان المعروض بتجربة مناسبة. لا يفحص تشغيل الدالة الاستيراد أو الإقلاع أو كشف التغيير أو النص في DOM. احفظ الاختبارين إذا اعتمد التطبيق عليهما.
2. يفحص الصنف بنجاح ويستخدم قالبه مكوّنًا فرعيًا مفقودًا. أين يظهر العيب وأين الإصلاح؟
اعرض الحل المشروح
تكشف ترجمة القالب الاعتمادية أو المحدد المجهول. أضف الفرعي إلى imports للمستهلك بعد تأكيد محدده. لا يثبت فحص الصنف أو إخفاء الخطأ بمخطط عام عرض الفرعي المقصود. افحص قالب المستهلك بعد الإصلاح.
أهم ما تعلمته
- يربط المكوّن صنفًا وبيانات وقالبًا ومضيفًا.
- ثبّت أدوات إطار متوافقة.
- صف التحقق المحلي والمتصفح بدقة.