زمانی که تعداد فایلها و دایرکتوریها در پروژه زیاد میشود(البته این جزء جدانشدنی پروژههای مقیاس بزرگ است) برای جلوگیری از لود یک باره کنترلرها و دایرکتیوها، بهتر از lazy loading برای لود فایلهای مورد نیاز استفاده شود. متاسفانه Angular به صورت رسمی از lazy loading پشتیبانی نمیکند اما با کمی تغییر در ساختار و استفاده از کتابخانههای جانبی مثل requireJs یا ScriptJs میتوان به این مهم دست یافت.
(با عنوان این مطلب که قصد داشتم این مورد را طی یک پست جداگانه بررسی کنم)
برای مثال:
ابتدا ماژول app خود را به این شکل تنظیم کنید:
(function()
{
var app = angular.module('app', []);
app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
{
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.routeProvider = $routeProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;
});
})();
با استفاده از سرویس controllerProvider$ میتوان چرخه ساخت کنترلر را به دست گرفت. هم چنین سرویس compileProvider$ برای نمونه سازی دایرکتیوها و filterProvider$ برای فیلترها استفاده میشوند.
ساخت کنترلرها و دایرکتیوها نیز به صورت زیر انجام خواهد شد:
angular.module('app').controllerProvider.resgister('SomeLazyController', function($scope)
{
$scope.key = '...';
});
و هم چنین یک نمونه از ساخت directive
$compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
})
فقط کافیست در هنگام پیاده سازی routing (که در این
مقاله شرح داده شده است) نوع بارگذاری کنترلرها و دایرکتیو و ... را به صورت lazy انجام دهید :
$routeProvider.when('/about', {templateUrl:'views/about.html', resolve:{deps:function($q, $rootScope)
{
var deferred = $q.defer();
var dependencies =
[
'controllers/AboutViewController.js',
'directives/some-directive.js'
];
//*نکته اول
$script(dependencies, function()
{
// *نکته دوم
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}}})
*نکته اول: تمام وابستگیها توسط scriptJs مدیریت میشوند.
*نکته دوم: تمام وابستگیها مروبط به این scope بعد از فراخوانی تابع deffered.resolved بارگذاری خواهند شد.
نقطه شروع برنامه نیز به صورت زیر است:
$script(['appModule.js'], function()
{
angular.bootstrap(document, ['app'])
});
angular.bootstrap