ضمن تشکر فراوان از جناب آقای پاکدل عزیز، در این مقاله به خوبی درباره lazy loading در angularjs بحث شده. نکته مهم اینکه حتما پروژهی قابل اجرایی که در انتهای مقاله لینک شده را ملاحظه کنید. نکاتی در این پروژه هست از جمله اینکه برای دسترسی به providerها برای lazy loading آنها به این ترتیب به app افزوده شده اند:
(البته این کد از پروژه خودمان است و بعضی وابستگیهای دیگر هم تزریق شدهاند).
به این ترتیب کد نوشته شده به دلیل نام گذاری ارجاع controllerProvider $ با controller به حالت عادی شبیه است، و از طرفی lazy پیش از آن به فهم ماجرا کمک خواهد کرد.
این نحوه تعریف سرویسی که فایل آن در وابستگیها آمده و قرار است lazy load شود:
و این هم نحوه تعریف کنترلری که فایل آن در وابستگیها آمده و قرار است lazy load شود:
app.config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', function ($stateProvider, $urlRouterProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { //برای رجیستر کردن غیر همروند اجزای انگیولاری در آینده app.lazy = { controller: $controllerProvider.register, directive: $compileProvider.directive, filter: $filterProvider.register, factory: $provide.factory, service: $provide.service }; . . . ])
استفاده از app.lazy باعث سهولت بیشتر در استفاده و خواناتر شدن کد میشود. در ادامه به این ترتیب میتوانید از app.lazy استفاده کنید:
angular.module('app').lazy.controller('myController', ['$scope', function($scope){ ... }]);
این نقطه شروع یکی از پروژههای ماست که به عنوان نمونه بد نیست ملاحظه کنید:
<script type="text/javascript"> // --- Scriptjs --- !function (a, b, c) { function t(a, c) { var e = b.createElement("script"), f = j; e.onload = e.onerror = e[o] = function () { e[m] && !/^c|loade/.test(e[m]) || f || (e.onload = e[o] = null, f = 1, c()) }, e.async = 1, e.src = a, d.insertBefore(e, d.firstChild) } function q(a, b) { p(a, function (a) { return !b(a) }) } var d = b.getElementsByTagName("head")[0], e = {}, f = {}, g = {}, h = {}, i = "string", j = !1, k = "push", l = "DOMContentLoaded", m = "readyState", n = "addEventListener", o = "onreadystatechange", p = function (a, b) { for (var c = 0, d = a.length; c < d; ++c) if (!b(a[c])) return j; return 1 }; !b[m] && b[n] && (b[n](l, function r() { b.removeEventListener(l, r, j), b[m] = "complete" }, j), b[m] = "loading"); var s = function (a, b, d) { function o() { if (!--m) { e[l] = 1, j && j(); for (var a in g) p(a.split("|"), n) && !q(g[a], n) && (g[a] = []) } } function n(a) { return a.call ? a() : e[a] } a = a[k] ? a : [a]; var i = b && b.call, j = i ? b : d, l = i ? a.join("") : b, m = a.length; c(function () { q(a, function (a) { h[a] ? (l && (f[l] = 1), o()) : (h[a] = 1, l && (f[l] = 1), t(s.path ? s.path + a + ".js" : a, o)) }) }, 0); return s }; s.get = t, s.ready = function (a, b, c) { a = a[k] ? a : [a]; var d = []; !q(a, function (a) { e[a] || d[k](a) }) && p(a, function (a) { return e[a] }) ? b() : !function (a) { g[a] = g[a] || [], g[a][k](b), c && c(d) }(a.join("|")); return s }; var u = a.$script; s.noConflict = function () { a.$script = u; return this }, typeof module != "undefined" && module.exports ? module.exports = s : a.$script = s }(this, document, setTimeout) $script(['/Scripts/Lib/jquery/jquery-1.10.2.min.js'], function () { $script(['/Scripts/Lib/angular/angular.js'], function () { $script(['/Scripts/Lib/angular/angular-ui-router.min.js', '/Scripts/Lib/angular/angular-resource.min.js', '/Scripts/Lib/angular/angular-cache.min.js', '/Scripts/Lib/angular/angular-sanitize.min.js', '/Scripts/Lib/angular/angular-animate.min.js', '/Scripts/Lib/angular/angular-cookie.min.js', '/APP/Common/directives.js' ], function () { $script('/app/app.js', function () { angular.bootstrap(document, ['app']); }); }); }) }); </script>
این تگ script در صفحه شروع پروژه آمده است.
کد minify شده scriptjs در ابتدا قرار دارد، پس از آن فایلهای js مورد نیاز با رعایت وابستگیهای احتمالی به ترتیب بارگذاری شدهاند.
این قسمت resolve یکی از بخشهای مسیریابی است:
resolve: { fileDeps: ['$q', '$rootScope', function ($q, $rootScope) { var deferred = $q.defer(); var deps = ['/app/HotStories/dataContextService.js', '/app/HotStories/hotStController.js']; $script(deps, function () { $rootScope.$apply(function () { deferred.resolve(); }); }); return deferred.promise; }] }
angular.module('app').lazy.service('dataContextService', ['$rootScope', '$resource', '$angularCacheFactory', '$q', function($rootScope, $resource, $cacheFactory, $q){ ... }]);
angular.module('app').lazy.controller('hotStController', ['$scope', 'ipCookie', 'dataContextService', function($scope, ipCookie, dataContextService){ ... }]);