RSS

AngularJS Module on Demand

23 פבר

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

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

התיקון נמצא במתודה createInjector פשוט תוסיפו לפני ה- return את השורות הבאות:

 

 angular.loadModules = function (modulesToLoad) {

      forEach(loadModules(modulesToLoad), function (fn) {

          instanceInjector.invoke(fn || noop);

      });

  };

דוגמאת קוד:

 

app.js file:

(function () {

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

 

    app.controller('Ctrl', function ($scope, loadMe, $injector) {

        $scope.isSubModuleLoaded = false;

                      // Execute on click event.

        $scope.loadModule = function () {

            loadMe(function () {

                $scope.isSubModuleLoaded = true;

                var v = $injector.get('test');

                console.log(v);

                $scope.$apply();

            });

 

        };

    }

    );

 

    app.factory('loadMe', function () {

        returnfunction (callback) {

            $script('subModule.js', callback);

        };

    });

})();

 

subModule.js file:

(function () {

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

   

    subModule.provider('test', { $get: function () {

return'123456789'; } });

   

    subModule.controller('subModCtrl', function ($scope) {

        $scope.moduleName = "subModule";

    });

 

    // Must call this method.

    angular.loadModules(['subModule']);

})();

 

כמובן שאפשר להשתמש בזה בצורות נוספות ע"פ בחירתכם.

אשמח לקבל תגובות.

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

פורסם ע"י ב- פברואר 23, 2014 ב- AngularJS, Uncategorized

 

תגים:

4 תגובות ל-“AngularJS Module on Demand

  1. mrkrd

    פברואר 23, 2014 at 2:02 pm

    אייל, פתרון מעניין , אבל האם נכון לבצע תיקון בתוך אנגולר?

     
  2. Lee Elenbaas (@LeeElenbaas)

    פברואר 24, 2014 at 7:59 am

    איך הפתרון מתייחס לפעולות config ו-run המשנות הגדרות של מודולים קיימים? או מבצעים מגדירים decorator?

     
  3. דבורה

    אפריל 1, 2014 at 3:36 am

    Pull request to add this functionality
    https://github.com/angular/angular.js/pull/4694

     

כתיבת תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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