Angular Academy · درس

لماذا المكوّنات المستقلة؟

تعرّفوا على كيفية تبسيط المكوّنات المستقلة لـ Angular

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

لماذا Standalone Components؟

تتيح لك Standalone Components إنشاء تطبيقات Angular من دون NgModules. ويعلن المكوّن عن تبعياته بنفسه، مما يجعل اللبنات مستقلة وأسهل فهمًا.

عصر NgModule

تقليديًا، كان يجب التصريح عن كل مكوّن وتوجيه وpipe داخل @NgModule. وكانت الوحدات تجمع التصريحات وتدير عمليات الاستيراد والتصدير.

وقد أضاف ذلك تعليمات نمطية كثيرة وطبقة إضافية من التجريد.

المشكلات التي سببتها NgModules

سببت NgModules احتكاكات شائعة، مثل نسيان التصريح عن مكوّن، أو التصريح عنه في وحدتين، أو الخلط بين imports وdeclarations، أو إنشاء shared modules كبيرة تُضمّن عناصر أكثر من اللازم.

فكرة Standalone

مع standalone components، يدرج كل مكوّن ما يحتاج إليه بالضبط في مصفوفة imports الخاصة به. ولا توجد وحدة مركزية يجب أن تعرف بوجوده.

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

تبعيات مستقلة

بما أن standalone component يعلن تبعياته بنفسه، يمكنك قراءة ملف واحد ومعرفة كل ما يعتمد عليه. وهذا يحسّن الوضوح وأدوات التطوير.

تعليمات نمطية أقل

لن تحتاج بعد الآن إلى مطابقة declarations وexports عبر الوحدات. استورد المكوّن مباشرةً في المكان الذي تستخدمه فيه، على نحو مشابه لطريقة عمل ES modules.

Tree-Shaking أفضل

تجعل standalone components رسم التبعيات صريحًا، مما يساعد أدوات التجميع على إزالة الشيفرة غير المستخدمة، وقد يؤدي إلى حزم أصغر.

تبسيط Lazy Loading

يمكن للمسارات تحميل standalone component كسولًا مباشرةً باستخدام dynamic import، من دون الحاجة إلى غلاف feature module.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

الافتراضي الجديد

في إصدارات Angular الحديثة، أصبح standalone هو الإعداد الافتراضي للمكوّنات الجديدة المُنشأة. ولا تزال NgModules تعمل، لكن standalone هو المسار الموصى به مستقبلًا.

التوافق مع NgModules

يتوافق standalone code مع code القائم على الوحدات. إذ يمكن استيراد standalone component إلى NgModule، كما يمكن لمكوّن قائم على NgModule استخدام standalone imports، مما يسهّل الترحيل.

ما الذي ما زلت تهيّئه

تُوفَّر إعدادات مستوى التطبيق، مثل router أو HTTP client، من خلال providers الخاصة بـ bootstrapApplication بدلًا من root module، وسترى ذلك لاحقًا.

اختبار سريع: سبب Standalone

ما الفائدة الأساسية من standalone components؟

مراجعة: سبب Standalone

تلغي standalone components التعليمات النمطية الخاصة بـ NgModule، إذ تتيح لكل مكوّن الإعلان عن تبعياته بنفسه. ويؤدي ذلك إلى شيفرة أوضح، وlazy loading أسهل، وtree-shaking أفضل. أصبح standalone الآن هو الإعداد الافتراضي. التالي: إنشاء واحد.

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

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

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

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

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

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

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

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

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

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

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

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

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