באפליקציות גדולות עם הרבה מודולים יש צורך לטעון את המודולים ע"פ דרישה. היתרונות בכך שהאפליקציה עולה יותר מהר אך כאשר המשתמש בחור להיכנס למקום שבו צריך את המודול הוא יצטרך לחכות עד שהמודול יטען ( כמובן גם כל המודולים שהוא תלוי בהם ). אנגולר לא תומך באפשרות זו, אך יש מספר דרכים לעשות את זה, להשתמש בפתרון 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']);
})();
כמובן שאפשר להשתמש בזה בצורות נוספות ע"פ בחירתכם.
אשמח לקבל תגובות.
mrkrd
פברואר 23, 2014 at 2:02 pm
אייל, פתרון מעניין , אבל האם נכון לבצע תיקון בתוך אנגולר?
Lee Elenbaas (@LeeElenbaas)
פברואר 24, 2014 at 7:59 am
איך הפתרון מתייחס לפעולות config ו-run המשנות הגדרות של מודולים קיימים? או מבצעים מגדירים decorator?
דבורה
אפריל 1, 2014 at 3:36 am
Pull request to add this functionality
https://github.com/angular/angular.js/pull/4694