יצירת פרוייקט חדש ניצור פרוייקט חדש. נתקין את bootstrap כדי שיהיה קל יותר לעצב את הדפים. יצירת מודול לפוסטים וקומפוננטות מתאימות יצירת routes src/app/post/post-routing.module.ts יצירת מודל הפוסט כדי לקבל את המידע בצורה של פוסטים ניצור interface שיחזיק את המידע הזה. src/app/post/post.ts יצירת ה-service src/app/post/post.service.ts הוספת הלוגיקה והטמפלט של הקומפוננטה בקובץ הראשי נקבל את כל רשימת […]

כדי לעדכן מידע ב-DB אנחנו משתמשים בפונקציית put. נוסיף לטבלת הפוסטים שלנו כפתור ששולח לפעולת העדכון. פעולת עדכון תתבצע בדרך כלל מתוך טופס, הטופס שמשמש להכנסת תוכן חדש יכול לשמש גם לעדכון הפוסט. כל מה שצריך לעשות זה רק להוסיף לתוכן השדות את מה שכבר קיים באובייקט. השלבים יהיו: app.component.html בקומפוננטת העריכה נקרא לפונקציה שמגיבה […]

ביטול item אחד פונקציית delete תבטל מידע מתוך ה-DB. נוסיף בכל שורת מידע שיש לנו כפתור כדי לבטל את הפוסט. הכפתור הזה יוביל לפונקציית הביטול שמוגדרת בקומפוננטה. app.component.html נגדיר את פונקציית ה-delete ב-service. posts.service.ts בקובץ הקומפוננטה נקרא לפונקציית הביטול של ה-service מתוך פונקציית הלחיצה על הביטול בטבלה. app.component.ts ביטול כל ה-items אם אנחנו רוצים לבטל […]

קבלת כל ה-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. […]

משיכת מידע מ-API באנגולר מתבצע ע"י HttpClientModule. לפני שמתחילים לעבוד צריך להוסיף את HttpClientModule למודול הראשי ולרשימת הייבוא. ב-service עצמו שבו אנחנו מושכים את המידע נייבא את HttpClient ונכניס אותו כ-dependency ל-constructor. אפשר להשתמש בפונקציות שמושכות את המידע מה-API התוך ה-class של הקומפוננטה עצמה, אבל מקובל לבנות קובץ service שמטפל בכל העבודה מול ה-DB וכך […]