Lazy Loading در AngularJS
نویسنده: حمید صابری
تاریخ: ۱۳۹۳/۰۱/۰۸ ۱۶:۵۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
angular.module('app').controller('SomeLazyController', function($scope)
{
$scope.key = '...';
}); Error: Argument ‘SomeLazyController’ is not a function, got undefined
// Registering a controller after app bootstrap
$controllerProvider.register('SomeLazyController', function($scope)
{
$scope.key = '...';
});
// Registering a directive after app bootstrap
$compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
})
// etc (function () {
app = angular.module("app", []);
app.config([
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
//برای رجیستر کردن غیر همروند اجزای انگیولاری در آینده
app.lazy =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
}]);
})(); angular.module('app').lazy.controller('SomeLazyController', function($scope)
{
$scope.key = '...';
}); $stateProvider
.state('state1', {
url: '/state1',
template: '<div>{{st1Ctrl.msg}}</div>',
controller: 'state1Controller as st1Ctrl',
resolve: {
fileDeps: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
var deps = [
'app/messageService.js',
'app/state1Controller.js'];
$script(deps, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
})
.state('state2', {
url: '/state2',
template: '<div>{{st2Ctrl.msg}}</div>',
controller: 'state2Controller as st2Ctrl',
resolve: {
fileDeps: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
var deps = [
'app/messageService.js',
'app/state2Controller.js'];
$script(deps, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
});
}]); <script type="text/javascript">
// ----Script.js----
!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/angular.js', function () {
$script('Scripts/angular-ui-router.js', function () {
$script('app/app.js', function () {
angular.bootstrap(document, ['app']);
});
});
});
</script> <div style="direction: rtl">
<a href="#/state1">حالت 1</a> |
<a href="#/state2">حالت 2</a> |
<a href="#/state3">حالت 3</a>
<div ui-view style="font-weight:bold; text-align:center;"></div>
</div> تگ زیر یک دایرکتیو دارد: <br/> <div ng-hello-directive></div>
angular.module('app').lazy.directive('ngHelloDirective', function () {
return function (scope, elem, attr) {
elem.html('سلام دایرکتیو تنبل!');
};
}); .state('state3', {
url: '/state3',
templateUrl: 'app/state3.html',
resolve: {
fileDeps: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
var deps = ['app/helloDirective.js'];
$script(deps, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
}); angular.module('moduleOfDirective', []).directive('ngDirectiveName', ... app = angular.module("app", ['ui.router', 'moduleOfDirective']); angular.module('app', []).lazy.directive('ngDirectiveName', ... .state('state2', {
url: '/state2',
template: '<div>{{st2Ctrl.msg}}</div>',
controller: 'state2Controller as st2Ctrl', var deps = ['app/messageService.js',
'app/state2Controller.js'];