כל הפוסטים באנגולר
אנגולר (angular 2 pluse) הוא מסגרת עבודה מבוססת typescript שהתוצר שלה אתר ללא טעינה במעבר בין דפים ורכיבים (SPA).
מאוד נוחה לעבודה בעלת יכולות מתקדמות מאוד, אבל דורשת הסתגלות ולמידה לא קטנה כדי לעבוד בה בצורה יעילה.
העברה של מידע נסתר בניווט אנגולר
נראה איך להעביר מידע בזמן ניווט בין רכיבים אבל המידע יהיה נסתר ולא ניתן לראות אותו ב-URL או ב-DOM. עם
מדריך angular standalone component חלק 2
אחרי שראינו lazy loading component בעזרת הראוט, ניצור עוד דף ועוד רכיבים, נחבר אותם העזרת שירות ונעבור על עוד מספר
מדריך angular standalone component חלק 1
תשכחו כל מה שידעתם על אנגולר! טוב לא באמת, אבל ברגע שעוברים לעבודה עם פרויקט מבוסס רכיבים אוטונומים בלבד, יש
מדריך אנימציות באנגולר – angular animation
כמפתח פרונט אנד שיודע לכתוב אנימציות בCSS וגם בJS, ורוצה לגשת לכתוב אנימציות באנגולר, יופתע וגם לא מעט, כי אנגולר
קורס front end – שלבים הראשונים בלכתוב קוד כמו שצריך
כותרת לא אמינה לפוסט הזה אבל זה מה שמצאתי לנכון אז סליחה מראש, בכל מקרה, לכתוב קוד כמו שצריך זה
איך לשנות ערכת נושא (Theme) – dark/light mode
נכיר מה זה css variables, נקים שירות באנגולר ו-2 ערכות נושא, אחת בהירה והשניה כהה. בשירות נקים פונקציה שתעבור ל-theme
Angular Microfrontend Module Federation Tutorial – Part 6
מי שהתקין את הגירסה החדשה של module federation , יש מספר הבדלים מהגירסה שהראתי כאן. לא משמעותי, אבל נעבור עליהם
Angular Microfrontend Module Federation Tutorial – Part 5
נראה איך לשלוח מידע בין מיקרו פרונטאנדים שונים ע"י אירוע מיוחד שמסוגל להעביר מידע ע"פ אוביקט שאנחנו ניתן לו. נעביר
Angular Microfrontend Module Federation Tutorial – Part 4
בחלק הזה נראה איך לשפר את הדיירקטיב שלנו, שידע להתמודד עם רכיב ועם מודול שלם, בנוסף, ידע למשוך גם תלויות
Angular Microfrontend Module Federation Tutorial – Part 3
ניצור directive שידע להתמודד עם משיכה של רכיב ממיקרו פרונטאנד אחר, יעבד אותו ויחזיר את הרכיב בתצורה מתאימה לאנגולר ול-html.
יסודות האנגולר- angular lifecycle and change detection
הכל מתחיל בפקודת ng s . הקסם מתרחש , המנוע של אנגולר מתחיל לעבוד ופתאום יש לנו אפליקציה עם שלום
Angular Microfrontend Module Federation Tutorial – Part 2
נראה איך ליצור מודול במיקרו אתר ולמשוך אותו מהאתר הראשי על ידי lazy loading modules routing, נעבור בקצרה על נקודות
Angular Microfrontend Module Federation Tutorial – Part 1
נפתח 3 פרויקטים, אחד מעטפת ועוד 2 שימשכו לתוך המעטפת במספר צורות שונות, החלק הזה נראה איך להתקין ומה המשמעות
Chat – angular, nodejs and socket.io
נבנה צ'ט בעזרת socket.io ונראה איך לממש אותו בצד השרת nodejs ובצד הלקוח angular. נעבור על השורות החשובות ונראה את
Angular nested routes
צורת כתיבה של ניתובים בתוך ניתובים, מעבר מהיר על תצורת כתיבה של ניתוב רגיל וניתוב שנמצא בתוך ניתוב אחר ונראות
מדריך הטמעה של SVG כחלק מקוד פרויקט באנגולר
נראה איך אפשר להטמיע SVG כחלק מהפרויקט, ליצא אותם ולמשוך אותם ברכיבים של אנגולר. בנוסף נראה איך עוברים את המערכת
convert array of objects to formArray in angular reactive form
קרה לכם שרציתם להעביר מערך של מידע שהגיע מהשרת למערך של רכיבים בתוך טופס כדי שהמשתמש יוכל לשנות אותם ולשלוח
רכיבים: בניה של רכיב אקורדיון ברקורסיה נגיש באנגולר
נראה איך רכיב אקורדיון יכול להכיל את עצמו אין סוף פעמים על פי המידע שהוא מקבל, בהתאמה נבנה interface שגם
רכיבים: בניה של רכיב לוח שנה נגיש באנגולר
יצירה של רכיב לוח שנה נגיש באנגולר אשר יכול גם לקבל ארועים על פני מספר ימים בחודש. נעבור על הבניה
רכיבים: בניה של רכיב MULTI-SELECT נגיש באנגולר
נראה איך לבנות רכיב MULTI SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף
רכיבים: בניה של רכיב AUTOCOMPLETE נגיש באנגולר
נראה איך לבנות רכיב AUTOCOMPLETE, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף נראה
רכיבים: בניה של רכיב SELECT נגיש באנגולר
נראה איך לבנות רכיב SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש ומה התפקיד שלהן.
אנגולר reactive forms | איך לבדוק שדות עם ולידציה בלחיצה על submit
אז בהמשך למדריך על reactive forms באנגולר . אביא פה עוד תוספת קטנה , שימושית אם לומר את האמת, אבל
אינטרספטור באנגולר (interceptor)
נראה מה תפקידו של אינטרספטור, איך מפעילים אותו וניתן 2 דוגמאות לאינטרספטורים שונים כדי להמחיש את השימוש בהם, אחד עבור
הגדרות אבטחה על ראוטינג של אנגולר (Guards)
בניה פשוט של GUARD על נתיב URL בקובץ - app-routing.module , הפונקציה תבדוק אם המשתמש ביצע לוג-אין, אם לא,
Image file upload with preview in reactive form
נראה איך לעצב כפתור העלאת קובץ , נשייך אותו לטופס של אנגולר, נעשה לו בדיקת אימות של סוג הטופס ונשלח
מדריך אנגולר בסיסי 101 – חלק 4 – מתחילים לבנות
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 3 – תפקיד הספריות החדשות שיצרנו
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 2 – הכרה של הפרויקט
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 1 – התקנה
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
אנגולר NavigationExtras – skipLocationChange
טיפ קטן, פשוט ושימושי! לא נפוץ במיוחד אבל תתפלאו לגלות כמה זה יכול להקל עליכם אם אתם משתמשים בruoter-outlet פנימי
מדריך PWA באנגולר
מדריך Progressive Web Apps לאנגולר CLI , מעבר על היתרונות והיכולות שלו. הדרכה על הקבצים שלו והמשמעות של המאפיינים ב-manifast
איך לבנות Directive באנגולר
קוד קצר באנגולר המדריך איך לבנות טולטיפ על ידי שימוש ב-directive. בנוסף ניתן לראות איך לשנות נראות של התגית על
רכיבים חכמים ורכיבים טיפשים באנגולר
מדריך קצר שעושה סקירה על צורת בניה של פרויקט באנגולר ועל שימוש של רכיבים חכמים ורכיבים טיפשים, בדגש על יתרונות
How to trigger event with another event
איך להפעיל ארוע בעזרת ארוע אחר באנגולר, נראה איך לקשור ארוע של פוקוס לארוע של כניסת עכבר ואיך לקשור ארוע
Custom pipe in angular
רשימה קצרה של pipes שמגיעים כברירת מחדל עם אנגולר ולאחר מכן הדרכה של בנית pipe חדש אשר מקבל מספר ומחזיר
איך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר
הפעלה של פונקציה ברכיב על פי ארוע ניווט באנגולר, ניתן להפעיל בתחילת הניווט, סוף ושגיאה בניווט
הגדרה בסיסית לאנגולר ראוטינג
הגדרות בסיסיות של ראוטינג באנגולר כולל הסבר קצר למשמעות שלהם ואיך להשתמש בהן בפרויקט.
מדריך אנימציות באנגולר – מתקדם
מדריך מתקדם באנמציות של אנגולר המראה הפעלה של אנמציה על פי שינוי ערך של משתנה, מדרגות של שינויים בזמן
מדריך אנימציות באנגולר
מדריך בסיסי על יצירה של אנמציות באנגולר , תחילה ברמת רכיב ולאחר מכן נגיש לכל הפרויקט
angular lazy loading modules routing
הסבר לשימוש ב-lazy loading באנגולר , הפקודות, המבנה של הפרויקט ומה אפשר ואי אפשר לעשות עם הרכיבים בפרויקט.
מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms
הגענו לסיום הקורס באנגולר טפסים מגיבים! למדנו הרבה דברים מעניינים והנה סיכום: מה זה abstract control formControl formGroups, formArray הגדרת
מדריך אנגולר | reactive forms – ולידציות וחיווי בUI
החלק האומנותי הגיע ואנחנו ממש כבר לקראת סיום המיני קורס באנגולר reactive forms. בהחלט מה שחשוב לדעת מלבד לבנות ולידציות
טיפים וטריקים באנגולר (tips & tricks)
אוסף של טיפים וטריקים קצרים לעבודה יותר נכונה עם אנגולר
מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית
אז אחרי שהבנתם מהם ולידציות ואיך נראים ולידציות מובנות. בטח חשבתם לעצמכם, או אפילו כבר נתקלתם בכך שלא קיימת ולידציה
SEO| שינוי Meta tag בהתאם לדף באנגולר
שינוי meta tags דינמית באנגולר לשיפור SEO והופעה במנועי חיפוש
מדריך אנגולר | reactive forms – הוספת ולידציות מובנות
אז אחד החלקים האומנותיים בעבודה עם טפסים הם הולידציות. אנגולר מציע סט שלכם של ולדציות מובנות שכן הם השימושיות לרוב
מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס
אחרי שהיצרנו והרכבנו את האובייקט הריאקטיבי בעזרת formBuilder .עכשיו כל שנותר לנו זה לבנות את הטופס הHTML. ולשייך ולהגדיר, בעזרת
בניה של טופס דינמי על פי מידע מהשרת באנגולר
איך ליצור טופס שכל השדות שלו נקבעים על פי מידע שנשלח מהשרת
מדריך אנגולר | reactive forms – ארכיטקטורה ובנייה נכונה
השיעור הזה והשיעורים הבאים ככל הנראה יהיו יותר פרקטיים, והגיע הזמן ללכלך את הידיים שלנו ולבנות קצת טפסים!. אז קודם
מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב.
אוקיי אז הגענו לשלב שבו מתחילים לרשום קצת טופסים ולמעשה "סיימנו תיאוריה" (לא מדוייק אבל מפה והלאה זה יהיה לרוב
צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types)
להשמה של רכיב אנגולר ב-HTML יש יותר מדרך אחת, זה מאפשר לסדר את הדף בצורה יותר נקיה ולעשות ארכיטקטורה יותר
SEO| שינוי כותרת של הדף באנגולר
שינוי דינמי של כותרת הדף/עמוד באנגולר בשיטה הקלה והקצרה מול השיטה הנכונה יותר
מדריך אנגולר | reactive forms – היכרות בסיסית עם AbstractControl
אפשרויות רבות מתאפשרות בעבודה עם reactive forms , ולמעשה כל האפשרויות הללו מגיעות מהאינסטנס של AbstractControl. שמביא איתו את כל
scroll to anchor | עם אנגולר. נחמד ושימושי
על מנת לייצר חוויה למשתמש אין צורך לעשות משהו מאוד גרנדיוזי . לרוב, המשתמש שלכם יחווה חוויה דווקא בשימושים קטנים
מדריך אנגולר reactive form – יוצאים לדרך.
אוקי חברים אז בגלל שכל הנושא של טפסים באנגולר הוא לא כזה איזי ובטח לא יכול היות בפוסט אחד. אז
איך יוצרים טופס פשוט – אנגולר וטפסים מגיבים | Reactive Forms
כל מה שמכיר אנגולר (או שלא מכיר ועכשיו נתקל בפוסט הזה) . ישנם 2 צורות לכתוב טפסים: Reactive Forms Template
אנגולר Rxjs – BehaviorSubject in Service file
בספרית rxjs יש מספר סוגים של subject , כל אחד והיעוד שלו (והיתרון שלו). הפעם אנחנו נראה איך להשתמש ב-behaviorSubject
שימוש יעיל ב async pipe – אנגולר
מי שמכיר pipes באנגולר, כנראה מכיר היטב את async . שימושי מאוד! מי שפחות מכיר, אז מדובר בפייפ שיודע לקבל
angular input and output in the same variable
באנגולר אפשר לכתוב [(ngModel)] , זה נותן לנו חיבור דו כיווני (קריאה וכתיבה). האם ניתן לעשות את זה לכל משתנה
משתנים נוספים באנגולר ngfor
כאשר מבצעים ngfor אפשר למשוך את ה-index שלו, i=index . בנוסף אפשר למשוך עוד נתונים מ-ngfor כמו אלמנט ראשון ואחרון או כל הזוגיים והאי זוגיים. להפעיל class על
ריבוי מודולים באנגולר
כאשר אנחנו עובדים על אפליקציה גדולה עם ריבוי קומפוננטות וה- app.module.ts הופך לרשימת קניות ארוכה ניתן לפצל את המודול בצורה הבאה: יש
custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form
אחד הדברים ששימושיים בטפסים הוא נושא הוולידציות . באנגולר השקיעו הרבה מחשבה בטפסים ובוולידציות בפרט . אז היה טיפ שיעזור