אבני הבניין הבסיסיות של אנגולר הם קומפוננטות. בקומפוננטות יש לנו העברת מידע בין ה-class לבין התצוגה על ידי binding של המידע. יש עוד רכיב שבונה את אפליקציית האנגולר וזה directive. Directive הוא פשוט הוראה ל-DOM. אנחנו משתמשים ב-directive כדי להגיד ל-DOM איזה רכיב להוסיף למבנה ה-HTML שלנו ואיזה לא. ה-directive גם נותנים הוראות לגבי הדרך […]
כשאנחנו מבצעים מעבר בין קומפוננטות יש סדרה של אירועים שמתרחשים. כדי לעקוב אחריהם נאפשר את tracing. app-routing-module.ts עכשיו נוכל לראות ב-log את האירועים. אנחנו יכולים להרשם לאירועים ולבצע פעולות כשהם עולים. למשל להראות אייקון של טעינה כשהעמוד נטען ולהסיר אותו כשהעמוד עלה. app.component.html צריך לשים את הגרפיקה של הספינר כמובן ב-css. app.component.ts
כשאנחנו מקבלים מידע חיצוני, הפעולה יכולה לקחת זמן ובינתיים נטען עמוד ריק. אנחנו רוצים שהעמוד לא יטען עד שלא יהיה בו כל המידע הנדרש. יצירת ה-resolver: פונקצית ה-resolve מחזירה מידע. אנחנו רוצים את המידע הזה לפני שהעמוד נטען. נקח את ה-service שאיתו אנחנו שולפים את המידע ונקבל את המידע בתוך ה-resolve. user.service.ts users.resolver את ה-resolver […]
ה-guard CanDeactivate משמש לשליטה של מי שיכול לצאת מעמוד. נניח שיש לנו מישהו שממלא טופס ורוצה לצאת באמצע בלי שהוא שמר את הנתונים. עם CanDeactivate אנחנו יכולים לתת לו הודעה לפני שהוא יוצא מהעמוד. יצירת ה-guard: contact-form.gourd.ts אנחנו רוצים להשתמש בפונקציה deactivate על קומפוננטת contact ולכן נכניס אותה לערגים שהפונקציה מקבלת. contact-form.gourd.ts נכניס את ה-guard […]
המשמעות של CanActivate היא הרשות לגלוש לעמוד. CanActivate מדבר על הרשאות. נניח שיש לנו עמוד שאנחנו רוצים שרק ה-admin יגיע אליו, לפני שמאשרים את המעבר לעמוד אנחנו צריכים לאשר שהמשתמש הוא בעל הרשאה מתאימה להכנס לשם. יצירת ה-guard: שלבים בעבודה עם guard: CanActivate הפונקציה מחליטה אם נתיב יכול להיות מופעל על סמך תנאי מסויים. קודם […]
בכל פעם שיש לנו תפריט אנחנו יכולים לשים מתחתיו את ה-router-outlet שמתאים לו כדי להציג את התוכן של הקומפוננטות. לפעמים אנחנו רוצים מקומות שונים כדי להציג קומפוננטות בקפליקציה. אנחנו יכולים לתת שם לrouter-outlet ולכוון את הכתובות שיגיעו ל-outlet שאנחנו רוצים. ה-router-outlet בלי שם יהיה העיקרי והשאר יהיו משניים. נניח שיש לנו עמוד אודות. אנחנו רוצים […]
נתיבי Child או nested routes הם נתיבים שנמצאים בתוך נתיבים אחרים. כתובת הבסיס שלהם תהיה הכתובת של נתיב הבסיס ואחריו יבוא החלק של הקישור שמתוא להם. נניח שיש לי רשימה של משתמשים, אני נכנסת לתוך פרופיל של משתמש ספציפי. עכשיו למשתמש הזה יש לי קומפוננטה של פרטים אישיים וקומפוננטה של פרטי החברה שבה הוא עובד. […]
כשיש לנו רשימה של מוצרים/משתמשים וכו' ואנחנו רוצים להכנס לתוך ערך אחד, אנחנו צריכים פרמטר שיגיד לנו באיזה מוצר אנחנו נמצאים. הכתובת נבנית באופן אוטומטי ונראית משהו כמו: url/courses/course/103 במודול שבו נמצאים ה-routes אנחנו מוסיפים את הנתיב למוצר שלנו. app.module.ts כדי לקבל את ה-id אנחנו יכולים להשתמש ב-activated route. course.component.ts עכשיו אפשר לפנות ל-service ולמצוא […]
ה-routing מאפשר לנו ניווט באפליקציה. באופן בסיסי יש 3 שלבים ליצירת routing. app.module.ts אחרי שייצרנו את ה-routes צריך לשים אותם בקובץ ה-html. במבנה של העמוד הזה יש לנו את החלק העליון שהוא ניווט לעמודים המתאימים ואז את router-outlet שמכיל את התוכן של הקומפוננטה שאליה אנחנו מנווטים. app.component.html כדי לסמן את הכתובת של הקישור משתמשים ב-routerLink במקום ב-href. כדי […]
נניח שיש לנו טופס שבו מכניסים פרטים אישיים ואנחנו רוצים שהמשתמש יכניס את שמות הילדים שלו. בהתחלה יופיע שדה אחד, והמשתמש יוכל להוסיף שדות כמספר שהוא צריך על ידי לחיצה על כפתור. user.component.ts אפשר גם ליצור קבוצה ולא רק פקד אחד. user.component.ts הוספת ילד חדש: user.component.ts הורדת שדה של ילד: user.component.ts נסדר את הטופס בטמפלט. […]