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

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

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

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

שיעור 1

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

קובץ app.moudle.ts

קובץ main.ts

שיעור 2

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

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

באג נפוץ

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

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

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

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

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

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

תרגיל שלב שני

שיעור 3

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

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

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

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

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

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

תרגיל שלב שני

שיעור 4

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

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

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

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

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

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

תרגיל שלב שני

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

שיעור 5

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

יצירת directive בסיסי

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

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

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

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

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

תרגיל שלב שני

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

שיעור 6

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

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

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

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

תרגיל שלב שני

שיעור 7

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

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

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

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

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

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

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

שיעור 8

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

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

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

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

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

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

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

שיעור 9

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

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

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

@ContentChild לעומת ViewChild

שיעור 10

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

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

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

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

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

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

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

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

שיעור 11

מעבר בין מסכים (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

שיעור 12

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

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

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

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

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

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

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

שיעור 13

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

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

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

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

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

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

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

תרגיל שלב שני

שיעור 14

יצירת מודולים והכרת סוגים שונים של מודולים

1. העמקה אל תוך app.moudle.ts

2. הבנת המודולים השונים של האנגולר

3. יצירת מודול חדש

4. הרחבת המודול החדש ואפשרויות השימוש בו

5. feature module מול root module

6. shared module – יצירת מודול משותף

7. service module – יצירת מודול ייעודי ל services

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

תרגיל 14 שלב שני

שיעור 15

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

1. router module – יצירת מודול ייעודי להגדרת מעבר בין מסכים

2. פיצול מערך ה routes ליותר ממודול אחד ושימוש ב forChild

3. העמקה אל תוך מרחב ההכרה של הקומפוננטות לפי מודול

4. שיפור ביצועים – קיצור זמן טעינה ראשונה של המערכת באמצעות lazy loading

5. טעינת מודולים מאחורי הקלעים ע”י Preloading

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

תרגיל שלב שני

שיעור 16

הגדרת service ברמת מודול

1. הוספת service ברמת המודול

2. שימוש ב service בתנאי צריכת המודול ע”י provideIn:Moudle

3. מודול lazy loading שצורך service מול מודול שאינו lazy loading

4. הגדרת Provider גם במודול הראשי וגם במודול lazy loading

5. קבלת מופע נפרד עבור כל מודול שהוא lazy loading באמצעות provideIn:any

6. הבעיה הקיימת בצריכת provider בתוך shared module ומניעת באגים

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

תרגיל 16 שלב שני

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

שיעור 17

יצירת קומפוננטות באופן דינמי בקוד ts – Dynamic Components

1. הקדמה ליצירת dynamic component

2. יתרונות תגית ng-template של האנגולר לשימוש עבור שומר מקום

3. שלב ראשון של dynamic component ע”י הגדרת viewContainer

4. createComponent, componentFactoryResolver

5. גישה לערכים ואירועים של ה dynamic component

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

תרגיל שלב שני

שיעור 18

מחזור החיים של הקומפוננטה

1. ngOnchanges – מתי מופעלת? מה מכיל האוביקט simpleChanges?

2. ngOnInit – הסבר, הדגמה והבנה לצורך של פונקציה זו

3. ngAfterViewInit – גישה לאוביקט viewChild מיד בעליית הקומפוננטה

4. ngAfterContentInit – גישה לאוביקט contentChild מיד בעליית הקומפוננטה

שיעור 19

הגדרות קונפיגורציה וקבצים שונים

1. התיקייה בה מאחסנים תמונות וקבצים שונים – תיקיית assets

2. שמירת נתונים שונים עבור מצב פיתוח ועבור מצב prod ע”י משתני environments

3. הגדרת הדפדפנים בהם המערכת תומכת – קובץ browserslistrc

4. מה מכיל הקובץ pollyfills?

5. הגדרות שונות ל editor בקובץ editorconfig

6. קונפיגורציות שונות בקובץ angular.json

1 מ 2

הפרק הקודם

הפרק הבא

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

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