נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

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

 

= 3 + 4

תמונת המגיב

שמעון בתאריך: 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

בשמחה, שוש.