הוראות (directives) ב-AngularJS
Angular מרחיב את אוצר המילים של ה-HTML באמצעות הוראות (directives), שאותם מוסיפים בתור שדות לתגיות ה-HTML.
ה-directives אומרות לאפליקציה האנגולרית מה עליה לעשות.
כבר השתמשנו במספר הוראות (directives) של Angular, ובכלל כך:
- ng-app הוראה שמגדירה שקובץ ה-HTML (או חלקים ממנו) שייכים לאפליקציה האנגולרית.
- ng-controller שמחברת את הקוד של הקונטרולר ל-view.
- ng-model הוראה שמגדירה את מקור המידע לשימוש האפליקציה.
במדריך זה נכיר עוד שתי הוראות:
- ng-init מאתחלת את המידע שישמש את האפליקציה.
- ng-repeat מאפשרת להציג כל אלמנט שמקורו באוסף באופן נפרד. לדוגמה, שימוש בng-repeat מאפשר להציג מערך בתור רשימה של HTML.
האפליקציה שנפתח במדריך תציג רשימת שמות וכינויים שתתבסס על מערך.
3 השלבים לכתיבת האפליקציה
1. נגדיר את האפליקציה באמצעות ng-app
<div ng-app="">
</div>
לקריאה אודות השיקולים בבחירת האלמנט שעליו תוגדר האפליקציה.
2. נאתחל את המידע באפליקציה באמצעות מערך של אובייקטים באמצעות ng-init
<div ng-app="" ng-init = "users= [{name:'ג`וני',nickName:'השועל'}, {name:'ניסים',nickName:'הדג'}, {name:'ציון',nickName:'פצצת אטום'}]">
</div>
בתוך ה-directive הגדרנו מערך של אובייקטים של json שמכיל את השם והכינוי של המשתמשים. כך זה נראה:
users= [
{name:'ג`וני',nickName:'השועל'},
{name:'ניסים',nickName:'הדג'},
{name:'ציון',nickName:'פצצת אטום'}
]
3. נתרגם את המערך לרשימה של html באמצעות ng-repeat
<div ng-app="" ng-init = "users= [{name:'ג`וני',nickName:'השועל'}, {name:'ניסים',nickName:'הדג'}, {name:'ציון',nickName:'פצצת אטום'}]">
<ul>
<li ng-repeat = "user in users">
{{ user.name + ' המכונה ' + user.nickName }}
</li>
</ul>
</div>
וזה הקוד המלא:
<!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">
</head>
<body dir="rtl">
<div ng-app="" ng-init = "users= [{name:'ג`וני',nickName:'השועל'}, {name:'ניסים',nickName:'הדג'}, {name:'ציון',nickName:'פצצת אטום'}]">
<ul>
<li ng-repeat = "user in users">
{{ user.name + ' המכונה ' + user.nickName }}
</li>
</ul>
</div>
</body>
</html>
כך נראית האפליקציה בפעולה
האפליקציה מתרגמת את המערך לרשימה.
- {{ user.name + ' המכונה ' + user.nickName }}
לסיכום
אחרי שבמדריך זה למדנו על הוראות (directives) של Angular, ממש על קצה המזלג, במדריך הבא נלמד להשתמש ב-directives שמאזינות לארועים בדף . לדוגמה, directive שמאזינות ללחיצה על כפתור או לכניסה לשדה בטופס.
