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


الدرس: تدرّب من خلال إنشاء تطبيق من نوع Blog


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

دورك الآن !


للتمرن ، قم بهذا التمرين خطوة بخطوة. بمجرد الانتهاء ، يمكنك مقارنة عملك مع المسارات التي أقترحها عليك.
ستقوم بإنشاء تطبيق بسيط من نوع مدونة. سيعرض هذا التطبيق مشاركات المدونة ، وسيكون لكل منشور زر " love it " أو " don't love it " . سيكون لكل منشور النموذج التالي: 

post: {  
title: string,  
content: string,  
loveIts: number,  
created_at: Date
} 
أنصحك باستخدام Bootstrap في هذا التمرين. إذا قمت بإنشاء list-group-item  في  list-group ، فلديك فئات list-group-item-success و list-group-item-danger  لتلوين العناصر.
من حيث الهيكل:
  • سيحتوي AppComponent الخاص بك على مجموعة المنشورات ، وسوف يمررها إلى مكون PostListComponent
  • سيعرض PostListComponent الخاص بك PostListItemComponent لكل منشور في الصفيف الذي استلمه
  • سيعرض كل PostListItemComponent عنوان ومحتوى وتاريخ إنشاء المنشور في النموذج
  • ستحتوي PostListItemComponent على أزرار تسمح لك بزيادة عدد loveIts وتقليله - لن يكون لهذا التغيير سوى تأثير على المكون ، ولا يلزم تصعيده إلى المكون الرئيسي
Angular web site
هنا مثال للتخطيط 
المكافأة : قم بإنشاء نوع منشور يسمى Post لجعل التعليمات البرمجية الخاصة بك أكثر قابلية للقراءة. يمكنك أيضًا دمج مُنشئ يقوم بتعيين التاريخ تلقائيًا!
بعض النصائح
  • فكر في أنواع مختلفة من البيانات - كيفية تمرير البيانات من مكون إلى آخر ، وكيفية عرض البيانات في القالب ، وكيفية التفاعل مع حدث من القالب.
  • فكر في التوجيهات الهيكلية مثل   *ngFor  ، ونسب أيضًا التوجيهات مثل  ngClass
  • فكر في pipes لتحويل البيانات ، خاصة بالنسبة للتاريخ

تحقق من عملك


لذا ، هل قمت بكل شيء ؟ اتبع الدليل للتحقق من عملك!
قم بإعداد هيكل مشروع Angular
احصل على مشروع Angular . قم بتشغيل terminal وانتقل إلى جذر المشروع. أدخل الأوامر    npm install   بعد ذلك   ng serve  .
  1. بدأ خادم التطوير عندما قمت بتشغيل   ng serve  بعد   npm install  .
  2. يقع PostListComponent في مجلد فرعي لمجلد التطبيق.
  3. يمكن العثور على PostListItemComponent إما في مجلد فرعي من مجلد التطبيق ، أو في مجلد فرعي من post-list .
  4. يتم تثبيت Bootstrap في nod_modules وتتم الإشارة إليه بشكل صحيح في .angular-cli .
تنفيذ قوالب Angular مع الاستيفاء والأنابيب
ستقوم بتقييم القدرة على تنفيذ قوالب Angular .
  1. يتم عرض عناوين ونصوص وتواريخ المنشورات مع استيفاء السلسلة  {{ }}
  2. *ngFor   يستخدم التوجيه   لعرض PostListItemComponent داخل PostListComponent
  3. يتم استخدام DatePipe بشكل صحيح لعرض تاريخ المشاركات
  4. يتم احترام الألوان المطلوبة (أخضر إذا كان عدد الإعجابات الإيجابية والأحمر إذا كان سلبيًا)
قم بتمرير البيانات بين المكونات Angular و databinding
ستقوم بتقييم إدارة البيانات الديناميكية في التطبيق.
  1. يتم تمرير مجموعة المنشورات من AppComponent إلى PostListComponent مع ربط الخاصية ( مع    @Input()  )
  2. يتلقى PostListItemComponent بياناته من PostListComponent مع ربط الخاصية
  3. تستخدم أزرار القالب ربط الأحداث لاستدعاء طريقتهم ، وتعديل العنصر المقابل في صفيف المنشورات