RSS

AngularJS Modules Part II

21 מרץ

בחלק הראשון הבנו איך אנגולר יוצר את $injector והקשר שלו למודולים. המסקנה מחלק זה שאפשר לבנות מודולים שאין בניהם קשר של תלות, כלומר שאתם יוצרים אותם angular.module(name, [] )  הארגומנט השני הוא מערך ריק. את כל התלויות אתם תצתרכו להגדיר ביצירה של המודול המרכזי בלבד. העבודה הכפולה של לשים את קובצי ה-javaScripts על הדף וגם להגדיר אותם במערך התלויות די מעצבן. ראו דוגמאת קוד:

<htmlng-app=”myApp”>

<body>

    <scriptsrc=”angular.js”></script>

    <scriptsrc=”modules/proxies.js”></script>

    <scriptsrc=”modules/bl.js”></script>

    <scriptsrc=”modules/controllers.js”></script>

    <scriptsrc=”modules/directives.js”></script>

    <scriptsrc=”modules/filters.js”></script>

    <script>

        angular.module(‘myApp’, [

            ‘filters’,

            ‘controllers’,

            ‘directives’,

            ‘bl’,

            ‘proxies’

        ]);

    </script>

</body>

</html>

 

בפרוייקטים גדולים מספר הקבצים והמודולים יכול להיות מאוד גדול. גם אם אתם מחברים את הקבצים לקובץ אחד או יותר  (bundle) עדיין תחזוקת התלויות של המודל המרכזי במודולים האחרים תישאר.

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

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

 

// app.js file

(function () {

    var app = angular.module('myApp', requiredModules);

 

    // module code.

})();

 

// ngYYY.js file

(function () {

    var ngYYY = angular.module('ngYYY', []);

    requiredModules.push(ngYYY.name);

   

    // module code.

})();

 

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

// ngYYY.js file

(function () {

    var ngYYY = angular.subModule('ngYYY', []);

   

    // module code.

})();

הקוד של app.js נשאר אותו דבר.

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

מודעות פרסומת
 
2 תגובות

פורסם ע"י ב- מרץ 21, 2014 ב- AngularJS

 

2 תגובות ל-“AngularJS Modules Part II

  1. Lee Elenbaas (@LeeElenbaas)

    מרץ 24, 2014 at 8:16 am

    נראה לי נוח ברמת השימוש אבל בעייתי ברמת העקרון.
    רישום התלויות ברמת המודול נותן תיעוד בקוד של מה הן התלויות של הקוד הספציפי
    הצורך בתחזוקת הרשימה פעמיים נובע מכך שאנגולר לא מטפל בעלייה של קוד לדפדפן, אלה רק בתהליך הריצה שלו. הרבה יותר נכון בעיני זה להשתמש ב-scriptLoader ולנצל את אותה רשימה לצורך הגדרת המודול והעלאת הקבצים.
    הכיוון שאני הולך אליו הוא: הוספת פונקציה לסביבה של require אשר מעבר להגדרת AMD מודול תגדיר בתוכו גם את המודול האנגולרי עם אותה רשימת תלויות.
    בצורה זו התחזוקה הינה של רשימה אחת בלבד, והתחזוקה נעשית מקומית, רק במקום בו עולה הצורך – כך גם קוד שלא נמצע בשימוש אוטומטית לא מועלה לדפדפן.

     
    • eyal.vardi

      מרץ 24, 2014 at 10:37 am

      הי,
      תודה על התגובה.
      אני שקלתי סוג כזה של פתרון, אך החלטתי על הכיוון בפוסט מהסיבות הבאות:
      1. רשימת המודולים מאוד גדולה. ולא רצינו (הלקוח + אני) לתחזק אותה.
      2. רשימת המודולים דינאמית בחלקה, כלומר יש מודולים בסיסים (core) ויש מודולים שצריך אותם ע"פ פרמטר מסויים, למשל סוג המשתמש.
      3. לא תמידאפשר לשמור שכל מודול שווה קובץ JS , ולכן המתודה בפוסט גם בודקת אם אין את המודול היא יוצר אותו אם יש היא מחזירה אותו.
      4. במתודה בפוסט יש גם log פנימי שתמיד אפשר לראות את רשימת המודולים.
      5. נושא ה- bundle מאוד משפר את הביצועים וגם הוא דינאמי ולכן הוא מקשה את הפתרון שלך.

      אני חושב שאין כאן נכון לא נכון אלה שיקולים מה יותר מתאים לסוג הפרויקט שלך.

      בברכה,
      אייל ורדי

       

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: