AngularJS שיעור 5: Controllers

(דף זה מציג תיבת שיחה – alert box,בעת שהוא נטען. אנא סגור אותה וקרא הלאה).

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

ב – AngularJS מגדירים controller באמצעות פונקציית contstructor מאחר וה-controller הוא בעצם אובייקט.
כאשר ה-controller מוצמד ל DOM באמצעות ng-controller (כמו בדוגמא שראינו בשיעור 3), AngulaJS ייצר אובייט controller באמצעות פונקציית ה-controller שצויינה.
נביט בדוגמא הבאה:

See the Pen AngularJS Data Binding by Yuval Shaul (@YuvalShaul) on CodePen.10739

כתבנו קוד המתאר את ה – template (כלומר html), וכתבנו קוד לאתחול של נתוני המודל.
לא כתבנו קוד לקישור בין נתוני המודל לתצוגה:

  •  התצוגה מתעדכנת באופן אוטומטי כאשר משתנים הנתונים (זה כיוון אחד)
  • …וגם שינוי התצוגה (כתיבה בתוך שדה input) מעדכנת את הנתונים (וזה הכיוון השני)

עד לרגע זה (כאשר הגדרנו controller) לא יכולנו להדגים את פעולת data binding, מאחר והנתונים אותם עידכנו (ומהם שאבנו) היו נתונים המאוכסנים בתוך אובייקט ה – scope (נרחיב בהמשך).

איך מגדירים Controller

Controller נוצר בתוך מודול, שהוא ה-"קופסא" הסטנדרטית ב  AngularJS. מודולים מכילים רכיבי AngularJS אחרים כמו directives, services וגם controllers (נרחיב אודות מודולים בהמשך).
ההגדרה המופיעה בדוגמא הקודמת יכולה לגרום לבעייה במקריםמסויימים.
פרמטר ה scope$ "מוזרק" אל תוך הפונקציה (נסביר בהמשך), ותהליך זה ייפגע אם נקטין את קוד Javascript שכתבנו, כלומר נגרום ל minification.
הנה דוגמא ל minification של הקוד שכתבנו עבור ה controller:
(אפשר לבדוק כאן)

בדרך כלל, שינוי שמות הפרמטרים לא מפריע, אבל dependency injection תלוי בשמות הללו.
AngularJS מאפשרת להשתמש בתחביר הבא, שמונע את הבעייה:

See the Pen AngularJS new Controller syntax by Yuval Shaul (@YuvalShaul) on CodePen.10739

מתי פועל ה controller ?

בדוגמא הבאה שילבתי קריאה ל – alert בתוך הקוד של ה – controller.
טעינת הדף טוענת גם את הדוגמא ומריצה פעם אחת את ה – controller, ולכן ראינו את תיבת השיחה בפעם הקודמת.

See the Pen Controller run by Yuval Shaul (@YuvalShaul) on CodePen.10739

נשים לב שכרגע מנגנון ה –  data binding פועל (נסו לכתוב בתוך תיבת ה input), אבל צריך לטעון את הדוגמא שוב כדי שה – controller ירוץ שוב (אפשר ללחוץ על כפתור rerun שמופיע כשמחפשים אותו בפינה).

ה – controller מופעל פעם אחת, כדי ליצור מה – template של AngularJS ומנתונים אחרים את
ה – view (שהוא html רגיל, ללא "תוספות" של AngularJS).

בפוסטים הבאים נתאר את מנגנון ה – dependency injection.

 


כתיבת תגובה

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