סטודנטים/ות יקרים/ות!

הפוסט הנ"ל הינו סיכום קצר של השיעור בנקודות + מכיל את הקבצים שתורגלו בכיתה במהלך השיעור.
אם החומר לא מובן, אפשר לשלוח לי מייל או להתקשר : 050-555-6693 (אשתדל לענות, אם לא שלחו SMS ואחזור אליכם)

זכרו כי המפתח להצלחה הינו תרגול

שיעור 33 – ANGULAR ROUTING

שלום לכולם,

השיעור למדנו על הנושא של Routing באנגולר.

ראינו מספר אפשרויות לנווט באפליקציה, בינהם :

  1. הגדרת ראוטר וניווט בסיסי באפליקציה – באמצעות קישורים ייעודיים למעבר בין קומפוננטות, דרך ה HTML
  2. שימוש ב Router דרך ה class וביצוע ניווט דינאמי באפליקציה, דבר המאפשר לנו להתנות את הניווט של המשתמש ולשנות אותו בצורה דינאמית.
  3. שימוש בפרמטרים שמועברים דרך ה URL – כמאצעי להעברת נתונים בין קומפוננטות / הפנית משתמש עם נתונים מסויימים.

 

תרגיל כיתה:

אני רוצה שתבנו אפליקציה עם ניווט בצורה הבאה:

במסך הראשון המשתמש מ

 

בתרגיל מוצגים 3 מסכים שונים, אחד עם פרטי הזמנה, אחד עם פרטי משלוח , ודף אחד בסיום לקבלת ההזמנה.

בראוטר שתגדירו יהיו 3 נתיבים עבור 3 קומפוננטות בהתאם לתמונה.

אחרי שהמשתמש ממלא את הטופס הראשון הוא יכול לעבור לשני, ואז מהשני הוא יכול לעבור לשלישי.
הנתונים נשמרים ב SessionStorage או ב LocalStorage לבחירתכם.  ובסיום אתם שולפים אותם מה SessionStorage/LocalStorage .

במסך הראשון אני יוכל ללחוץ על הכפתור "הבא" רק אם מילאתי את כל השדות, אחרת הכפתור יהיה disable.

אם אני אנסה להכנס באופן ישיר לנתיב של המסך השני (על פי הראוטר) ולא נכנסתי למסך הראשון אני יועבר למסך הראשון. (תכתבו פונקציה שעובדת ב onInit ובודקת האם שמור למשתמש בסטורג' שם פרטי, טלפון ואימייל)

להגשה עד 20/3/20

קבצי השיעור להורדה

בהצלחה

סגירת תפריט