AngularJS Module on Demand

באפליקציות גדולות עם הרבה מודולים יש צורך לטעון את המודולים ע"פ דרישה. היתרונות בכך שהאפליקציה עולה יותר מהר אך כאשר המשתמש בחור להיכנס למקום שבו צריך את המודול הוא יצטרך לחכות עד שהמודול יטען ( כמובן גם כל המודולים שהוא תלוי בהם ). אנגולר לא תומך באפשרות זו, אך יש מספר דרכים לעשות את זה, להשתמש בפתרון 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']);

})();

 

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

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

מודעות פרסומת