<\/router-outlet>\n<\/div><\/code><\/pre>\nrouterLink<\/code> direktiflerinde g\u00f6receli yollar kulland\u0131\u011f\u0131m\u0131za dikkat edin (general<\/code>, orders<\/code>, addresses<\/code>). Bu, profile<\/code> rotas\u0131n\u0131n alt\u0131nda olduklar\u0131 i\u00e7in Angular Router’\u0131n otomatik olarak \/profile\/general<\/code>, \/profile\/orders<\/code> gibi tam yollar\u0131 olu\u015fturmas\u0131n\u0131 sa\u011flar.<\/p>\nBo\u015f Yol (Empty Path) ve Varsay\u0131lan Alt Rota<\/h4>\n
Bir ana rotaya gidildi\u011finde (\u00f6rn: \/profile<\/code>), varsay\u0131lan olarak belirli bir alt rotan\u0131n y\u00fcklenmesini isteyebiliriz (\u00f6rn: \/profile\/general<\/code>). Bunu sa\u011flamak i\u00e7in, children<\/code> dizisinde bo\u015f bir path<\/code> ile bir redirectTo<\/code> kural\u0131 kullan\u0131r\u0131z.<\/p>\n\/\/ app-routing.module.ts (UserProfileComponent'in children rotalar\u0131)\nchildren: [\n { path: '', redirectTo: 'general', pathMatch: 'full' }, \/\/ Varsay\u0131lan alt rota\n { path: 'general', component: GeneralInfoComponent },\n { path: 'orders', component: OrderHistoryComponent },\n { path: 'addresses', component: AddressesComponent }\n]<\/code><\/pre>\nBu yap\u0131land\u0131rma ile, kullan\u0131c\u0131 \/profile<\/code> adresine gitti\u011finde, Angular Router otomatik olarak \/profile\/general<\/code> adresine y\u00f6nlendirecek ve GeneralInfoComponent<\/code>‘i y\u00fckleyecektir. pathMatch: 'full'<\/code> \u00f6zelli\u011fi, bo\u015f yolun sadece tam olarak e\u015fle\u015fti\u011finde (yani ba\u015fka bir \u015fey olmad\u0131\u011f\u0131nda) y\u00f6nlendirmeyi tetiklemesini sa\u011flar.<\/p>\nParametreli Alt Rotalar<\/h3>\n
\u00c7o\u011fu zaman, alt rotalar\u0131n belirli bir kayna\u011f\u0131n detaylar\u0131n\u0131 g\u00f6stermesi gerekir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sipari\u015f ge\u00e7mi\u015fini g\u00f6r\u00fcnt\u00fclerken, belirli bir sipari\u015fin detaylar\u0131n\u0131 g\u00f6rmek i\u00e7in \/profile\/orders\/123<\/code> gibi bir URL yap\u0131s\u0131 kullanmak isteyebiliriz. Burada 123<\/code>, sipari\u015f ID’sidir.<\/p>\nParametreli rotalar, path<\/code> i\u00e7inde iki nokta \u00fcst \u00fcste (:<\/code>) ile belirtilir:<\/p>\nchildren: [\n \/\/ ... di\u011fer alt rotalar\n { path: 'orders', component: OrderHistoryComponent },\n { path: 'orders\/:orderId', component: OrderDetailComponent } \/\/ Parametreli alt rota\n]<\/code><\/pre>\nBu durumda, \/profile\/orders\/123<\/code> adresine gidildi\u011finde OrderDetailComponent<\/code> y\u00fcklenecektir. OrderDetailComponent<\/code> i\u00e7inde ActivatedRoute<\/code> servisini kullanarak bu parametreye eri\u015febiliriz:<\/p>\n\/\/ order-detail.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({\n selector: 'app-order-detail',\n template: \n Sipari\u015f Detay\u0131: {{ orderId }}<\/h3>\n \n <\/code>\n})\nexport class OrderDetailComponent implements OnInit {\n orderId: string | null = null;\n\n constructor(private route: ActivatedRoute) { }\n\n ngOnInit():\n this.route.paramMap.subscribe(params => {\n this.orderId = params.get('orderId');\n });\n\n \/\/ Veya snapshot kullanarak (sadece bir kez okunacaksa)\n \/\/ this.orderId = this.route.snapshot.paramMap.get('orderId');\n }\n}<\/code><\/pre>\n
paramMap<\/code> bir Observable<\/code> d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, rota parametreleri de\u011fi\u015fti\u011finde (\u00f6rne\u011fin, ayn\u0131 bile\u015fende \/orders\/123<\/code>‘ten \/orders\/456<\/code>‘ya ge\u00e7i\u015f yap\u0131ld\u0131\u011f\u0131nda) bile\u015fen g\u00fcncellenebilir. snapshot<\/code> ise parametreleri sadece bile\u015fen ilk y\u00fcklendi\u011finde okur.<\/p>\nAna rotadan alt rotalara parametre ge\u00e7irme de m\u00fcmk\u00fcnd\u00fcr. \u00d6rne\u011fin, \/users\/:userId\/profile<\/code> gibi bir yap\u0131da, profile<\/code> alt rotas\u0131 userId<\/code> parametresine eri\u015febilir. Bu durumda, alt bile\u015fen ActivatedRoute<\/code> \u00fczerinden hem kendi parametrelerine hem de \u00fcst rotan\u0131n parametrelerine eri\u015febilir.<\/p>\n\/\/ user-profile.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({\n selector: 'app-user-profile',\n template: \n Kullan\u0131c\u0131 Profili: {{ userId }}<\/h2>\n <\/router-outlet>\n <\/code>\n})\nexport class UserProfileComponent implements OnInit {\n userId: string | null = null;\n\n constructor(private route: ActivatedRoute) { }\n\n ngOnInit(): void {\n this.route.paramMap.subscribe(params => {\n this.userId = params.get('userId'); \/\/ Ana rotan\u0131n parametresine eri\u015fim\n });\n }\n}<\/code><\/pre>\nBu senaryoda, app-routing.module.ts<\/code>‘deki ana rota tan\u0131m\u0131 \u015f\u00f6yle olabilir:<\/p>\n{\n path: 'users\/:userId', \/\/ Ana rota parametresi\n component: UserProfileComponent,\n children: [\n { path: 'profile-info', component: UserProfileInfoComponent },\n \/\/ ... di\u011fer alt rotalar\n ]\n}<\/code><\/pre>\nUserProfileInfoComponent<\/code> i\u00e7inde de ActivatedRoute<\/code> kullanarak userId<\/code> parametresine eri\u015filebilir. Angular Router, \u00fcst rotalar\u0131n parametrelerini alt rotalara otomatik olarak miras b\u0131rak\u0131r.<\/p>\nMod\u00fcler Yap\u0131 ve Lazy Loading ile Alt Rotalar<\/h3>\n
B\u00fcy\u00fck Angular uygulamalar\u0131nda, t\u00fcm uygulaman\u0131n tek bir mod\u00fclde ve tek bir paket olarak y\u00fcklenmesi performans\u0131 olumsuz etkileyebilir. Bu sorunu \u00e7\u00f6zmek i\u00e7in Angular, “\u00f6zellik mod\u00fclleri” (feature modules) ve “tembel y\u00fckleme” (lazy loading) kavramlar\u0131n\u0131 sunar. Alt rotalar, bu mekanizmalarla birlikte kullan\u0131ld\u0131\u011f\u0131nda uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
Feature Mod\u00fclleri ve Alt Rotalar<\/h4>\n
Bir \u00f6zellik mod\u00fcl\u00fc, belirli bir uygulama alan\u0131na (\u00f6rn: Y\u00f6netici Paneli, \u00dcr\u00fcnler, Kullan\u0131c\u0131lar) ait bile\u015fenleri, servisleri ve rotalar\u0131 bir araya getiren bir NgModule<\/code>‘d\u00fcr. Her \u00f6zellik mod\u00fcl\u00fc kendi y\u00f6nlendirme mod\u00fcl\u00fcne (FeatureRoutingModule<\/code>) sahip olabilir. Bu mod\u00fcl, RouterModule.forChild(routes)<\/code> kullanarak kendi rotalar\u0131n\u0131 tan\u0131mlar.<\/p>\n\u00d6rnek olarak bir AdminModule<\/code> ve onun alt\u0131ndaki rotalar\u0131 ele alal\u0131m:<\/p>\nng generate module admin --routing<\/code><\/pre>\nBu komut, AdminModule<\/code> ve AdminRoutingModule<\/code>‘i olu\u015fturur.<\/p>\n\/\/ admin-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { AdminDashboardComponent } from '.\/admin-dashboard\/admin-dashboard.component';\nimport { ManageUsersComponent } from '.\/manage-users\/manage-users.component';\nimport { ManageProductsComponent } from '.\/manage-products\/manage-products.component';\n\nconst routes: Routes = [\n {\n path: '', \/\/ Admin mod\u00fcl\u00fcn\u00fcn k\u00f6k yolu\n component: AdminDashboardComponent,\n children: [\n { path: 'users', component: ManageUsersComponent },\n { path: 'products', component: ManageProductsComponent },\n { path: '', redirectTo: 'users', pathMatch: 'full' } \/\/ Admin mod\u00fcl\u00fcn\u00fcn varsay\u0131lan alt rotas\u0131\n ]\n }\n];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)], \/\/ forChild kullan\u0131yoruz\n exports: [RouterModule]\n})\nexport class AdminRoutingModule { }<\/code><\/pre>\nBu AdminRoutingModule<\/code>, AdminModule<\/code> i\u00e7inde i\u00e7e aktar\u0131l\u0131r. Ana AppRoutingModule<\/code> ise bu AdminModule<\/code>‘\u00fc tembel y\u00fckleme (lazy loading) ile y\u00fckler.<\/p>\nLazy Loading (Tembel Y\u00fckleme) ile Alt Rotalar<\/h4>\n
Tembel y\u00fckleme, bir mod\u00fcl\u00fcn ve onunla ili\u015fkili t\u00fcm bile\u015fenlerin ve rotalar\u0131n, yaln\u0131zca kullan\u0131c\u0131 o mod\u00fcl\u00fcn rotas\u0131na gitti\u011finde y\u00fcklenmesini sa\u011flar. Bu, uygulaman\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Alt rotalarla birlikte kullan\u0131ld\u0131\u011f\u0131nda, belirli bir ana b\u00f6l\u00fcm\u00fcn t\u00fcm alt rotalar\u0131, yaln\u0131zca ana b\u00f6l\u00fcm\u00fcn rotas\u0131na gidildi\u011finde y\u00fcklenir.<\/p>\n
AppRoutingModule<\/code> i\u00e7inde loadChildren<\/code> \u00f6zelli\u011fini kullanarak bir mod\u00fcl\u00fc tembel y\u00fckleyebiliriz:<\/p>\n\/\/ app-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { HomeComponent } from '.\/home\/home.component';\n\nconst routes: Routes = [\n { path: '', component: HomeComponent },\n {\n path: 'admin',\n loadChildren: () => import('.\/admin\/admin.module').then(m => m.AdminModule)\n },\n { path: '<\/em>', redirectTo: '' }\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }<\/code><\/pre>\nBu yap\u0131land\u0131rma ile:
\n1. Kullan\u0131c\u0131 \/admin<\/code> adresine gitti\u011finde, admin.module.ts<\/code> dosyas\u0131 ve i\u00e7indeki t\u00fcm bile\u015fenler, servisler ve AdminRoutingModule<\/code> (kendi alt rotalar\u0131yla birlikte) dinamik olarak y\u00fcklenir.
\n2. AdminRoutingModule<\/code> i\u00e7inde tan\u0131mlanan alt rotalar (\u00f6rn: users<\/code>, products<\/code>), \/admin\/users<\/code> veya \/admin\/products<\/code> gibi URL’ler arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir hale gelir.
\n3. AdminModule<\/code> y\u00fcklenene kadar, bu mod\u00fcl\u00fcn kodu uygulama paketine dahil edilmez, bu da ilk y\u00fckleme boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\nBu yakla\u015f\u0131m, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n performans\u0131n\u0131 ve y\u00f6netilebilirli\u011fini art\u0131rmak i\u00e7in end\u00fcstri standard\u0131 bir y\u00f6ntemdir.<\/p>\n
Alt Rotalarda Router Outlet \u0130simlendirmesi (Named Outlets)<\/h3>\n
\u00c7o\u011fu durumda, uygulaman\u0131n ana \u015fablonunda veya bir ana bile\u015fenin \u015fablonunda tek bir <\/code> yeterlidir. Ancak, bazen ayn\u0131 anda birden fazla ba\u011f\u0131ms\u0131z rota g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc g\u00f6r\u00fcnt\u00fclemek gerekebilir. \u00d6rne\u011fin, ana i\u00e7eri\u011fin yan\u0131nda bir sohbet penceresi veya bir bildirim pop-up’\u0131 gibi “yard\u0131mc\u0131 rotalar” (auxiliary routes) g\u00f6stermek isteyebilirsiniz. Bu t\u00fcr senaryolar i\u00e7in “isimli \u00e7\u0131k\u0131\u015flar” (named outlets) kullan\u0131l\u0131r.<\/p>\nBir <\/code> etiketine name<\/code> \u00f6zelli\u011fi ekleyerek ona bir isim verebiliriz:<\/p>\n\n<\/router-outlet> \n<\/router-outlet> <\/code><\/pre>\nDaha sonra, rota yap\u0131land\u0131rmas\u0131nda outlet<\/code> \u00f6zelli\u011fini kullanarak belirli bir rotay\u0131 bu isimli \u00e7\u0131k\u0131\u015fa y\u00f6nlendirebiliriz:<\/p>\nconst routes: Routes = [\n \/\/ ... di\u011fer rotalar\n { path: 'messages', component: MessagesComponent, outlet: 'popup' }\n];<\/code><\/pre>\nBu rota, ana router-outlet<\/code>‘i etkilemeden \/messages<\/code> yolunu popup<\/code> isimli router-outlet<\/code>‘e y\u00fckler. Bir isimli \u00e7\u0131k\u0131\u015fa gitmek i\u00e7in routerLink<\/code> kullan\u0131rken, { outlets: { popup: 'messages' } }<\/code> gibi bir s\u00f6zdizimi kullan\u0131l\u0131r. URL’de ise bu (\/popup:messages)<\/code> \u015feklinde g\u00f6r\u00fcn\u00fcr.<\/p>\n\u0130simli \u00e7\u0131k\u0131\u015flar, alt rotalarla do\u011frudan ilgili olmasa da, bir bile\u015fenin i\u00e7inde birden fazla ba\u011f\u0131ms\u0131z alt g\u00f6r\u00fcn\u00fcm\u00fc y\u00f6netme ihtiyac\u0131n\u0131 kar\u015f\u0131lad\u0131\u011f\u0131 i\u00e7in alt rota kavram\u0131n\u0131n bir uzant\u0131s\u0131 olarak d\u00fc\u015f\u00fcn\u00fclebilir. \u00d6zellikle, bir ana rotan\u0131n i\u00e7eri\u011fi de\u011fi\u015fmeden bir alt pencerenin veya yan panelin dinamik olarak y\u00fcklenmesi gerekti\u011finde faydal\u0131d\u0131r.<\/p>\n
Yayg\u0131n Hatalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
Alt rotalarla \u00e7al\u0131\u015f\u0131rken kar\u015f\u0131la\u015f\u0131labilecek baz\u0131 yayg\u0131n sorunlar ve bunlara y\u00f6nelik ipu\u00e7lar\u0131:<\/p>\n
* Ana Bile\u015fende router-outlet<\/code> Unutulmas\u0131:<\/strong> Alt rotalar\u0131n bile\u015fenleri, ana bile\u015fenin \u015fablonundaki router-outlet<\/code> i\u00e7inde g\u00f6r\u00fcnt\u00fclenir. E\u011fer ana bile\u015fende bu etiket yoksa, alt rota bile\u015fenleri ekranda g\u00f6r\u00fcnmez.
\n* Yanl\u0131\u015f G\u00f6receli Yollar:<\/strong> routerLink<\/code> kullan\u0131rken veya redirectTo<\/code> tan\u0131mlarken g\u00f6receli yollar\u0131 (.\/<\/code> veya do\u011frudan alt yol ad\u0131) do\u011fru kullanmak \u00f6nemlidir. Bazen mutlak yollar (\/<\/code>) kullan\u0131lmas\u0131 gerekti\u011fi durumlarda g\u00f6receli yollar hata verebilir.
\n* pathMatch<\/code> Karma\u015fas\u0131:<\/strong> pathMatch: 'full'<\/code> ve pathMatch: 'prefix'<\/code> aras\u0131ndaki fark\u0131 anlamak \u00f6nemlidir. Varsay\u0131lan de\u011fer prefix<\/code>‘tir, yani URL’nin sadece ba\u015flang\u0131c\u0131n\u0131n e\u015fle\u015fmesi yeterlidir. full<\/code> ise t\u00fcm URL’nin tam olarak e\u015fle\u015fmesini gerektirir. \u00d6zellikle bo\u015f yollar (path: ''<\/code>) veya redirectTo<\/code> kurallar\u0131 i\u00e7in pathMatch: 'full'<\/code> genellikle gereklidir.
\n* redirectTo<\/code> D\u00f6ng\u00fcleri:<\/strong> Yanl\u0131\u015f redirectTo<\/code> tan\u0131mlamalar\u0131 sonsuz y\u00f6nlendirme d\u00f6ng\u00fclerine yol a\u00e7abilir. \u00d6rne\u011fin, bir rotan\u0131n kendini veya kendisini i\u00e7eren bir rotay\u0131 y\u00f6nlendirmesi.
\n* ActivatedRoute<\/code> Snapshot vs. Observable:<\/strong> Rota parametrelerine eri\u015firken, route.snapshot.paramMap.get()<\/code> yaln\u0131zca bile\u015fen ilk y\u00fcklendi\u011finde parametreleri al\u0131r. E\u011fer ayn\u0131 bile\u015fen i\u00e7inde rota parametreleri de\u011fi\u015firse (\u00f6rn: \/users\/1<\/code>‘den \/users\/2<\/code>‘ye ge\u00e7i\u015f), bile\u015fenin g\u00fcncellenmesi i\u00e7in route.paramMap.subscribe()<\/code> kullanarak bir g\u00f6zlemlenebilir nesneye abone olmak gerekir.
\n* Mod\u00fcl \u0130\u00e7e Aktarma Hatalar\u0131:<\/strong> Tembel y\u00fckleme yaparken, loadChildren<\/code> i\u00e7inde do\u011fru mod\u00fcl yolunu ve mod\u00fcl s\u0131n\u0131f ad\u0131n\u0131 belirtmek \u00e7ok \u00f6nemlidir (.then(m => m.AdminModule)<\/code> k\u0131sm\u0131nda).<\/p>\nSonu\u00e7<\/h3>\n
Angular Router’da alt rotalar\u0131n tan\u0131mlanmas\u0131, karma\u015f\u0131k ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Uygulaman\u0131n hiyerar\u015fik yap\u0131s\u0131n\u0131 URL’lere yans\u0131tarak hem geli\u015ftiriciler i\u00e7in kodun okunabilirli\u011fini ve y\u00f6netilebilirli\u011fini art\u0131r\u0131r hem de kullan\u0131c\u0131lar i\u00e7in daha sezgisel ve tutarl\u0131 bir navigasyon deneyimi sunar.<\/p>\n
Mod\u00fcler yap\u0131land\u0131rma, parametre ge\u00e7i\u015fi ve \u00f6zellikle tembel y\u00fckleme ile birle\u015fti\u011finde, alt rotalar Angular uygulamalar\u0131n\u0131n performans\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Do\u011fru alt rota stratejileri benimsemek, Angular projenizin uzun vadede s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve ba\u015far\u0131s\u0131n\u0131 garantileyecektir. Bu makalede ele al\u0131nan kavramlar\u0131 ve \u00f6rnekleri kullanarak, siz de Angular uygulamalar\u0131n\u0131zda g\u00fc\u00e7l\u00fc ve esnek y\u00f6nlendirme yap\u0131lar\u0131 olu\u015fturabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Router: Alt Rota Tan\u0131mlamas\u0131\nAngular uygulamalar\u0131, tek sayfal\u0131k uygulama (Single Page Application – SPA) mimarisinin g\u00fcc\u00fcn\u00fc kullanarak","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-34825","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Angular Router: Alt Rota Tan\u0131mlamas\u0131 - 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-router-alt-rota-tanimlamasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Router: Alt Rota Tan\u0131mlamas\u0131\" \/>\n<meta property=\"og:description\" content=\"Angular Router: Alt Rota Tan\u0131mlamas\u0131 Angular uygulamalar\u0131, tek sayfal\u0131k uygulama (Single Page Application - SPA) mimarisinin g\u00fcc\u00fcn\u00fc kullanarak\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-22T10:40:40+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=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Router: Alt Rota Tan\u0131mlamas\u0131\",\"datePublished\":\"2025-11-22T10:40:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\"},\"wordCount\":2186,\"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-router-alt-rota-tanimlamasi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\",\"name\":\"Angular Router: Alt Rota Tan\u0131mlamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-22T10:40:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Router: Alt Rota Tan\u0131mlamas\u0131\"}]},{\"@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 Router: Alt Rota Tan\u0131mlamas\u0131 - 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-router-alt-rota-tanimlamasi\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Router: Alt Rota Tan\u0131mlamas\u0131","og_description":"Angular Router: Alt Rota Tan\u0131mlamas\u0131 Angular uygulamalar\u0131, tek sayfal\u0131k uygulama (Single Page Application - SPA) mimarisinin g\u00fcc\u00fcn\u00fc kullanarak","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-22T10:40:40+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Router: Alt Rota Tan\u0131mlamas\u0131","datePublished":"2025-11-22T10:40:40+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/"},"wordCount":2186,"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-router-alt-rota-tanimlamasi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/","name":"Angular Router: Alt Rota Tan\u0131mlamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-22T10:40:40+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-router-alt-rota-tanimlamasi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Router: Alt Rota Tan\u0131mlamas\u0131"}]},{"@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\/34825","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=34825"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34825\/revisions"}],"predecessor-version":[{"id":34826,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34825\/revisions\/34826"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}