angularjs שיעור 9: AngularJS modules

פירוק של תוכנה למרכיבים היא משימה קשה.
השתמשנו ב – controllers כדי לכתוב את הקוד  שמחבר בין ה template למודל הנתונים.
האם controllers יהיו המקומות בהם נרצה לכתוב את שאר הקוד?

מודולים ב  AngularJS

מודולים מאפשרים לנו לפרק את הקוד אותו אנו כותבים לצרכים שונים.
לפרק, אך גם לחבר: מודולים מאפשרים לנו לבנות את מערכת התלויות (dependencies) שלנו,
כלומר להגדיר איזה קוד תלוי באיזה קוד אחר.
מודולים יכולים לאכלס controllers, services, filters, directives.
בדרך כלל, הקוד שאותו נמקם בתוך מודול יהיה service, שהוא קטע קוד "כללי" המבצע פעולה מסויימת (או שירות כלשהו עבור הקוד שלנו).

הגדרה ושימוש במודול אנגולר

להלן הגדרה של מודול:

ההגדרה הזו יוצרת מודול חדש בשם myApp.
מאחורי הקלעים, מודולים הם בעצם אובייקטים רגילים של Javascript, והשורה הזו יוצרת בעצם אובייקט חדש.

module

 

כדי להפעיל את המודול, צריך לחבר אותו באופן כלשהו ל – AngularJS.
את המודול הראשי באפליקציה אפשר לחבר באמצעות הדירקטיב ng-app:

אבל מה יקרה אם נרצה לפרק את הקוד באפליקציה שלנו לשני מודולים ?
הנה דוגמא ובה שני מודולים, כאשר בכל אחד מהם controller.
אין הרבה הגיון בדוגמא הזו, נשתמש בה כאן רק כדי להבין את "הטכניקה" של המודולים.
(הדוגמא המלאה כאן)

הנה הגדרת המודולים:

שני האובייקטים נוצרים, ולכן אפשר לאכלס בכל אחד מהם controller:

והנה קוד ה template :

אך מדוע ה – controller השני לא פועל כיאות ?
הבעייה היא שהמודול השני אמנם נוצר, אך לא נכנס לשימוש AngularJS.
המודול הראשון בשימוש מפני שה-template פונה אליו באמצעות ng-app.
מה שנצטרך לעשות הוא, להוסיף את המודול השני כתלות (dependency) של המודול הראשי:

עכשיו שני המודולים טעונים, ואפשר לעבוד עם הקוד של שניהם.

השימוש במודולים נועד כדי לאפשר הוספת סדר ומבנה לתוכנית. השאלה כיצד לחלק את התוכנית למודולים שונים היא "שאלת 64 אלף הדולר", ובעצם היא שאלת תכנון התוכנה בכלל.
בפוסט הזה רק הצגנו את הכלי.


תגובות

angularjs שיעור 9: AngularJS modules — תגובה אחת

להגיב על WatchMeWebNowWatchMeNENE לבטל

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