תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך Angular, אנגולר בעברית

המדריכים בסדרה מעודכנים לגרסה החדישה ביותר, Angular5.

מבוא למדריכי Angular

Angular הוא פריימוורק של JavaScript שמשמש ליצירת אפליקציות מבוססות דף יחיד SPA (Single Page Application). אפליקציות SPAמתנהגות כמו אפליקציות שרצות על מכשירים ניידים כי ניתן לעבור בין הדפים בלי צורך לטעון את כל הדף. כתוצאה מכך, אתר האינטרנט מציג התנהגות חלקה וחוויית משתמש מעולה.
מבוא למדריך אנגולר בעברית

שלום עולם Angular

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

קומפננטות מקוננות ב-Angular

אחרי שבמדריך קודם למדנו ליצור קומפננטות Angular באמצעות שורת הפקודות (CLI), במדריך זה נלמד להוסיף קומפננטות ידנית. כמו-כן, נלמד כיצד לקנן (= לשים בתוך) קומפננטה אחת בתוך קומפננטה אחרת.

העברת מידע בין קומפננטות אחיות ב-Angular

האפליקציה במדריך כתובה באנגולר, ומדגימה העברת מידע בין קומפננטות אחיות בתיווך ההורה. אחת המשימות המבוקשות ביותר כשכותבים אפליקציות.
תקשורת בין קומפננטות אחיות באנגולר Angular2

דירקטיבות Attribute של Angular2

דירקטיבות הם היחידות הבסיסיות של Angular. למעשה, גם הקומפננטות, שבהם אנו מרבים להשתמש, הם דירקטיבות שיש להם טמפלייט. במדריך אחר הראשון בסדרת האנגולר תוכלו ללמוד כיצד להשתמש בקומפננטות אנגולריות.
2 סוגים של דירקטיבות של אנגולר: מבניות ו-attribute

קשירה לתכונות ולאירועים ב-Angular

קומפוננטה של Angular בנויה מתבנית הטמ"ל וקוד typescript שיושב בתוך מחלקה, והבעיה היא כיצד להעביר את המידע בין שני החלקים. במדריך זה נכיר שתי דרכים לטיפול בבעיה: קשירה לתכונות וקשירה לאירועים
קשירה חד כיוונית Angular

קשירה דו-כיוונית ב-Angular

אחרי שבמדריך קודם למדנו קשירה חד-כיוונית ב-Angular , שמאפשרת להעביר מידע מהקוד במחלקה לתבנית ההטמ"ל או הפוך, אבל לא ביחד, במדריך זה נלמד להעביר מידע בשני הכיוונים באמצעות קשירה דו-כיוונית, two-way data binding
קשירה דו כיוונית Angular

local reference באפליקציה אנגולרית

משתנים מקומיים מספקים גישה ישירה לאלמנט בתוך ה-html. המשתנה המקומי מתייחס לשדה שבתוכו הוא יושב, ומשתמשים בו כדי להעביר מידע: לעדכון תבנית ה-html שבתוכה הוא יושב ולעדכון הקוד בקומפוננטה.

פיתוח טפסים באפליקציה מבוססת אנגולר

אחד המרכיבים החשובים ביותר בכל אפליקציה הוא טופס ה-html שמאפשר למשתמשים אינטראקציה עם האתר. במדריך זה נלמד את הדרך של Angular לייצר טפסים חכמים ואינטר-אקטיביים במיוחד.

הדגמה של קשירה  דו-כיוונית בטפסים של Angular

Observable באנגולר

במדריכים הבאים אני מטפל בנושאים של שימוש ב-Ajax ובניווט בין דפים באפליקציית דף יחיד. שני הנושאים מבוססים על קוד א-סינכרוני, ולכן מאוד חשוב להבין את הדרך המיוחדת שבה -Angular מטפל בקוד כזה.

the observable in Angular

מדריך 1: httpClient באנגולר

הדרך המועדפת על Angular לתקשר ב -AJAX עם צד השרת של האפליקציה היא באמצעות המודול HttpClientModule שעתיד להחליף בגרסאות הבאות של אנגולר את ה-HttpModule. Angular שכוללת צד משתמש וצד שרת. הקוד שנפתח במדריך הראשון בסדרה מביא את המידע מצד השרת באמצעות GET, ואח"כ מציג אותו באפליקציה האנגולרית.

מדריך http אנגולר

מדריך 2: httpClient באנגולר - post

מדריך זה הוא השני בסדרת המדריכים שמלמדת כיצד להשתמש ב-httpClient של Angular כדי לתקשר ב-AJAX עם צד השרת של האפליקציה. במדריך נפתח טופס אנגולרי שלתוכו יזינו המשתמשים את שם הדגם של מכונית ואת מחירה, ונשלח את המידע באמצעות POST לצד השרת.

מדריך 3: httpClient באנגולר - put

מדריך זה הוא השלישי בסדרת המדריכים שמלמדת כיצד להשתמש ב-httpClient של Angular כדי לתקשר ב-AJAX עם צד השרת של האפליקציה. במדריך זה, נערוך את המידע באמצעות המתודה put.

מדריך 4: httpClient באנגולר - delete

מדריך זה הוא הרביעי בסדרה שמלמדת כיצד להשתמש ב-httpClient של Angular כדי לתקשר עם צד השרת של האפליקציה. במדריך זה, נמחק פריטי מידע באמצעות המתודה delete.

אפליקציה אנגולרית מבוססת דף יחיד

במדריך זה הגענו לחלק החשוב ביותר בלימוד Angular. כי אנגולר זו לא רק סביבת עבודה שמאפשרת לנו לכתוב JavaScript מתקדם, אלא בעיקר ספריית קוד שמיועדת לכתיבת אפליקציות של דף יחיד (spa = single page application), שנראות ומתנהגות כמו האפליקציות שאנחנו רגילים אליהם בניידים או על מחשבים שולחניים.
Single page application in Angular

מניעת גישה מנתיבים באפליקציה של Angular באמצעות CanActivate Guard

מניעת גישה ממשתמשים חיונית בכל אפליקציה שבה רוצים להגן על דפים מפני משתמשים שאינם מורשים. במדריך זה הסבר כיצד להשתמש ב-canActivate באפליקציות של Angular.
מניעה גישה מנתיבים באפליקציה של Angular באמצעות canActivate guard

שימוש ב-pipe קיימים ומשלנו ב-Angular

Angular מאפשר לנו לשנות את המראה של המידע המוצג באתר בדרך אלגנטית באמצעות pipes. ישנם pipes מובנים שמסופקים עם הפריימוורק, ואנחנו יכולים לכתוב משלנו. את שני הסוגים נסביר ונדגים במדריך.
מדריך pipe של אנגולר angular

ואידך זיל גמור...

 

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?

 

תמונת המגיב

מאיה בתאריך: 02.03.2019

שחקת אותה. כל הטוב הזה בעברית.

תמונת המגיב

יוסי בן הרוש בתאריך: 02.03.2019

בשמחה, מאיה.

תמונת המגיב

עטרה בתאריך: 14.03.2019

כל הכבוד לך על ההוצאה בעברית! הדבר מכבד את הפיתוח בישראל ועל הדרך עוזר להמון אנשים הרי תמיד קל יותר בשפת אם בווודאי שגם במקרה של כתיבה והסבר מושקע ומובן מאוד תודה רבה אין מילים!

תמונת המגיב

חגי בתאריך: 02.04.2019

בינתיים עברתי רק על הכותרות
- וזה כבר עשה לי סדר בראש.
נראה ממש טוב!

תמונת המגיב

הדס בתאריך: 04.05.2019

מדריך תותח!!תודה!!

תמונת המגיב

חלחמ בתאריך: 30.06.2019

תודה

תמונת המגיב

שש בתאריך: 21.11.2019

איך ניתן לגרום להשהיה מכוונת?
אני רוצה שכאשר לוחצים על כפתור- יקח 2 שניות עד שהפונקציה תקרא.

תמונת המגיב

אופיר בתאריך: 18.01.2020

קודם כל תודה רבה! כל הכבוד לך על ההשקעה, שנית, האם המדריך רלוונטי לאנגולר 8?

תמונת המגיב

נעמי בתאריך: 29.03.2020

עזרהההה באנגולר דחוףףף

תמונת המגיב

פלוני בתאריך: 20.04.2020

יש לי שאלה: כיצד מגדירים מופע למערך של אוביקט באנגולר ?

תמונת המגיב

יוני בתאריך: 20.05.2020

גם אני נהנה מהאתר

תמונת המגיב

טל בתאריך: 10.06.2020

תודה רבה על היוזמה המבורכת!

תמונת המגיב

ענבל בתאריך: 13.07.2020

לומדת המון מהמדריכים שכתבת.
בעזרת המדריכים האלו קל הרבה יותר לנחות לחומר לא מוכר.
תודה!!

תמונת המגיב

שמעון בתאריך: 13.09.2020

ממליץ להוסיף תוכן עניינים שיהיה יותר מסודר
אחלה הסברים

תמונת המגיב

תמר בתאריך: 01.11.2020

אין על האתר הזה !!
אני לומדת תכנות וכל בעיה בכל אחד מהמקצועות אני בודקת איך עושים ותמיד מוצאת תשובה לכל שאלה!!

תמונת המגיב

נעמה בתאריך: 17.01.2021

אשמח לדעת איך אני יכולה לפתוח אנגולר בויזואל סטודיו 2019

תמונת המגיב

בנימין בתאריך: 17.01.2021

הי יוסי תודה על המדריך
יש יתרוך בדרך המסורבלת הזו יחסית
בשעה שאני יכול לעשות את כל זה ע"י שימוש ב service?

תמונת המגיב

סתיו בתאריך: 21.04.2021

מדריך מהמם!
אבל למה אין התייחסות ל- viewChild?

תמונת המגיב

נועה בתאריך: 01.06.2021

תודה רבה
המדריך ברור ועוזר מאוד

תמונת המגיב

רות בתאריך: 13.06.2021

תודה רבה יוסי! זה נכס רב עצמה!!!

תמונת המגיב

רחל בתאריך: 07.07.2021

איך מקשרים מייל באנגולר?

תמונת המגיב

דניאל AJ בתאריך: 27.04.2022

מדריך מדהים תודה רבה !!! תמשיך לעשות עוד ושיהיה המון בהצלחה :)

תמונת המגיב

רות בתאריך: 05.12.2022

מדריך מדהים!!! תותח!!!! תודה רבה!!!!!

תמונת המגיב

אלי בתאריך: 14.12.2022

ממש ממש עוזר וכיפי! מחר יש לי מבחן קבלה וז נראה לי ישמש אותי במבחן חבל שאין עוד נושאים

תמונת המגיב

נועם בתאריך: 14.02.2023

פשוט אין מילים כ"כ ברור ובלי מלל מיותר... אם תוכל להגיב בהקדם האפשרי אני אשמח לדעת אם זה מתאים גם לאנגולר גרסה 8,9

תמונת המגיב

מאיר בתאריך: 20.04.2023

צריך גם מדריכים על:
ViewEncapsulation
Routes
Angular Material
Promises

תמונת המגיב

חן בתאריך: 01.06.2023

תודה