היום הראשון

הקדמה – הכנת סביבת עבודה ופתיחת פרויקט חדש

מה נלמד בקורס? מהן דרישות הקדם?

הוראות התקנת האנגולר כולל: התקנת node.js, visual studio code, cli ופתיחת פרויקט חדש.

בעיות נפוצות בהתקנת האנגולר ומתן פתרונות

הקדמה על דפדפן

הרצת פרויקט חדש וקישור לדפדפן

הכרת הקבצים הבסיסיים במערכת

קובץ app.moudle.ts

קובץ main.ts

היום השני

יצירת קומפוננטה חדשה

יצירת קומפוננטה בסיסית

באג נפוץ

קישור css לקומפוננטה

אפשרויות נוספות של יצירת קומפוננטה

יצירת קומפוננטה ללא Prefix

יצירת קומפוננטה ללא קובץ spec.ts

הגדרות קונפיגורציה עבור יצירת קומפוננטה

תרגיל שלב ראשון

תרגיל שלב שני

היום השלישי

הקשר בין הקלאס של הקומפוננטה אל ה html (Data-Binding)

קישור ערכי string על ה Html באמצעות string binding

קישור ערכי משתנים ופונקציות ל Property של ה Html באמצעות property binding

הוספת אירועים ל Html באמצעות event binding

קישור שדה קלט למשתנה ע”י two ways binding

תרגיל שלב ראשון

תרגיל שלב שני

היום הרביעי

הוספה/הסרת אלמנטים בתנאי, מערך נתונים ב Html, עיצוב משתנה בהתאם ללוגיקה (directives)

הוספה/הסרת אלמנטים בתנאי בשימוש ngIf

הוספת style דינמי שמשתנה בהתאם למשתנה/לוגיקה באמצעות ngStyle

הוספה/הסרת class של css בהתאם למשתנה/לוגיקה ע”י ngClass

הצגת מערך נתונים ב Html ע”י לולאה עם ngFor

תרגיל שלב ראשון

תרגיל שלב שני

תרגיל שלב שלישי

היום החמישי

יצירת directive המאפשר איחוד של התנהגות (אירועים ופונקציונאליות) החוזרים על עצמם

יצירת directive בסיסי

קישור אירוע ל directive ע”י HostListener

קישור ערכי משתנה ל property של התגית שצורכת את ה directive באמצעות HostBinding

קבלת ערך חיצוני אל תוך ה directive

ערך התחלתי למשתנה המקושר אל HostBinding

תרגיל שלב ראשון

תרגיל שלב שני

תרגיל שלב שלישי

תבניות להצגת נתונים מבלי לשנות את הערך המקורי (Pipes)

דוגמאות שונות של Pipe ואופן ההצגה

יצירת Pipe מותאם אישית

תרגיל שלב ראשון

תרגיל שלב שני

היום השישי

העברת ארועים ונתונים מבן קומפוננט לאב קומפוננט (Output,EventEmitter) והעברת נתונים מאב לבן קומפוננט (Input)

הבנת הצורך ב @Output, EventEmitter

העברת מידע על אירוע מבן קומפוננט לאב קומפוננט @Output,EventEmitter

העברת נתונים עם האירוע מבן קומפוננט לאב קומפוננט ($event)

העברת ערכים מאב קומפוננט לבן קומפוננט @Input

דוגמא מורחבת להעברת ערכים מאב קומפוננט לבן קומפננט

אפשרות לשינוי שם משתנה של @Input

היום השביעי

גישה לתגיות Html מתוך ה type script (ViewChild, ViewChildren)

גישה לתגית html מתוך ה ts באמצעות local reference

גישה לתגית html מתוך ה ts כאשר התגית היא קומפוננטה ViewChild(className)

גישה ליותר מתגית אחת מתאימה ViewChildren

דוגמת מימוש גישה לאיבר אחד מתוך מערך ה ViewChildren

הבנת המשמעות של מצביע לאובייקט בשימוש ViewChildren

גישה לתגיות Html לפי directive

בניית קומפוננט גנרי, שיכיל בתוכו קומפוננטות מתחלפות (ng-content)

בניית קומפוננט גנרי בסיסי באמצעות

מיקום מדויק של התגיות המתחלפות באמצעות select

@ContentChild לעומת ViewChild

היום השמיני

בניית מסך עם שדות קלט (טופס) וקישור לבדיקות תקינות של האנגולר (Foms, FormGroup, FormControl)

בנית טופס בסיסי וקישור לבדיקות המתאימות והכרת FormGroup, FormControl, FormConrolName, Validators

בדיקת תקינות לאחר לחיצת כפתור תוך שימוש ב valid, invalid

הוספת עיצוב דינמי בהתאם לתקינות הקלט (מיד בהקשת נתונים).

איך למנוע עיצוב לפני כניסת משתמש לשדה באמצעות dirty, touched

תת טופס בתוך טופס – FormGroup מקונן

גישה ישירה לאובייקט של FormControl

איפוס שדות קלט ע”י פקודת reset

היום התשיעי

מעבר בין מסכים (Routes,RouterLinkActive, RouterLink, router-outlet)

הגדרת מערך מסוג Routes והוספת תגית שומר מקום ע”י router-outlet

מעבר בין מסכים ע”י לחיצה על טאבים עם routerLink

הוספת חיווי למשתמש באיזה טאב הוא נמצא (הוספת class css מתאים) שימוש ב RouterActiveLink

הגדרת ניתוב מקונן – ניתוב בתוך ניתוב (children)

ניתוב דרך קוד typescript, דרך המחלקה (router.navigate)

ניתוב מקונן דרך קוד typescript – שימוש ב ActivatedRoute, relativeTo

מעבר בין מסכים עם פרמטר ובשימוש routerLink

מעבר בין מסכים עם יותר מפרמטר אחד בשימוש עם routerLink

מעבר בין מסכים עם query params דרך קוד type script

מעבר בין מסכים עם query params דרך routerLink

היום העשירי

קריאות Http הכולל שליפה, עדכון ומחיקה של נתונים מתוך Api

מהם קריאות http? מהם ההצהרות שצריך לבצע לפני שימוש בקריאות http?

שליפת נתונים מתוך api והצגה בhtml באמצעות key, value

צעד ראשון בהרחבה לדוגמא מקיפה

גישה ל api מסוג Post כולל שליחת אובייקט

גישה ל api מסוג delete כולל שליחת נתון

גישה ל api מסוג put כולל שליחת אובייקט וגם query params

אובייקטים גלובליים (services)

הגדרת אובייקט גלובלי (service) בסיסי ואופן השימוש בו

שימוש ביותר מ service אחד באותה קומפוננטה ושימוש באותו ה service ביותר מקומפוננטה אחת

העמקה אל תוך ה sevices – דוגמא בסיסית

הצהרה בתוך מערך ה Providers על service ברמת קומפוננטה

העמקה נוספת אל תוך ה services וסגירת מעגל

תרגיל שלב ראשון

תרגיל שלב שני

הפרק הקודם

השיעור הבא

תרגיל שלב שני

אנגולר Basic+ יצירת קומפוננטה חדשה תרגיל שלב שני