الزاوية 9 للمبتدئين - مكونات وسلاسل الاستيفاء

في تطوير الويب الحديث ، يفضل العديد من المطورين إنشاء واجهة مستخدم لموقع ويب بطريقة قائمة على المكونات. كما أنها مدعومة بجميع الأطر الحديثة. يعد فهم كيفية عمل المكونات وكيفية استخدامها خطوة كبيرة في تعلم Angular.

في هذا المنشور ، ستتعرف على مكونات Angular ، وكيفية إنشاء مكون واستخدامه في مشروع ، وما هو الاستيفاء الداخلي للسلسلة. سأغطي أيضًا ميزات مهمة أخرى لـ Angular في مقالاتي القادمة:

  • الجزء 1: كيفية تثبيت تطبيقك الأول باستخدام Angular CLI
  • الجزء 2: المكونات الزاويّة والاستيفاء المتسلسل (أنت هنا)
  • الجزء 3 : التوجيهات الزاوية والأنابيب
  • الجزء 4: ربط البيانات أحادي الاتجاه في الزاوية
  • الجزء 5: ربط البيانات الزاوي ثنائي الاتجاه بنموذج ngModel

إذا كنت تفضل ذلك ، يمكنك أيضًا مشاهدة إصدار الفيديو:

ما هو المكون؟

المكونات هي اللبنات الأساسية الأساسية لتطبيق Angular. يمكننا التفكير في مكونات مثل قطع LEGO. نقوم بإنشاء مكون مرة واحدة ولكن يمكننا استخدامها عدة مرات كما نحتاج في أجزاء مختلفة من المشروع.

يتكون المكون الزاوي من 3 أجزاء رئيسية:

  • نموذج HTML —عرض
  • ملف TypeScript - نموذج
  • ملف CSS - التصميم

لماذا نحتاج المكونات؟

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

سبب مهم آخر هو أن المكونات تقسم الكود إلى أجزاء أصغر قابلة لإعادة الاستخدام. وإلا ، فسيتعين علينا تضمين أسطر لا نهاية لها من التعليمات البرمجية في ملف HTML واحد ، مما يجعل الحفاظ على الشفرة أكثر صعوبة.

إنشاء مكوننا الزاوي الأول

لنقم الآن بإنشاء المكون الأول. الطريقة القصيرة لإنشاء مكون هي باستخدام Angular CLI:

ng g c component-name

ينشئ هذا الأمر مكونًا جديدًا بملفاته الخاصة (HTML و CSS و TypeScript) ويسجله تلقائيًا في App Module:

ملاحظة: في Angular ، نحتاج إلى تسجيل كل خدمة ومكون ووحدة ضرورية في ملف الوحدة النمطية.

الآن دعنا نلقي نظرة فاحصة على نموذج المكون (TypeScript Component File):

هذه في الواقع فئة TypeScript ولكن لتعريفها كمكون:

  • بادئ ذي بدء ، نحتاج إلى استيراد Component من مكتبة @ angular / core ، حتى نتمكن من استخدام مصمم المكون
  • و Component علامات الديكور الطبقة كمكون ويسمح لنا لإضافة البيانات الوصفية التالية
  • و محدد هو استدعاء لاحقا مكون كما علامة HTML:
  • TemplateUrl هو المسار حيث توجد طريقة عرض HTML للمكون.
  • S tyle URLs (يمكن أن تكون أكثر من 1) حيث توجد ملفات تصميم المكون.
  • أخيرًا ، نقوم بتصدير الفئة (المكون) حتى نتمكن من تسميتها داخل app.module أو أماكن أخرى في المشروع لاحقًا.

ما هو String Interpolation؟

أحد الأسئلة الأكثر شيوعًا التي يطرحها الناس حول Angular هو ما هو بناء الجملة المجعد. تعرض المكونات البيانات ، ولكن يمكن أن تتغير البيانات بمرور الوقت ، لذلك يجب أن تكون ديناميكية.

نستخدم الأقواس المتعرجة داخل الأقواس المتعرجة الأخرى لتقديم البيانات الديناميكية: {{ data }}ويسمى هذا التمثيل الاستيفاء المتسلسل. يمكنك مشاهدة المثال في نسخة الفيديو أعلاه.

يتم إحتوائه

تتمثل إحدى أكبر خطوات تعلم Angular في معرفة كيفية إنشاء المكونات واستخدامها بكفاءة. أتمنى أن تجد هذا المنشور مفيدا. في الجزء التالي ، سنلقي نظرة على التوجيهات الزاويّة مثل ng-if و ng-for و ng-class والمزيد. ترقب :)

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في متابعتي على Youtube !

شكرا لقرائتك!