קבלת כל ה-items פונקציית get מביאה מידע מתוך ה-DB. נגדיר את מבנה הפוסטים שלנו: post.model.ts נקרא לפונקציית ה-get שמביאה את כל הפוסטים הקיימים דרך ה-service. הפונקציה מחזירה לנו מערך של אובייקטים מסוג Post. posts.service.ts בקומפוננטה, כדי לטעון את המידע כשהדף נטען, נקרא לפונקציית ה-get מתוך ngOnInit. app.component.ts אחרי שיש לנו את המידע אפשר להציג אותו […]
ב-Post Request נשתמש בדרך כלל כשאנחנו רוצים להוסיף מידע לתוך ה-DB. כדי להוסיף ערכים ב-DB אנחנו בדרך כלל משתמשים בטפסים. בדוגמא נשתמש ב-template forms ובהכנסה של פוסטים לרשימה. לכל שדה נשים name ואת ngModel. app.component.html נגדיר את מבנה הפוסטים שלנו: post.model.ts נשתמש בקובץ service על מנת לשלוח את הקריאה ל-API. פונקציית ה-callback מחזירה את הערך […]
התקנה כדי לתרגל עבודה עם DB אפשר להתקין JSON Server מקומית באנגולר. פעולת ההתקנה של הספרייה: כדי להתחיל לעבוד צריך ליצור קובץ json.db ולשים בו מידע התחלתי. השלב הבא הוא להתחיל את הסרבר שמגיש את המידע. כדאי לפתוח טרמינל חדש ולהפעיל בו את הסרבר. את הסרבר צריך לפתוח מתוך התיקייה שבה יש את קובץ ה-json. […]
Observable מקפיץ לנו מידע. יש Observable s שימשיכו להציף מידע ללא הפסקה, אנחנו צריכים להגיד להם במפורש להפסיק לעשות את זה. אחרת הם ימשיכו וזה יהיה על חשבון המקום בזיכרון שלנו. כדי לראות איך זה עובד נשתמש בפונקציית interval. היא יוצרת Observable שמטריג מספרים בצורה סדרתית. ה-Observable שנוצר על ידי הפונקציה הזאת ימשיך לשלוח את […]
Subject הוא סוג של Observable שמאפשר תקשורת בין קומפוננטות. נניח שיש לנו שתי קומפוננטות בעמוד. שתי הקומפוננטות לא מקושרות, אין ביניהם יחסים של אב ובן. אנחנו רוצים שכשהמשתמש יכניס ערך בקומפוננטה אחת, המידע יעבור לקומפוננטה השנייה. אפשר להשתמש ב-services ואפשר להשתמש בטריגר של אירועים. בניית הקומפוננטות להעברת המידע קובץ comp1.html קובץ comp2.html אנחנו רוצים להכניס […]
משיכת מידע מ-API באנגולר מתבצע ע"י HttpClientModule. לפני שמתחילים לעבוד צריך להוסיף את HttpClientModule למודול הראשי ולרשימת הייבוא. ב-service עצמו שבו אנחנו מושכים את המידע נייבא את HttpClient ונכניס אותו כ-dependency ל-constructor. אפשר להשתמש בפונקציות שמושכות את המידע מה-API התוך ה-class של הקומפוננטה עצמה, אבל מקובל לבנות קובץ service שמטפל בכל העבודה מול ה-DB וכך […]
@HostListner @HostListner decorator מקשיב לאירועים מה-DOM של האלמנט ומגיב לאירוע על ידי ביצוע של event handler. בדוגמא נראה איך גורמים ל-div לשנות את המרווחים שלו עם טרנזקציה כשמבוצעת פעולת hover. הפונקציה נעבוד על האלמנט "המארח", כלומר זה שקרא ל-directive. כשהאירוע mouseenter יקרה באלמנט המארח, הפונקציה onmouseover תתבצע. בתוך אותו ה-directive אנחנו יכולים להאזין לאירועים נוספים, […]
יצירת directive מותאם מייצרת directive שמשנה את הניראות של האלמנט בו הוא נמצא. כדי ליצור directive נריץ ב-CLI את הפקודה: בקובץ ה-directive שנוצר לנו נקבל את האלמנט שממנו הופעל ה-directive ונפעיל עליו את הפעולה. setbackground.directive.ts נשתמש ב-directive שבנינו component.html דוגמא ל-Directive מותאם נראה דוגמא של directive שמשנה את גודל הפונט באלמנט בו הוא מופעל. hightlight.directive.ts […]
נגדיר טופס שבתוכו יהיו הפקדים שבהמשך. בטופס יש שימוש ב-form builder. ליד כל שם פקד יש את סוג הפקד שנשתמש בו בטופס. zimun-torim.component.ts המבנה הבסיסי של דף הטופס הוא כזה: zimun-torim.component.html תיבת טקסט – Input הפקד הכי פשוט הוא תיבת טקסט. נוסיף את הפקד של שם החולה – patientName לטופס. zimun-torim.component.html כפתורי רדיו – Radio […]
כתבנו class פשוט בצורה הזאת: Product.cs זאת לא הצורה המיטבית לכתוב את ה-class. יכול להיות שאני לא ארצה לחשוף ל-client את כל השדות של ה-class. את חלק מהשדות אני ארצה להציג ב-client אחרי מניפולציה, ולא כדאי להעמיס את ה-class עם כל השדות האלה. אנחנו נבצע מיפוי בין האובייקטים שישבו בתוך המערכת לבין אלה שהולכים ל-client, […]