הוראות (directives) ב-AngularJS

מחבר:

יוסי בן הרוש

בתאריך: 21.02.2016

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 שמאזינות ללחיצה על כפתור או לכניסה לשדה בטופס.

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

מדריכי JavaScript

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

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

3 השלבים לכתיבת האפליקציה

כך נראית האפליקציה בפעולה

לסיכום

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