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

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

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

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

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

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

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

מדריכי JavaScript

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

 

= 7 + 8

תמונת המגיב

סוגריים בתאריך: 06.03.2016

שלום יוסי, קודם כל תודה רבה על המדריך המושקע ובהיר ההסברים!
רציתי לדעת מדוע לא צריך סוגריים מסולסלים כפולים על המשתנים user.name ו- user.nickName (בשלב השלישי, בשורה הרביעית).

תודה רבה מראש!
אילנה

תמונת המגיב

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

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