How to Build AngularJS Modules Dump

כל אחד שעובד בפרויקט גדול שאול אותי אם יש דרך לצייר את העץ של המודולים באנגולר ומה יש בתוכם. התשובה הקצרה כן, זה אפילו לא הרבה קוד וזה נחמד J

 

הנחיות בסיס:

1. אסור לשנות את הקובץ של AngularJS ואת התנהגותו הטבעית.

2. אסור לשנות את הקוד שלנו בגלל ה-dump.

 

הנחיות שימוש והתקנה:

להוסיף את הסקריפט מיד אחרי AngularJS וזהו, סיממנו.

עכשיו מתי שאתם רוצים אתם יכולים להקליד angularEx.getModulesTree() ולראות את העץ של הקשרים. למי שרוצה יוכל להוסיף קובץ של plugins כדי שהוא יוכל לעבוד עם directive שיצייר לו את זה יפה. שלב ב'.

 

בעיות שצריך להתמודד איתם:

1. איך מזהים את המודול הראשי?

2. איך מקבלים גישה לכל המודולים שבזיכרון?

3. איך בונים את העץ? מודול מכיל רק רשימה של string שהיא הבנים שלו.

 

פתרונות:

1. הדרך לזהות את המודול הראשי בלי התערבות  בקוד, כמו שאנגולר עושה את זה במתודה AngularInit, כלומר יעבוד רק עם יש ng-app. ההפעלה של המתודה צריכה להיות באירוע של DOMContentLoaded רק אז אנחנו יודעים בוודאות שכל המודולים נוצרו. (בהנחה שאתם לא משתמשים ב- requires.js או טכנולוגיה דומה ). שימו לב שאני עוצר את הריצה של אנגולר וממשיך אותה באופן יזום. ראו קוד ופוסט קודם.

 

2. אי אפשר לקבל גישה לכל המודולים !!! לכן נכתוב Decorator למתודה angular.module(name,requires,config) ראו קוד:

angular.module = function (moduleName, req,config) {

        var mi = moduleFn(moduleName, req, config);

        originalModules[mi.name] = mi;

        return mi;

    };

ע"י דריסה של המתודה כל פעם שיטען קובץ ויצור מודול אני אדע על כך.

3. בנית העץ פשוטה כי יש לנו את המודול הראשי ואובייקט שמכיל את כל המודולים ע"פ שם, סוג של dictionary, וכל מודול מכיל את כל הבנים שלו. בקיצור רקורסיה לבנית העץ.

סימנו, לקוד לחץ כאן.

דוגמא לאייך נראה האובייקט: ( רק שדות לא שקיים מופיעים )

סימנו שלב א' לקבל את העץ כאובייקט, עכשיו אפשר לכתוב Directive שברגע ששמים אותו על הדף הוא מצייר את העץ.

(קצר בזמן, פירוט מלאה בקורס שלי)

אפשר להשתמש למשל ב- angular.treeview, צריך עכשיו לכתוב עוד רקורסיה שממירה את האובייקט למבנה של העץ. כמובן שאת הכל אורזים לקובץ moduleTree, בתוך הקובץ מגדירים את ה- directive עם תבנית שמשתמשת ב- angular.treeview ובלינק לחבר את המידע.

אשמח כמו תמיד לקבל תגובות.

חג שמח J

בתאריך 14.5.2014 יהיה קורס למפתחים מנוסים באנגולר, הקורס יעסוק באיך אנגולר עובד ואיך אפשר לשפר אותו.

הגעתם עד לפה אז נתן לכם את הלינק לדוגמא המלאה:
http://angular-js.azurewebsites.net/Demos/Samples/01-AngularEx/index.html