AngularJS שיעור 3: AngularJS Templates

(לקוח מתוך מדריך AngularJS בעברית)

להלן דוגמא מתוך המדריך של AngularJS:

<div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>

קטע קוד זה מציג HTML עם תכונות (attributes) נוספות של AngularJS.
עקרונית, התקן של html (גירסה 5 האחרונה) אינו "מאושר" מקיומן של תכונות כמו ngmodel שבדוגמא, אך לא מפריע לקיומן.
AngularJS מאפשר אף הוספת תגיות html חדשות (כלומר elements), והדפדפנים מרשים את קיומם. (תקן חדש יאפשר בעתיד יצירה של אלמטים חדשים עפ"י הצורך).
כל אלה (רכיבים חדשים או תכונות חדשות) נקראים ב AngularJS בשם Directives.
עבור AngularJS, חלק זה של התוכנה הוא ה-  template, ובאמצעותו (לאחר שלב הקומפילציה) ייוצר ה – view, החלק האחראי על הצגת הנתונים.
התוספת האחרת היא הסוגר המסולסל הכפול  {{   }}  המאפשר הכנסת ביטויים לתוך קוד html.
הקומפיילר של AngularJS, יחליף את הסוגריים המסולסלים לערך ש AngularJS תציב במקומן (פרטים בהמשך).
אפשר לומר שה – directives והסוגריים המסולסלות הם הוראות עבור AngulaJS להצגת התוכן שלה.

concepts-databinding1

 

 

 

 

 

הקומפיילר של AngularJS יהפוךאת התכונות והרכיבים החדשים לקוד html רגיל, ויהפוך אותו לאובייקטי DOM.
בעצם, ה – view האמיתי הוא הקוד המקומפל (כלומר, מתורגם ל html ול – DOM רגיל).

 

 


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *