AdminDashboardComponent<\/code> ekranda g\u00f6r\u00fcn\u00fcr.<\/p>\nPreloading Stratejileri (\u00d6n Y\u00fckleme Stratejileri)<\/h3>\n
Lazy loading, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini h\u0131zland\u0131rsa da, bir dezavantaj\u0131 vard\u0131r: kullan\u0131c\u0131 bir lazy loaded rotaya ilk kez t\u0131klad\u0131\u011f\u0131nda, mod\u00fcl\u00fcn indirilmesi i\u00e7in k\u0131sa bir gecikme ya\u015fanabilir. Bu gecikme, kullan\u0131c\u0131 deneyimini hafif\u00e7e olumsuz etkileyebilir. \u0130\u015fte bu noktada “Preloading” (\u00d6n Y\u00fckleme) stratejileri devreye girer.<\/p>\n
Preloading, uygulaman\u0131n ba\u015flang\u0131\u00e7ta y\u00fcklendikten sonra veya belirli bir bo\u015fta kalma s\u00fcresi boyunca, lazy loaded mod\u00fclleri arka planda indirmesi anlam\u0131na gelir. B\u00f6ylece, kullan\u0131c\u0131 bu mod\u00fcllere y\u00f6nlendirildi\u011finde, mod\u00fcller zaten indirilmi\u015f ve haz\u0131r oldu\u011fu i\u00e7in an\u0131nda eri\u015filebilir olur.<\/p>\n
Angular Router, \u00e7e\u015fitli preloading stratejileri sunar:<\/p>\n
1. NoPreloading<\/code> (Varsay\u0131lan):<\/strong> Hi\u00e7bir lazy loaded mod\u00fcl \u00f6nceden y\u00fcklenmez. Mod\u00fcller yaln\u0131zca talep edildi\u011finde y\u00fcklenir.
\n2. PreloadAllModules<\/code>:<\/strong> Uygulama ba\u015flat\u0131ld\u0131ktan sonra, t\u00fcm lazy loaded mod\u00fcller arka planda otomatik olarak y\u00fcklenir. Bu, t\u00fcm mod\u00fcllerin h\u0131zl\u0131ca eri\u015filebilir olmas\u0131n\u0131 sa\u011flar ancak ba\u015flang\u0131\u00e7 sonras\u0131 a\u011f trafi\u011fini ve kaynak t\u00fcketimini art\u0131rabilir.
\n3. Custom Preloading Strategy (\u00d6zel \u00d6n Y\u00fckleme Stratejisi):<\/strong> Geli\u015ftiricilerin kendi mant\u0131klar\u0131n\u0131 kullanarak hangi mod\u00fcllerin ne zaman \u00f6nceden y\u00fcklenece\u011fine karar vermesini sa\u011flar. \u00d6rne\u011fin, sadece belirli mod\u00fclleri y\u00fckleyebilir, kullan\u0131c\u0131n\u0131n bant geni\u015fli\u011fine g\u00f6re y\u00fckleme yapabilir veya belirli bir zamanda y\u00fckleme yapabilirsiniz.<\/p>\nPreloading Stratejileri Nas\u0131l Uygulan\u0131r?<\/h4>\n
Preloading stratejisini AppRoutingModule<\/code> i\u00e7indeki RouterModule.forRoot()<\/code> metoduna ikinci bir parametre olarak ekleyerek yap\u0131land\u0131rabilirsiniz.<\/p>\n\/\/ src\/app\/app-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes, PreloadAllModules, NoPreloading } from '@angular\/router';\n\nconst routes: Routes = [\n \/\/ ... rotalar\u0131n\u0131z ...\n];\n\n@NgModule({\n imports: [\n RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })\n \/\/ Veya: RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })\n ],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }<\/code><\/pre>\nPreloadAllModules<\/code> kullanmak, \u00e7o\u011fu orta \u00f6l\u00e7ekli uygulama i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Ancak, daha karma\u015f\u0131k senaryolar i\u00e7in \u00f6zel bir strateji olu\u015fturman\u0131z gerekebilir.<\/p>\n\u00d6zel \u00d6n Y\u00fckleme Stratejisi \u00d6rne\u011fi<\/h4>\n
\u00d6zel bir \u00f6n y\u00fckleme stratejisi olu\u015fturmak i\u00e7in PreloadingStrategy<\/code> aray\u00fcz\u00fcn\u00fc uygulayan bir servis olu\u015fturman\u0131z gerekir. Bu servis, her bir lazy loaded rota i\u00e7in preload<\/code> metodunu \u00e7a\u011f\u0131r\u0131r.<\/p>\n\/\/ src\/app\/custom-preloading-strategy.service.ts\nimport { Injectable } from '@angular\/core';\nimport { PreloadingStrategy, Route } from '@angular\/router';\nimport { Observable, of } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class CustomPreloadingStrategyService implements PreloadingStrategy {\n preload(route: Route, fn: () => Observable): Observable {\n if (route.data && route.data['preload']) {\n console.log('Preloading: ' + route.path);\n return fn(); \/\/ Mod\u00fcl\u00fc y\u00fckle\n }\n return of(null); \/\/ Mod\u00fcl\u00fc y\u00fckleme\n }\n}<\/code><\/pre>\nBu \u00f6zel stratejiyi kullanmak i\u00e7in, rotalar\u0131n data<\/code> \u00f6zelli\u011fine preload: true<\/code> eklemeniz ve AppRoutingModule<\/code> i\u00e7inde stratejiyi belirtmeniz gerekir:<\/p>\n\/\/ src\/app\/app-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { CustomPreloadingStrategyService } from '.\/custom-preloading-strategy.service';\n\nconst routes: Routes = [\n { path: '', redirectTo: '\/home', pathMatch: 'full' },\n { path: 'home', component: HomeComponent },\n {\n path: 'admin',\n loadChildren: () => import('.\/admin\/admin.module').then(m => m.AdminModule),\n data: { preload: true } \/\/ Bu mod\u00fcl\u00fc \u00f6nceden y\u00fckle\n },\n {\n path: 'products',\n loadChildren: () => import('.\/products\/products.module').then(m => m.ProductsModule),\n data: { preload: false } \/\/ Bu mod\u00fcl\u00fc \u00f6nceden y\u00fckleme\n },\n { path: '<\/em>', component: NotFoundComponent }\n];\n\n@NgModule({\n imports: [\n RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategyService })\n ],\n exports: [RouterModule],\n providers: [CustomPreloadingStrategyService] \/\/ Servisi sa\u011flay\u0131n\n})\nexport class AppRoutingModule { }<\/code><\/pre>\nBu \u00f6rnekte, sadece admin<\/code> mod\u00fcl\u00fc \u00f6nceden y\u00fcklenecek, products<\/code> mod\u00fcl\u00fc ise talep edildi\u011finde y\u00fcklenecektir. Bu, uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na g\u00f6re \u00e7ok esnek bir kontrol sa\u011flar.<\/p>\nLazy Loading ve Mod\u00fcl \u0130leti\u015fimi<\/h3>\n
Lazy loaded mod\u00fcller, uygulaman\u0131n di\u011fer b\u00f6l\u00fcmlerinden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015facak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Ancak, baz\u0131 durumlarda bu mod\u00fcllerin di\u011fer mod\u00fcllerle veya ana uygulama ile ileti\u015fim kurmas\u0131 gerekebilir.<\/p>\n
Shared Mod\u00fcllerin Y\u00f6netimi<\/h4>\n
Birden fazla lazy loaded mod\u00fcl taraf\u0131ndan kullan\u0131lan bile\u015fenler, direktifler veya pipe’lar varsa, bunlar\u0131 bir SharedModule<\/code> i\u00e7inde toplamak en iyi uygulamad\u0131r. SharedModule<\/code>, bu ortak \u00f6\u011feleri d\u0131\u015fa aktar\u0131r ve di\u011fer mod\u00fcller taraf\u0131ndan i\u00e7e aktar\u0131labilir.<\/p>\n\u00d6nemli:<\/strong> SharedModule<\/code>‘\u00fc lazy loaded mod\u00fcllere imports<\/code> dizisi arac\u0131l\u0131\u011f\u0131yla i\u00e7e aktar\u0131n. Ancak, SharedModule<\/code> i\u00e7inde servis sa\u011flay\u0131c\u0131lar\u0131 (providers<\/code>) tan\u0131mlamay\u0131n. Servisler, genellikle AppModule<\/code> i\u00e7inde veya providedIn: 'root'<\/code> ile global olarak sa\u011flanmal\u0131d\u0131r. E\u011fer bir servisi lazy loaded bir mod\u00fcl\u00fcn providers<\/code> dizisinde tan\u0131mlarsan\u0131z, o servis yaln\u0131zca o mod\u00fcl y\u00fcklendi\u011finde kullan\u0131labilir olur ve her mod\u00fcl kendi servis \u00f6rne\u011fine sahip olur.<\/p>\nOrtak Servislerin Sa\u011flanmas\u0131<\/h4>\n
Uygulama genelinde kullan\u0131lacak servisler (\u00f6rne\u011fin, kimlik do\u011frulama servisi, API servisi), genellikle AppModule<\/code>‘\u00fcn providers<\/code> dizisinde tan\u0131mlan\u0131r veya Angular 6 ve sonras\u0131 i\u00e7in providedIn: 'root'<\/code> ile i\u015faretlenir. Bu, servisin tek bir \u00f6rnek olarak (singleton) t\u00fcm uygulama boyunca eri\u015filebilir olmas\u0131n\u0131 sa\u011flar. Lazy loaded mod\u00fcller de bu global servislere eri\u015febilir.<\/p>\n\/\/ src\/app\/services\/auth.service.ts\nimport { Injectable } from '@angular\/core';\n\n@Injectable({\n providedIn: 'root' \/\/ Servis uygulama genelinde tek \u00f6rnek olarak sa\u011flan\u0131r\n})\nexport class AuthService {\n \/\/ ...\n}<\/code><\/pre>\nState Y\u00f6netimi (Ngrx gibi) ile Entegrasyon<\/h4>\n
E\u011fer uygulaman\u0131z Ngrx gibi bir state y\u00f6netim k\u00fct\u00fcphanesi kullan\u0131yorsa, lazy loaded mod\u00fcller kendi alt state’lerini tan\u0131mlayabilir ve bunlar\u0131 ana state’e dinamik olarak ekleyebilir. Ngrx’in forFeature<\/code> metodu bu senaryo i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n\/\/ src\/app\/admin\/admin.module.ts\nimport { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { StoreModule } from '@ngrx\/store';\nimport { adminReducer } from '.\/state\/admin.reducer';\n\n@NgModule({\n imports: [\n CommonModule,\n AdminRoutingModule,\n StoreModule.forFeature('admin', adminReducer) \/\/ Lazy loaded mod\u00fcl\u00fcn state'ini ekle\n ],\n \/\/ ...\n})\nexport class AdminModule { }<\/code><\/pre>\nBu, lazy loaded mod\u00fcllerin kendi state’lerini y\u00f6netirken, ana uygulaman\u0131n state’ini \u015fi\u015firmemesini sa\u011flar.<\/p>\n
Lazy Loading En \u0130yi Uygulamalar\u0131 (Best Practices)<\/h3>\n
Lazy loading’den en iyi \u015fekilde faydalanmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 takip etmek \u00f6nemlidir:<\/p>\n
* Mod\u00fcl S\u0131n\u0131rlar\u0131n\u0131 Do\u011fru Belirleme:<\/strong> Uygulaman\u0131z\u0131n her bir ana \u00f6zelli\u011fini veya b\u00f6l\u00fcm\u00fcn\u00fc ayr\u0131 bir mod\u00fcl olarak d\u00fc\u015f\u00fcn\u00fcn. \u00d6rne\u011fin, “Admin Paneli”, “Kullan\u0131c\u0131 Profilleri”, “\u00dcr\u00fcn Katalo\u011fu” gibi mant\u0131ksal olarak ayr\u0131labilir b\u00f6l\u00fcmler lazy loaded mod\u00fcller i\u00e7in iyi adaylard\u0131r.
\n* Payla\u015f\u0131lan Mod\u00fclleri Dikkatli Y\u00f6netme:<\/strong> Birden fazla lazy loaded mod\u00fcl taraf\u0131ndan kullan\u0131lan ortak bile\u015fenleri, direktifleri ve pipe’lar\u0131 bir SharedModule<\/code> i\u00e7inde toplay\u0131n. Bu SharedModule<\/code>‘\u00fc her lazy loaded mod\u00fcle imports<\/code> dizisi arac\u0131l\u0131\u011f\u0131yla i\u00e7e aktar\u0131n. Ancak, SharedModule<\/code>‘\u00fcn kendisini lazy load etmeyin ve i\u00e7inde servis sa\u011flay\u0131c\u0131lar\u0131 tan\u0131mlamaktan ka\u00e7\u0131n\u0131n.
\n* K\u00fc\u00e7\u00fck ve Odaklanm\u0131\u015f Mod\u00fcller Olu\u015fturma:<\/strong> Her bir lazy loaded mod\u00fcl\u00fcn tek bir sorumlulu\u011fu olmal\u0131 ve m\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck tutulmal\u0131d\u0131r. Bu, hem kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r hem de paket boyutlar\u0131n\u0131 daha y\u00f6netilebilir k\u0131lar.
\n* Preloading Stratejilerini Ak\u0131ll\u0131ca Kullanma:<\/strong> PreloadAllModules<\/code> genellikle iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Ancak, uygulaman\u0131z \u00e7ok say\u0131da lazy loaded mod\u00fcl i\u00e7eriyorsa veya belirli mod\u00fcllerin \u00f6ncelikli olarak y\u00fcklenmesi gerekiyorsa, \u00f6zel bir preloading stratejisi olu\u015fturmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 analiz ederek en \u00e7ok ziyaret edilen rotalar\u0131 \u00f6nceden y\u00fcklemek mant\u0131kl\u0131 olabilir.
\n* Performans \u0130zleme ve Optimizasyon:<\/strong> Lazy loading uyguland\u0131ktan sonra bile, uygulaman\u0131z\u0131n performans\u0131n\u0131 d\u00fczenli olarak izleyin. Taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 (Network sekmesi) kullanarak paket boyutlar\u0131n\u0131 ve y\u00fckleme s\u00fcrelerini kontrol edin. Gerekirse daha fazla optimizasyon (\u00f6rne\u011fin, a\u011fa\u00e7 sallama – tree-shaking, s\u0131k\u0131\u015ft\u0131rma) yap\u0131n.
\n* Route Guard’lar ile Entegrasyon (canLoad<\/code>):<\/strong> canLoad<\/code> guard’\u0131, bir mod\u00fcl\u00fcn y\u00fcklenmeden \u00f6nce belirli ko\u015fullar\u0131 kontrol etmenizi sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n belirli bir mod\u00fcl\u00fc y\u00fckleme yetkisi yoksa, mod\u00fcl\u00fcn indirilmesini tamamen engelleyebilirsiniz. Bu, hassas verileri i\u00e7eren mod\u00fcller i\u00e7in g\u00fcvenlik katman\u0131 sa\u011flar.<\/p>\n\/\/ src\/app\/auth.guard.ts\nimport { Injectable } from '@angular\/core';\nimport { CanLoad, Route, UrlSegment, UrlTree, Router } from '@angular\/router';\nimport { Observable } from 'rxjs';\nimport { AuthService } from '.\/services\/auth.service';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AuthGuard implements CanLoad {\n constructor(private authService: AuthService, private router: Router) {}\n\n canLoad(\n route: Route,\n segments: UrlSegment[]): Observable | Promise | boolean | UrlTree {\n \n if (this.authService.isAuthenticated()) {\n return true;\n } else {\n this.router.navigate(['\/login']);\n return false;\n }\n }\n}<\/code><\/pre>\nVe app-routing.module.ts<\/code> i\u00e7inde kullan\u0131m\u0131:<\/p>\n\/\/ src\/app\/app-routing.module.ts\nimport { AuthGuard } from '.\/auth.guard';\n\nconst routes: Routes = [\n \/\/ ...\n {\n path: 'admin',\n loadChildren: () => import('.\/admin\/admin.module').then(m => m.AdminModule),\n canLoad: [AuthGuard] \/\/ Mod\u00fcl y\u00fcklenmeden \u00f6nce AuthGuard'\u0131 \u00e7al\u0131\u015ft\u0131r\n },\n \/\/ ...\n];<\/code><\/pre>\nS\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n
Lazy loading ile \u00e7al\u0131\u015f\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 yayg\u0131n sorunlar ve \u00e7\u00f6z\u00fcmleri:<\/p>\n
* Mod\u00fcl Bulunamad\u0131 Hatalar\u0131:<\/strong>
\n * Sorun:<\/strong> Cannot find module '.\/admin\/admin.module'<\/code> gibi hatalar alabilirsiniz.
\n * \u00c7\u00f6z\u00fcm:<\/strong> loadChildren<\/code> i\u00e7indeki yolun do\u011fru oldu\u011fundan ve dosya ad\u0131n\u0131n b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf duyarl\u0131l\u0131\u011f\u0131na dikkat etti\u011finizden emin olun. Ayr\u0131ca, AdminModule<\/code> s\u0131n\u0131f\u0131n\u0131n do\u011fru \u015fekilde d\u0131\u015fa aktar\u0131ld\u0131\u011f\u0131ndan emin olun.
\n* Ba\u011f\u0131ml\u0131l\u0131k Sorunlar\u0131 (Ortak Servisler):<\/strong>
\n * Sorun:<\/strong> Lazy loaded bir mod\u00fclde bir servis kullanmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda, servisin yeni bir \u00f6rne\u011finin olu\u015fturuldu\u011funu veya tan\u0131ms\u0131z oldu\u011funu fark edebilirsiniz.
\n * \u00c7\u00f6z\u00fcm:<\/strong> Uygulama genelinde tek bir \u00f6rnek olarak sa\u011flanmas\u0131 gereken servisleri AppModule<\/code>‘\u00fcn providers<\/code> dizisinde veya providedIn: 'root'<\/code> ile sa\u011flay\u0131n. Bir servisi sadece belirli bir lazy loaded mod\u00fcle \u00f6zg\u00fc yapmak istiyorsan\u0131z, o mod\u00fcl\u00fcn providers<\/code> dizisinde tan\u0131mlayabilirsiniz, ancak bu durumda di\u011fer mod\u00fcller bu servisin farkl\u0131 bir \u00f6rne\u011fine sahip olacakt\u0131r.
\n* Yanl\u0131\u015f forChild<\/code> \/ forRoot<\/code> Kullan\u0131m\u0131:<\/strong>
\n * Sorun:<\/strong> RouterModule.forRoot()<\/code>‘u birden fazla mod\u00fclde kullanmak veya lazy loaded mod\u00fcllerde RouterModule.forChild()<\/code> yerine forRoot()<\/code> kullanmak beklenmedik y\u00f6nlendirme davran\u0131\u015flar\u0131na veya hatalara yol a\u00e7abilir.
\n * \u00c7\u00f6z\u00fcm:<\/strong> RouterModule.forRoot()<\/code> yaln\u0131zca uygulaman\u0131n k\u00f6k y\u00f6nlendirme mod\u00fcl\u00fcnde (AppRoutingModule<\/code>) bir kez kullan\u0131lmal\u0131d\u0131r. Di\u011fer t\u00fcm \u00f6zellik mod\u00fcllerinde (lazy loaded veya eager loaded olsun) RouterModule.forChild()<\/code> kullan\u0131lmal\u0131d\u0131r.
\n* Yava\u015f Y\u00fckleme S\u00fcreleri (Preloading Olmadan):<\/strong>
\n * Sorun:<\/strong> Lazy loaded mod\u00fcllere ilk navigasyonda belirgin bir gecikme ya\u015fanmas\u0131.
\n * \u00c7\u00f6z\u00fcm:<\/strong> Uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na uygun bir preloading stratejisi uygulay\u0131n. PreloadAllModules<\/code> ile ba\u015flayabilir veya daha \u00f6zelle\u015ftirilmi\u015f bir strateji geli\u015ftirebilirsiniz.<\/p>\nSonu\u00e7<\/h3>\n
Lazy loading, Angular uygulamalar\u0131n\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran vazge\u00e7ilmez bir optimizasyon tekni\u011fidir. Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini k\u0131saltarak, daha k\u00fc\u00e7\u00fck ilk paket boyutlar\u0131 sunarak ve kaynaklar\u0131 daha verimli kullanarak, modern web uygulamalar\u0131n\u0131n beklentilerini kar\u015f\u0131laman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
Do\u011fru mod\u00fcl yap\u0131s\u0131n\u0131 olu\u015fturmak, loadChildren<\/code> \u00f6zelli\u011fini etkin bir \u015fekilde kullanmak ve preloading stratejilerini ak\u0131ll\u0131ca uygulamak, Angular uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 da art\u0131racakt\u0131r. Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, lazy loading’in sundu\u011fu faydalar daha da belirgin hale gelecektir. Bu makaledeki ad\u0131mlar\u0131 ve en iyi uygulamalar\u0131 takip ederek, Angular uygulamalar\u0131n\u0131z\u0131 daha h\u0131zl\u0131, daha duyarl\u0131 ve daha kullan\u0131c\u0131 dostu hale getirebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?\nAngular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve pop\u00fcler bir \u00e7","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-35335","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?\" \/>\n<meta property=\"og:description\" content=\"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve pop\u00fcler bir \u00e7\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-28T09:40:42+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?\",\"datePublished\":\"2025-11-28T09:40:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\"},\"wordCount\":2818,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\",\"name\":\"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-28T09:40:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?","og_description":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve pop\u00fcler bir \u00e7","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-28T09:40:42+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?","datePublished":"2025-11-28T09:40:42+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/"},"wordCount":2818,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/","name":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-28T09:40:42+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulamalarinda-lazy-loading-rotalari-nasil-kullanilir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Uygulamalar\u0131nda Lazy Loading Rotalar\u0131 Nas\u0131l Kullan\u0131l\u0131r?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35335"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35335\/revisions"}],"predecessor-version":[{"id":35336,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35335\/revisions\/35336"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}