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

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

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 . מה שייתן לאפליקציה גמישות גדולה יותר, ואף יאפשר לנו לכתוב אפליקציות מורכבות בקלות רבה.

לכל מדריכי ה- AngularJS

מדריכי JavaScript

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

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

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

 

תמונת המגיב

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

מדריכים מעולים כרגיל!!!!!

תמונת המגיב

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

בכיף, שמעון.

תמונת המגיב

שימי בתאריך: 17.11.2016

Thank you

תמונת המגיב

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

You are welcome.

תמונת המגיב

גיל בתאריך: 02.04.2017

יפה מאוד, תודה

תמונת המגיב

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

בשמחה, גיל.

תמונת המגיב

חגי בתאריך: 26.04.2017

מדריך מצויין!
כמו שחיפשתי ורציתי כבר הרבה זמן,
תודה!

תמונת המגיב

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

תודה רבה, חגי.

תמונת המגיב

שלום בתאריך: 02.10.2017

תודה רבה מדריך מעולה פשוט וברור

תמונת המגיב

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

בשמחה, שלום.

תמונת המגיב

שוש בתאריך: 24.10.2017

מדריך מצוין!!
אתה מסביר מעולה!
תודה רבה!!

תמונת המגיב

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

בשמחה, שוש.

תמונת המגיב

מעיין בתאריך: 20.11.2017

מדריך מעולה ! מה אומר הקיצור של : הטמל

תמונת המגיב

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

תודה על השאלה,
הטמל = html

תמונת המגיב

חסוי כי מחפש עבודה בתאריך: 17.07.2018

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