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


الدرس: النشاط: تطبيق إضافة المشاركات إلى مدونتك


الصفحة السابقة

دورك الآن !


للتمرن ، قم بهذا التمرين خطوة بخطوة. بمجرد الانتهاء ، يمكنك مقارنة عملك مع المسارات التي أقترحها عليك.
في هذا النشاط ، ستقوم بتعديل تطبيق المدونة الذي قمت بإنشائه أثناء النشاط الأول.
تعليمات
  • إنشاء خدمة (service)   التي سيتم تخزين مجموعة من  المشاركات  وقد ترسل على شكل   Subject  - هذه الخدمة  توفر  أيضا إضافة منشور جديد  وحذف  آخر  ،
  • دمج زر  Supprimer postفي كل   PostListItemComponent ،
  • إنشاء عنصر جديد ( component)،   NewPostComponent  والذي سوف يشمل نموذج (طريقة  قالب  أو  تفاعلي ، حسب اختيارك) الذي يسمح للمستخدم بإدخال عنوان ومحتوى جديد - وهذا المنشور الجديدسيقع انشاءه و اضافته الى الخدمة   ، وسيتم إعادة توجيه المستخدم إلى قائمة المنشورات ،
  • دمج قائمة التنقل في الجزء العلوي (مع التوجيه المقابل) ، مما يسمح لك بالانتقال إلى قائمة  المنشورات  (   /posts  ) وإلى  النموذج  (   /new  ) (سيتم إعادة توجيه المسار الفارغ إلى المسار   /posts  ) - رابط  القائمة  المطابق للمسار النشط سيشمل الفصل   active ،
  • تأكد من تسجيل التغيير في عدد  loveIts  في  الخدمة.
فيما يلي مثال للتخطيط:
Angular web site
مثال على التخطيط
بعض النصائح
  • تذكر أنه يجب دمج  الخدمة  في التطبيق بطريقة global .
  • للاشتراك وإصدار  الموضوع ، فكر في ترتيب العمليات.
  • تذكر أنه يمكنك تمرير فهرس مثيل مكون   *ngFor  واستخدامه في المكون.
  • فكر في كيفية عمل  التوجيه  : كيف يتم دمجه في التطبيق وفي القالب.
  • النظر في إصدار  موضوع  من  الخدمة  بعد كل تغيير.
  • تذكر   unsubscribe()  !
  • إذا قررت فرز قائمتك ، فلا تنس أن ذلك سيكون له تأثير على الفهرس الذي يستقبله كل  مكون  : وفقًا لمنطقك ، قد يكون من الضروري تعديل الطريقة التي تسمح بحذف منشور  .
المكافأة: للتطبيق الديناميكي حقًا ، قم بدمج  واجهة Firebase الخلفية  التي تجعل قائمة المنشورات الخاصة بك دائمة!
المخرجات
يجب إيداع الكود الكامل والوظيفية في مستودع Git عبر الإنترنت الذي يجب أن يتمكن المصادقون من استنساخه. ستوفر رابط المستودع. يجب أن يعمل المشروع بمجرد استنساخ المشروع وإدخال أمر تثبيت npm في الجذر.

تحقق من عملك


لذا ، هل أكملت كل المراحل؟ اتبع الدليل للتحقق من عملك!
إنشاء خدمة Angular
ستقوم بتقييم إنشاء الخدمات لمركزة البيانات والمنطق.
تحقق من المهارة إذا تم تنفيذ جميع المعايير التالية بشكل صحيح:
  1. مجموعة المنشورات في الخدمة التي تم إنشاؤها
  2. المنطق لإضافة وإزالة منشور موجود في الخدمة
  3. تم دمج الخدمة بشكل صحيح في AppModule
  4. الأزرار Love It و Don't Love It تستدعي طرق الخدمة لتعديل عدد loveIts للنشر المقابل في المصفوفة
تنفيذ نموذج مع Angular
ستقوم بتقييم تنفيذ النموذج. يمكن استخدام القالب أو الطريقة التفاعلية.
إذا  تم استخدام طريقة  القالب ، تحقق من المهارة إذا  
  1. النموذج يعمل جيدا 
  2. المبادئ التوجيهية   ngForm  و   ngModel  استخدامها بشكل صحيح
  3. يتم استرداد البيانات بشكل صحيح من حقول النموذج
  4. يتم إرسال البيانات إلى الخدمة (يتم حقن الخدمة بشكل صحيح في مكون النموذج)
إذا تم استخدام الطريقة التفاعلية ، تحقق من صحة المهارة إذا
  1. النموذج يعمل جيدا 
  2. سمات لل   formGroup  و   formControlName  استخدامها بشكل صحيح
  3. و   FormGroup  يتم تعيينه بشكل صحيح في كود TypeScript (مع أو بدون FormBuilder ) وتعلق على قالب النموذج
  4. يتم استرداد البيانات بشكل صحيح من حقول النموذج
  5. يتم إرسال البيانات إلى الخدمة (يتم حقن الخدمة بشكل صحيح في مكون النموذج)
إدارة التوجيه باستخدام Angular
ستقوم بتقييم تنفيذ  التوجيه  للخدمة المنفذة.
تحقق من المهارة إذا تم تنفيذ جميع المعايير التالية بشكل صحيح:
  1.   الطرق   ذكرت بشكل صحيح في   AppModule
  2. قائمة التنقل تدمج بشكل صحيح في   routerLink
  3. يتم عرض  المكونات  المقابلة للمسارات في   router-outlet
تنفيذ Observables Angular
ستقوم بتقييم نشر البيانات واستخدامها عبر observable  .
تحقق من المهارة إذا تم تنفيذ جميع المعايير التالية بشكل صحيح:
  1. 1. الموضوع(Subject)   يتم إنشاءه في الخدمة(service) و wrap هو نوع من البيانات
  2. 2. تتم إدارة انبعاث  الموضوع  بطريقة تسمى 1) بعد كل تعديل للبيانات و 2) في وقت الاشتراك بواسطة المكون
  3. 3. يستخدم مكون طريقة   subscribe()  للاشتراك في الموضوع في ngOnInit()  ، و   unsubscribe()  في ngOnDestroy()