נסתכל על עמוד Alt Posts שבו יש לנו רשימה של פוסטים ולחיצה על כותרת הפוסט מציגה את פרטי הפוסט בצד ימין. ערך ראשוני לתצוגה כרגע, בזמן הכניסה לדף, אין לנו שום פוסט נבחר. לכן צד ימים של הדף ריק. נרצה להציג בכניסה לדף את הפוסט הראשון ברשימה. נסתכל על משיכת הפוסט הנבחר. קובץ alt-posts.component.ts את […]
נראה איך להוסיף ספינר טעינה שירוץ בזמן שהמידע שלנו נטען. על מנת לעשות את זה ניצור קומפוננטה ונקרא לה loading. אני משתמשת בקוד של bootstrap לספינר שלי, את הקוד אני אשים בקובץ ה-html של הקומפוננטה. יצירת ספינר קובץ loading.component.html כדי שהספינר יופיע מעל לכל מה שיש על המסך, הוספתי קצת CSS. קובץ loading.component.scss את הקומפוננטה […]
Highlight לפוסט הנבחר יש לנו הצגה של כל פוסט בנפרד כאשר לוחצים על כותרת הפוסט בקומפוננטת Alt Posts. השלב הבא הוא לסמן בצבע את הפוסט שעליו אנחנו עומדים. על מנת להשיג את זה נוסיף את ה-class של active לקישור שלנו. הבעיה כמובן היא שעכשיו כל השורות מודגשות. הפוסט שהמשתמש בחר נמצא במשתנה post$ בתוך DeclarativePostsService. […]
אם יש איזה בעיה בהבאת הנתונים, אנחנו צריכים להציג חיווי למשתמש. מכיוון שאנחנו לא משתמשים ב-subscribe אנחנו גם לא משתמשים בהודעות השגיאה שהפעולה נותנת לנו. איך תופסים את השגיאות? catchError Operator על מנת לתפוס את השגיאות נשתמש באופרטור catchError. אם תהיה שגיאה האופרטור יתפוס אותה. כרגע זאת הדרך שבה אנחנו מביאים את הפוסטים. קובץ declarative-posts.service.cs […]
אם יש לנו 2 קומפוננטות שאנחנו רוצים לתקשר ביניהן, אנחנו יכולים לשתף את ה-Action Stream בין שתיהן. Share the Action Stream נניח שיש לנו עמוד נוסף שמציג את הפוסטים בצורה אחרת, ניצור בשבילו קומפוננטה נפרדת. נוסיף גם route שיוביל לקומפוננטה וקישור בתפריט הראשי. קובץ app-routing.module.ts נעבור לקומפוננטה החדשה, נקרא ל-service של הפוסטים ונקבל את הפוסטים. […]
בשלב הבא אנחנו רוצים לראות איך אפשר לבצע filter על הטבלה. נניח שאנחנו רוצים לתת למשתמש לבחור פוסטים לפי קטגוריה. בתור התחלה נבחר את הקטגוריה עם id=1. שימוש ב-filter קובץ declarative-posts.component.ts ובתצוגה נקרא ל-filteredPosts. נקבל את הפוסטים ששייכים ל-id 1. השלב הבא הוא לתת למשתמש לבחור את הקטגוריה שהוא רוצה ולעדכן את הרשימה בהתאם. כדי […]
חלק 1: Imperative Programming | חלק 2: Change Detection Strategy & Unsubscribing בחלקים הקודמים השתמשנו ב-Imperative Programming כדי למשוך את רשימת הפוסטים ואת רשימת הקטגוריות. נראה את אותה פונקציונליות עם Declarative Programming. כדי להשאיר את מה שכבר יש לנו ניצור קומפוננטה חדשה עבור הפוסטים וכן service חדש. ניצור נתיב חדש עבור הפוסטים שלנו. אותם פוסטים […]
פוסט המשך לפוסט: Imperative Programming. נדבר על Change Detection Strategy. מה זה ולמה אנחנו צריכים להשתמש בזה? נוסיף להגדרת הקומפוננטה את changeDetection. ChangeDetectionStrategy.OnPush קובץ posts.component.ts אחרי שמירה נראה שהמסך שלנו לא מציג שום נתונים. אם נסתכל על טאב ה-network בדפדפן נראה שיש קריאה ל-API, אבל אין מידע. השימוש ב-OnPush גורם לזה שאין רינדור של המידע. […]
Imperative Programming Imperative Programming הוא תכנות מסורתי בו אנחנו אומרים לתוכנית מה לעשות צעד אחרי צעד. תביא מידע מה-DB, אחר כך תעשה איקס וכו' Declarative Reactive Programming הוא תכנות בו אנחנו אומרים מה אנחנו רוצים לעשות, לא מה הצעדים. Declarative Programming משפר את הביצועים של התוכנית. למשל, בדרך כלל כדי לקבל מידע מה-DB נעשה subscribe […]
Observable מקפיץ לנו מידע. יש Observable s שימשיכו להציף מידע ללא הפסקה, אנחנו צריכים להגיד להם במפורש להפסיק לעשות את זה. אחרת הם ימשיכו וזה יהיה על חשבון המקום בזיכרון שלנו. כדי לראות איך זה עובד נשתמש בפונקציית interval. היא יוצרת Observable שמטריג מספרים בצורה סדרתית. ה-Observable שנוצר על ידי הפונקציה הזאת ימשיך לשלוח את […]