Angular Academy · درس

إنشاء المكوّنات المستقلة

صرّحوا عن المكوّنات باستخدام العلامة standalone

إنشاء المكوّنات المستقلة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

إنشاء Standalone Component

إن standalone component مجرد class مزينة بـ @Component ومحدَّدة على أنها standalone. في Angular v19+، هذا هو الإعداد الافتراضي، لذلك غالبًا لن تكتب هذا العلم أصلًا.

العلم standalone

تاريخيًا، كنت تضبط standalone: true في decorator. أما في v19 وما بعده، فالمكوّنات standalone افتراضيًا، ولذلك يكون العلم اختياريًا.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Selector

إن selector هو وسم العنصر المخصّص المستخدم لإدراج المكوّن في قالب، مثل app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

قالب مضمن

استخدم الخاصية template لكتابة HTML مضمن، وهي مناسبة للمكوّنات الصغيرة.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

قالب خارجي

بالنسبة إلى الواجهات الأكبر، استخدم templateUrl للإشارة إلى ملف HTML.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Styles

أضف styles خاصة بنطاق المكوّن باستخدام styles (مضمنة) أو styleUrl / styleUrls (ملفات خارجية).

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

منطق Class الخاص بالمكوّن

يحتوي جسم class على الحالة والسلوك. ومع signals، صرّح عن الحالة التفاعلية بوصفها حقولًا.

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

لا حاجة إلى Module

لاحظ عدم وجود @NgModule أو مصفوفة declarations. فالمكوّن جاهز للاستيراد أينما دعت الحاجة إليه.

اصطلاح تسمية الملفات

تسمّي Angular الملفات وفق اصطلاح مثل greeting.component.ts، والclass باسم GreetingComponent، والselector باسم app-greeting.

استخدام مكوّن داخل مكوّن آخر

لاستخدام standalone child component، استورده في مصفوفة imports الخاصة بالمكوّن الأب (وهو ما سيُشرح في الدرس التالي)، ثم ضع selector الخاص به في قالب الأب.

الإنشاء باستخدام CLI

ينشئ Angular CLI standalone components افتراضيًا. يؤدي تشغيل ng generate component greeting إلى إنشاء هيكل GreetingComponent مستقل لك.

اختبار سريع: إنشاء المكوّنات

حول الإعدادات الافتراضية لـ standalone.

مراجعة: إنشاء Standalone

تنشئ standalone component باستخدام @Component، مع إمكانية ضبط standalone: true اختياريًا (وهو الإعداد الافتراضي في v19+). وتعرّف selector وtemplate أو templateUrl، وstyles اختيارية، ومنطق class. ولا يلزم استخدام NgModule. التالي: استيراد التبعيات مباشرةً.

الأسئلة الشائعة

هل درس «إنشاء المكوّنات المستقلة» مجاني؟

نعم — نص درس «إنشاء المكوّنات المستقلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء المكوّنات المستقلة»؟

صرّحوا عن المكوّنات باستخدام العلامة standalone تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إنشاء المكوّنات المستقلة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy