كيفية بناء مكونات الزاوي الخاص بك واستخدامها في كل مكان

يُعد Angular ثانيًا إطار عمل يستند إلى Javascript أساسًا (الأول إذا عدنا AngularJs و Angular 2+) ، Angular هو إطار Google المدعوم ، تم نشره في عام 2016 بعد إعادة كتابة كاملة بالكامل لإصداره السابق AngularJs المنشور على 2010. كانت إحدى الميزات الرئيسية لـ Angular هي القدرة على التطوير لأنظمة تشغيل متعددة: الويب والجوال وسطح المكتب الأصلي. فما الذي يجعل الزاوي جذابة.

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

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

دعنا نخلق أول عنصر الزاوي لدينا.

لإنشاء مشروعنا ، نحتاج إلى تثبيت AngularCLI (npm install -g @ angular / cli) ثم نقوم بإنشاء مشروعنا الجديد باستخدام:

نانوغرام جديد <اسم التطبيق>

سيحتوي المشروع الذي تم إنشاؤه على:

  • المشروع الزاوي الافتراضي.
  • يتم تثبيت كافة التبعيات في مجلد وحدة العقدة
  • اختبار الملفات لكل مكون.

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

الآن بعد أن أصبح لدينا عنصر Angular يعمل ، يمكننا أن نبنيه كمكون ويب باستخدام Angular element ؛ إنها ميزة تسمح بتعبئة مكونات Angular كعناصر مخصصة مقدمة مع إصدار Angular 6.

لتتمكن من القيام بذلك ، تحتاج إلى تثبيت بعض التبعيات أولاً.

تثبيت npm - حفظ @ الزاوي / العناصر
تثبيت npm - حفظ @ webcomponents / webcomponentsjs
تثبيت npm - حفظ المستند المستند - عنصر

داخل ملف angular.json ، تحتاج إلى استيراد ملف document-register-element.js.

والخطوة التالية هي تعديل الطريقة لدينا bootstraps AppModule. لهذا نحن بحاجة إلى إعادة تسمية صفيف bootstrap إلى entryComponents لمنع AppComponent من bootstrapping مع الوحدة النمطية.

بجانب إنشاء عنصر مخصص لاستيراد الحاقن من @ الزاوي / الأساسية و createCustomElement من @ الزاوي / عناصر ؛ هذه الدالة تقوم بإرجاع فئة NgElementConstructor التي نربطها بعلامة HTML محددة.

أخيرًا ، نحتاج إلى إضافة ngDoBootstrap لتجاوز وظيفة bootstrap.

الحاقن هو مرجع لسياق الوحدة. يتيح ذلك لجميع العناصر التي تم إنشاؤها في نفس التطبيق مشاركة نفس السياق وتكوين تطبيق Angular واحد. يمكنهم التواصل مع بعضهم البعض ، ومشاركة جهاز التوجيه ، باستخدام نفس متجر NgRx ...

يمكنك العثور على المثال الكامل في مستودع جيثب الخاص بي

استخدم عنصر الزاوي المخصص داخل مكون VueJs:

لاستخدام العنصر المخصص الزاوي داخل مكون VueJs ، يتعين عليك استيراد ملفات js المضمنة وملف styles.css داخل ملف index.html في المجلد العمومي.

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

استخدم عنصر الزاوي المخصص داخل البوليمر:

لاستخدام عنصر Angular Custom داخل مكون Polymer ، تحتاج إلى استيراد ملفات Javascript المضمنة ؛ الرئيسي ، وقت التشغيل ، polyfills ووقت التشغيل ووضع العلامة داخل قالب HTML للمكون.

كما ترون في هذا المثال ، فإننا نستخدم طريقة الربط 2 للتفاعل مع المكون الزاوي. يجب أن تلاحظ أنه ، كما هو موضح في وثائق البوليمر ؛ للربط ثنائي الاتجاه بالعناصر الأصلية أو العناصر غير البوليمرية التي لا تتبع اصطلاح تسمية الحدث ، يمكنك تحديد اسم حدث تغيير مخصص في التعليق التوضيحي باستخدام بناء الجملة التالي:

هدف دعامة = "{{hostProp :: الهدف تغيير الحدث}}"

استخدم العنصر المخصص الزاوي المدمج داخل مكون الرد

لاستخدام عنصر Angular Custom ، يتعين عليك استيراد ملفات Javascript المضمنة ، ثم يمكنك استخدامها كمكون طبيعي داخل المكون الخاص بك.

كما ترى ، نتواصل باستخدام الأحداث المخصصة للتواصل بين المضيف والمكون الفرعي.

استخدم عنصر الزاوي مخصص مع جافاسكريبت عادي

لاستخدام عنصر Angular Custom المدمج الخاص بك ، تحتاج فقط إلى استيراده إلى ملف html مثل أي كود javascript آخر ، واستيراد ملفات polyfills ووقت التشغيل والبرامج النصية.

يمكننا تغيير قيمة السمات باستخدام Javascript مثل أي عنصر Html ويمكننا الاستماع إلى الأحداث وتغيير أجزاء أخرى من DOM.

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

إذا كان لديك أي ملاحظات أو تريد إضافة شيء إلى هذه المقالة ، فلا تتردد في إضافة تعليق هنا.

يمكنك أيضا متابعة لي على تويتر.