تطوير تطبيقات الويب باستخدام Angular


الدرس: تغيير البيانات في الوقت الحقيقي باستخدام الأنابيب Pipes


الصفحة السابقة
تأخذ الأنابيب (/ pʌɪp /) البيانات كمدخلات وتحولها ثم تعرض البيانات المعدلة في DOM . هناك أنابيب مزودة بـ Angular ، ويمكنك أيضًا إنشاء أنابيبك الخاصة إذا كنت بحاجة إلى ذلك. أقترح أن تبدأ بالأنابيب المتوفرة مع Angular .

استخدام واعداد الأنابيب


الأنبوب الذي نستخدمه كثيرًا هو DatePipe ، والذي يحلل كائنات JS من نوع Date ويعرضها بطريقة أكثر قابلية للقراءة من ترميزها الأساسي. على سبيل المثال ، تخيل أنك تريد إضافة تاريخ آخر تحديث في تطبيقك للأجهزة الكهربائية. ابدأ بإنشاء هذا الكائن   AppComponent  وعرضه مباشرة في القالب:

export class AppComponent {
  isAuth = false;
  lastUpdate = new Date();
<h2>Mes appareils</h2>
<p>Mis à jour : { { lastUpdate }}</p>
تم إنشاء كائن التاريخ ، ولكن في شكله الحالي ، فإنه ليس مفيدًا للغاية. ميزة الأنبوب هي أن تكون قادرًا على تعديل عرض هذا الكائن دون تعديل طبيعته. دعنا نضيف DatePipe في القالب بفضل الحرف   |  :

<p>Mis à jour : { { lastUpdate | date }}</p>
يتم عرض التاريخ الآن باسم "أكتوبر 06 ، 2017" في DOM ؛ إنها بالفعل أكثر قابلية للقراءة ، ولكن يمكننا أن نفعل ما هو أفضل. يسمح لك Angular بتكوين DatePipe بتمرير وسيطة تنسيق ، على سبيل المثال:

<p>Mis à jour : { { lastUpdate | date: 'short' }}</p>
Angular web site

<p>Mis à jour : { { lastUpdate | date: 'yMMMMEEEEd' }}</p>
Angular web site
هناك العديد من الاحتمالات لتنسيق DatePipe : ستجد المزيد من المعلومات في وثائق Angular .

استخدم سلسلة من الأنابيب


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

<p>Mis à jour : { { lastUpdate | date: 'yMMMMEEEEd' | uppercase }}</p>
ترتيب الأنابيب مهم. إذا قمت بعكسها ، فلن يعمل UpperCasePipe ولن يعرض التطبيق الخاص بك أي شيء. فكر في الترتيب الذي يجب أن يتم فيه إجراء التغييرات وضع الأنابيب في هذا الترتيب.

غير متزامن


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

lastUpdate = new Promise((resolve, reject) => {
    const date = new Date();
    setTimeout(
      () => {
        resolve(date);
      }, 2000
    );
  });
إذا قمت بحفظ الملف ، سيظهر لك التطبيق خطأ:
Error: InvalidPipeArgument: '[object Promise]' for pipe 'DatePipe'.
في الواقع ، عند إنشاء DOM ،   lastUpdate   لا يزال Promise وليس له قيمة يمكن تعديلها بواسطة الأنابيب.
لا يقتصر هذا النوع من الأخطاء على استخدام الأنابيب. إذا حاولت عرض Promise بدون pipe ، فسوف تعرض "[object Promise]" .
لذا علينا إضافة AsyncPipe في بداية السلسلة لنطلب من Angular انتظار وصول البيانات قبل تنفيذ الأنابيب الأخرى:

<p>Mis à jour : { { lastUpdate | async | date: 'yMMMMEEEEd' | uppercase }}</p>
الآن ، عند إعادة تحميل صفحتك ، يكون الحقل "Mis à jour" فارغًا ، وبعد ذلك ، بعد ثانيتين ، يتم تلقي البيانات التي يتم إرجاعها بواسطة Promise وتعديلها بواسطة الأنابيب التالية وعرضها.
مبروك! عند هذه النقطة ، أنت تعرف:
  • كيفية إنشاء مكونات تطبيق Angular المكونات. أنت تعرف كيف تمرر البيانات إليهم ، وتتفاعل مع الأحداث التي تثيرها وحتى تقوم بكليهما في نفس الوقت!
  • استخدام التوجيهات لتنظيم تطبيقك وتعديل محتواه ديناميكيًا ؛
  • الاستفادة من الأنابيب لتعديل عرض البيانات دون تغيير طبيعتها.
باستخدام هذه العناصر ، لديك بالفعل ما يكفي لإنشاء تطبيقات أساسية ووظيفية ، لكن Angular غنية للغاية وتسمح لك بدمج الوظائف الأخرى بسهولة: هذا هو بالضبط موضوع الجزء التالي من هذه الدورة.