databinding ב-AngularJS
אחרי ש במדריך הקודם התוודענו ל-AngularJS , במדריך זה נתחיל להכיר את הספרייה הלכה למעשה. נעשה זאת על ידי כתיבת אפליקציה פשוטה שכוללת שדה קלט, שניתן להזין לתוכו שם ולראות אותו בזמן אמת.
הקלידו את השם הפרטי ושם המשפחה בטופס, כדי לראות את הקוד שנפתח במדריך בפעולה:
| שם פרטי: | |
| שם משפחה: |
כתיבת האפליקציה כוללת את הצעדים הבאים
1. נכלול את AngularJS ב-head של ההטמ"ל
<!doctype html> <html> <head> <meta charset="utf-8"> <title>מדריך Angular JS</title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> </head>
במקרה זה, הספרייה לא מאוחסנת אצלנו באתר, אלא יורדת מ-cdn
2. מגדירים את האלמנט העוטף כאפליקציה של Angular
מגדירים את האלמנט העוטף כאפליקציה של Angular באמצעות הוספת ng-app לתגית הפותחת של האלמנט. במקרה זה, האלמנט העוטף הוא DIV.
<div ng-app="">
</div>
3. מגדירים בתוך האפליקציה את מקור הנתונים באמצעות ng-model
. במקרה זה, מקור הנתונים הוא שדה קלט אותו מזין המשתמש.
<div ng-app=""> שם: <input ng-model="name" type="text"> </div>
בהזדמנות זו ניתן למקור הנתונים (מכונה גם מודל) את השם "name".
4. נגדיר את האלמנט שמקבל את הנתונים מהמודל ומציג אותם באמצעות ng-bind
<div ng-app=""> שם: <input ng-model="name" type="text"> שלום, <span ng-bind="name"></span> </div>
עכשיו כל המידע שנזין לתוך שדה הקלט, יוצג באלמנט ה-span.
איך מתרחש הפלא הזה?
- שדה הקלט מוגדר : ng-model="name" והוא מהווה את מקור הנתונים.
- מקור הנתונים מעדכן את ה-span שמוגדר כ ng-bind=name
הסיבה שהמידע עובר מהמודל ומעדכן את ההטמ"ל היא שהם שניהם שייכים לאותה האפליקציה (שניהם יושבים תחת אותו ng-app), ויש ביניהם databinding.
נקבל נתונים משני שדות במקום מאחד
ניתן לקשור יותר ממקור נתונים אחד (יותר ממודל אחד). בדוגמה זו, נגדיר שני מודלים: name ו-lastName ונציג את הערך שמוקלד לתוכם בתוך ההטמ"ל.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>מדריך Angular JS</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body dir="rtl" ng-app="">
שם: <input ng-model="name" type="text">
משפחה: <input ng-model="lastName" type="text">
שלום, <span ng-bind="name"></span> <span ng-bind="lastName"></span>
</body>
</html>
וזהו, השלמנו את כתיבת האפליקציה הראשונה.
Angular והוראות (directives)
Angular מרחיב את אוצר המילים של ה-HTML באמצעות הוראות (directives), שאותם אנו מוסיפים בתור שדות לתגיות ה-HTML.
באפליקציה הפשוטה אותה פיתחנו במדריך השתמשנו במספר directives של Angular, ובכללם:
| ng-app | directive שמגדירה שמסמך ה-HTML (או חלקים ממנו) שייכים ל-Angular. |
| ng-model | directive שמגדירה את מקור המידע לשימושה של האפליקציה. |
| ng-bind | אומר ל-Angular להחליף את תוכנו של אלמנט HTML בערך של ביטוי, ולעדכן את ה-HTML כשערך הביטוי משתנה. |
במדריכים הבאים, נפגוש סוגים נוספים של directives.
סיכום
אחרי שכתבנו במו ידינו אפליקציה שקושרת בין מידע שמזין המשתמש ובין הפלט שמוצג למשתמש בזמן אמת, במדריך הבא נלמד כיצד לארגן את האפליקציה שלנו באופן יעיל יותר בארכיטקטורת MVC . מה שייתן לאפליקציה גמישות גדולה יותר, ואף יאפשר לנו לכתוב אפליקציות מורכבות בקלות רבה.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.