{"id":36168,"date":"2025-12-09T14:31:22","date_gmt":"2025-12-09T11:31:22","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angular-ui-neden-dagilir-rota-yonetimi-nasil-kurtarir\/"},"modified":"2025-12-09T14:31:22","modified_gmt":"2025-12-09T11:31:22","slug":"angular-ui-neden-dagilir-rota-yonetimi-nasil-kurtarir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-ui-neden-dagilir-rota-yonetimi-nasil-kurtarir\/","title":{"rendered":"Angular UI Neden Da\u011f\u0131l\u0131r? Rota Y\u00f6netimi Nas\u0131l Kurtar\u0131r?"},"content":{"rendered":"

Angular uygulamalar\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) karma\u015fas\u0131yla m\u0131 kar\u015f\u0131la\u015f\u0131yorsunuz? Bu makale, Angular g\u00f6r\u00fcn\u00fcmlerinin temel sorunlar\u0131n\u0131 ve g\u00fc\u00e7l\u00fc rota y\u00f6netiminin bu sorunlar\u0131 nas\u0131l \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc ad\u0131m ad\u0131m inceliyor. Modern web uygulamalar\u0131n\u0131n beklentileri artt\u0131k\u00e7a, karma\u015f\u0131k aray\u00fczler ve dinamik i\u00e7erik y\u00f6netimi, geli\u015ftiriciler i\u00e7in \u00f6nemli zorluklar yarat\u0131yor. Tek Sayfa Uygulamalar\u0131 (SPA) mimarisi bu zorluklar\u0131 a\u015fmada \u00f6nemli avantajlar sunsa da, do\u011fru stratejiler uygulanmad\u0131\u011f\u0131nda kullan\u0131c\u0131 deneyimi h\u0131zla bozulabilir. Peki, Angular UI’\u0131n\u0131z neden beklenmedik \u015fekillerde da\u011f\u0131l\u0131yor ve bu sorunu rota y\u00f6netimi (routing) ile nas\u0131l kal\u0131c\u0131 olarak \u00e7\u00f6zebilirsiniz? Bu yaz\u0131da, bu sorular\u0131n cevaplar\u0131n\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131 ve pratik \u00f6rneklerle ele alaca\u011f\u0131z.<\/p>\n

Giri\u015f: Angular Uygulamalar\u0131nda Kullan\u0131c\u0131 Deneyimi Neden Kritik Bir Noktad\u0131r?<\/h3>\n

G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131 beklentileri hi\u00e7 olmad\u0131\u011f\u0131 kadar y\u00fcksek. Bir web uygulamas\u0131ndan beklenen sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda ak\u0131c\u0131, sezgisel ve hatas\u0131z bir kullan\u0131c\u0131 deneyimidir. H\u0131zl\u0131 y\u00fcklenen sayfalar, kesintisiz gezinme ve her cihazda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm, kullan\u0131c\u0131lar\u0131n bir uygulamay\u0131 benimsemesi veya terk etmesi aras\u0131ndaki fark\u0131 yaratabilir. Angular gibi g\u00fc\u00e7l\u00fc framework’ler, bu beklentileri kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015f olsa da, UI’\u0131n karma\u015f\u0131k yap\u0131s\u0131 ve s\u00fcrekli de\u011fi\u015fen durumlar, geli\u015ftiriciler i\u00e7in potansiyel tuzaklar bar\u0131nd\u0131r\u0131r. \u00d6zellikle b\u00fcy\u00fck ve dinamik Angular uygulamalar\u0131nda, farkl\u0131 g\u00f6r\u00fcn\u00fcmler (views) ve bile\u015fenler (components) aras\u0131ndaki ge\u00e7i\u015fleri y\u00f6netmek, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 do\u011frudan etkiler. Yanl\u0131\u015f bir y\u00f6netim stratejisi, uygulaman\u0131n performans\u0131n\u0131 d\u00fc\u015f\u00fcrebilir, bak\u0131m\u0131n\u0131 zorla\u015ft\u0131rabilir ve en \u00f6nemlisi, kullan\u0131c\u0131lar\u0131n uygulamadan so\u011fumas\u0131na neden olabilir. Bu nedenle, Angular projelerinde kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn neden “da\u011f\u0131lma” e\u011filimi g\u00f6sterdi\u011fini anlamak ve bu sorunu nas\u0131l a\u015faca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenmek hayati \u00f6nem ta\u015f\u0131maktad\u0131r.<\/p>\n

Modern web uygulamalar\u0131, genellikle birden \u00e7ok ekran\u0131 veya farkl\u0131 i\u015flevsellikleri tek bir taray\u0131c\u0131 penceresi i\u00e7inde bar\u0131nd\u0131r\u0131r. Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn listesinden \u00fcr\u00fcn detay\u0131na ge\u00e7mek, bir bankac\u0131l\u0131k uygulamas\u0131nda hesap \u00f6zetinden para transferine gitmek veya bir sosyal medya platformunda ana sayfadan profil sayfas\u0131na ge\u00e7i\u015f yapmak, kullan\u0131c\u0131lar\u0131n al\u0131\u015fk\u0131n oldu\u011fu ak\u0131\u015flard\u0131r. Bu ge\u00e7i\u015flerin her biri, asl\u0131nda farkl\u0131 bir “g\u00f6r\u00fcn\u00fcm” sunar ve bu g\u00f6r\u00fcn\u00fcmlerin sorunsuz bir \u015fekilde y\u00fcklenmesi, de\u011fi\u015ftirilmesi ve durumu korunarak sunulmas\u0131 gerekmektedir. E\u011fer bu ge\u00e7i\u015fler manuel olarak, karma\u015f\u0131k *ngIf<\/code> ko\u015fullar\u0131 veya CSS display<\/code> \u00f6zellikleri ile y\u00f6netilmeye \u00e7al\u0131\u015f\u0131l\u0131rsa, uygulaman\u0131n UI’\u0131 adeta bir “kod spagettisine” d\u00f6n\u00fc\u015febilir. Bu durum, sadece geli\u015ftirme s\u00fcrecini yava\u015flatmakla kalmaz, ayn\u0131 zamanda uygulaman\u0131n hata yapmaya daha yatk\u0131n olmas\u0131na ve performans sorunlar\u0131 ya\u015famas\u0131na neden olur. \u0130\u015fte tam da bu noktada, Angular’\u0131n g\u00fc\u00e7l\u00fc rota y\u00f6netimi sistemi devreye girer ve uygulaman\u0131n UI’\u0131n\u0131 derli toplu, y\u00f6netilebilir ve performansl\u0131 bir \u015fekilde bir araya getirme potansiyeli sunar. \u015eimdi, Angular g\u00f6r\u00fcn\u00fcmlerinin temel ta\u015flar\u0131n\u0131 ve neden bazen bu ta\u015flar\u0131n yerinden oynad\u0131\u011f\u0131n\u0131 daha yak\u0131ndan inceleyelim.<\/p>\n

Angular G\u00f6r\u00fcn\u00fcmleri ve Bile\u015fen Yap\u0131s\u0131: Temel Ta\u015flar Nelerdir?<\/h3>\n

Angular d\u00fcnyas\u0131nda, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) temel yap\u0131 ta\u015f\u0131 bile\u015fenlerdir (components). Her Angular uygulamas\u0131, k\u00f6k bile\u015fenden (AppComponent) ba\u015flayarak hiyerar\u015fik bir a\u011fa\u00e7 yap\u0131s\u0131 olu\u015fturur. Bu bile\u015fenler, kendi HTML \u015fablonlar\u0131, stil bilgileri ve TypeScript mant\u0131klar\u0131 ile uygulaman\u0131n belirli bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder. \u00d6rne\u011fin, bir web sayfas\u0131nda gezinme \u00e7ubu\u011fu, kenar \u00e7ubu\u011fu, ana i\u00e7erik alan\u0131 ve altbilgi gibi farkl\u0131 alanlar, ayr\u0131 ayr\u0131 bile\u015fenler olarak tasarlanabilir. Bu mod\u00fcler yap\u0131, kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r ve karma\u015f\u0131k aray\u00fczlerin daha y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar. Ancak, bu mod\u00fclerli\u011fin faydalar\u0131, bile\u015fenlerin do\u011fru \u015fekilde organize edilmemesi veya aralar\u0131ndaki ge\u00e7i\u015flerin iyi planlanmamas\u0131 durumunda kolayca g\u00f6lgelenebilir.<\/p>\n

Uygulaman\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fc veya “view” dedi\u011fimiz \u015fey, asl\u0131nda bu bile\u015fenlerin belirli bir d\u00fczen i\u00e7inde bir araya gelmesinden ibarettir. \u00d6rne\u011fin, bir “\u00dcr\u00fcn Detay Sayfas\u0131” g\u00f6r\u00fcn\u00fcm\u00fc, ProductImageComponent<\/code>, ProductDescriptionComponent<\/code>, AddToCartButtonComponent<\/code> ve RelatedProductsComponent<\/code> gibi birden \u00e7ok bile\u015fenin birle\u015fimi olabilir. Geli\u015ftiriciler olarak, bu bile\u015fenleri kullanarak sayfan\u0131n farkl\u0131 durumlar\u0131n\u0131 veya “ekranlar\u0131n\u0131” olu\u015ftururuz. Ancak, e\u011fer uygulaman\u0131zda farkl\u0131 “sayfalar” veya “b\u00f6l\u00fcmler” aras\u0131nda ge\u00e7i\u015f yapmak i\u00e7in sadece *ngIf<\/code> direktifleri veya CSS [hidden]<\/code> \u00f6zelliklerini kullan\u0131yorsan\u0131z, potansiyel bir karma\u015faya davetiye \u00e7\u0131kar\u0131yorsunuz demektir.<\/p>\n

Bir e-ticaret uygulamas\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 “Anasayfa”, “\u00dcr\u00fcnler”, “Sepet” ve “\u00d6deme” gibi farkl\u0131 b\u00f6l\u00fcmlere gidebilir. E\u011fer t\u00fcm bu g\u00f6r\u00fcn\u00fcmleri tek bir bile\u015fen i\u00e7inde, \u00f6rne\u011fin AppComponent<\/code> i\u00e7inde y\u00f6netmeye kalkarsan\u0131z, bu bile\u015fenin \u015fablonu devasa boyutlara ula\u015f\u0131r. \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f *ngIf<\/code>‘ler, hangi bile\u015fenin ne zaman g\u00f6r\u00fcnece\u011fini belirlemek i\u00e7in karma\u015f\u0131k ko\u015fullar yarat\u0131r.<\/p>\n

\n<\/app-header>\n\n
\n  <\/app-home-page>\n<\/div>\n\n
\n  <\/app-product-list>\n<\/div>\n\n
\n  <\/app-product-detail>\n<\/div>\n\n
\n  <\/app-cart>\n<\/div>\n\n
\n  <\/app-checkout>\n<\/div>\n\n<\/app-footer><\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki senaryoda, AppComponent<\/code> i\u00e7indeki currentPage<\/code> de\u011fi\u015fkeninin de\u011ferine g\u00f6re farkl\u0131 bile\u015fenler g\u00f6sterilip gizleniyor. Bu yakla\u015f\u0131m, ba\u015flang\u0131\u00e7ta k\u00fc\u00e7\u00fck uygulamalar i\u00e7in i\u015fe yarasa da, uygulama b\u00fcy\u00fcd\u00fck\u00e7e ciddi sorunlara yol a\u00e7ar:<\/p>\n
*   Performans Sorunlar\u0131:<\/strong> *ngIf<\/code> kullan\u0131ld\u0131\u011f\u0131nda, gizlenen bile\u015fenler genellikle DOM'dan kald\u0131r\u0131l\u0131r ve tekrar g\u00f6sterildi\u011finde yeniden olu\u015fturulur. Bu, \u00f6zellikle karma\u015f\u0131k veya veri a\u00e7\u0131s\u0131ndan zengin bile\u015fenler i\u00e7in pahal\u0131 bir i\u015flemdir ve sayfa ge\u00e7i\u015flerinde g\u00f6zle g\u00f6r\u00fcl\u00fcr gecikmelere neden olabilir. Ayr\u0131ca, DOM'da s\u00fcrekli olarak eleman ekleyip \u00e7\u0131karmak, taray\u0131c\u0131 \u00fczerinde ek y\u00fck olu\u015fturur.
\n*   Durum Y\u00f6netimi Zorluklar\u0131:<\/strong> Bir bile\u015fen gizlendi\u011finde, i\u00e7erisindeki t\u00fcm durumu (state) kaybeder. \u00d6rne\u011fin, kullan\u0131c\u0131 bir \u00fcr\u00fcn listesinde belirli bir filtre uygulad\u0131ktan sonra ba\u015fka bir sayfaya gidip geri d\u00f6nd\u00fc\u011f\u00fcnde, filtre ayarlar\u0131n\u0131n s\u0131f\u0131rlanm\u0131\u015f oldu\u011funu g\u00f6rebilir. Bu, k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7ar. Durumu manuel olarak saklamak ve geri y\u00fcklemek ise kod karma\u015fas\u0131n\u0131 art\u0131r\u0131r.
\n*   URL B\u00fct\u00fcnl\u00fc\u011f\u00fc Eksikli\u011fi:<\/strong> Taray\u0131c\u0131 URL'si, uygulaman\u0131n mevcut durumunu yans\u0131tmaz. Kullan\u0131c\u0131 bir sayfay\u0131 yer imlerine ekleyemez, ba\u011flant\u0131y\u0131 payla\u015famaz veya taray\u0131c\u0131n\u0131n geri\/ileri tu\u015flar\u0131n\u0131 bekledi\u011fi gibi kullanamaz. Bu, bir web uygulamas\u0131n\u0131n temel beklentilerinden birini kar\u015f\u0131lamad\u0131\u011f\u0131 anlam\u0131na gelir.
\n*   Bak\u0131m Zorlu\u011fu:<\/strong> Tek bir bile\u015fen i\u00e7inde y\u00fczlerce sat\u0131r HTML ve TypeScript mant\u0131\u011f\u0131 olmas\u0131, kodu anlamay\u0131, hata ay\u0131klamay\u0131 ve yeni \u00f6zellikler eklemeyi kabusa \u00e7evirir. Kod karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, yeni hatalar\u0131n ortaya \u00e7\u0131kma olas\u0131l\u0131\u011f\u0131 da y\u00fckselir.<\/p>\n
Bu sorunlar, uygulaman\u0131n UI'\u0131n\u0131n \"da\u011f\u0131lmas\u0131na\" neden olur; yani, beklenen ak\u0131c\u0131l\u0131\u011f\u0131 ve tutarl\u0131l\u0131\u011f\u0131 sa\u011flayamaz, performans d\u00fc\u015fer ve geli\u015ftiriciler i\u00e7in y\u00f6netim zorlu\u011fu yarat\u0131r. \u0130\u015fte bu noktada, Angular'\u0131n yerle\u015fik rota y\u00f6netimi sistemi, bu t\u00fcr sorunlar\u0131 k\u00f6k\u00fcnden \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n
Tek Sayfa Uygulamalar\u0131nda (SPA) Gezinme Zorluklar\u0131: UI Karma\u015fas\u0131 Nas\u0131l Ba\u015flar?<\/h3>\n
Tek Sayfa Uygulamalar\u0131 (SPA), modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Bir SPA, kullan\u0131c\u0131ya taray\u0131c\u0131da tek bir HTML sayfas\u0131 y\u00fcklendi\u011fi izlenimi verir ve daha sonra i\u00e7erik, JavaScript arac\u0131l\u0131\u011f\u0131yla dinamik olarak g\u00fcncellenir. Bu yakla\u015f\u0131m, geleneksel \u00e7ok sayfal\u0131 uygulamalara g\u00f6re daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar \u00e7\u00fcnk\u00fc her etkile\u015fimde t\u00fcm sayfan\u0131n yeniden y\u00fcklenmesi gerekmez. Ancak, bu ak\u0131c\u0131l\u0131\u011f\u0131n bir bedeli vard\u0131r: uygulaman\u0131n farkl\u0131 \"ekranlar\u0131\" veya \"b\u00f6l\u00fcmleri\" aras\u0131nda gezinme mant\u0131\u011f\u0131n\u0131 dikkatli bir \u015fekilde y\u00f6netmek zorunludur. E\u011fer bu y\u00f6netim do\u011fru yap\u0131lmazsa, SPA'n\u0131n getirdi\u011fi avantajlar dezavantajlara d\u00f6n\u00fc\u015febilir ve UI karma\u015fas\u0131 ka\u00e7\u0131n\u0131lmaz hale gelir.<\/p>\n
UI karma\u015fas\u0131 genellikle, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini g\u00f6stermek veya gizlemek i\u00e7in *ngIf<\/code> veya [hidden]<\/code> gibi yap\u0131sal direktiflerin a\u015f\u0131r\u0131 kullan\u0131m\u0131yla ba\u015flar. Ba\u015flang\u0131\u00e7ta k\u00fc\u00e7\u00fck \u00f6l\u00e7ekli projelerde bu pratik, h\u0131zl\u0131 prototipleme i\u00e7in uygun ve kolay g\u00f6r\u00fcnebilir. \u00d6rne\u011fin, bir \"Ayarlar\" sayfas\u0131nda \"Profil Bilgileri\", \"G\u00fcvenlik\" ve \"Bildirimler\" gibi \u00fc\u00e7 farkl\u0131 sekme aras\u0131nda ge\u00e7i\u015f yapt\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcnelim. Her sekmeyi ayr\u0131 bir bile\u015fen olarak tasarlayabilir ve aktif sekmeye g\u00f6re ilgili bile\u015feni *ngIf<\/code> ile g\u00f6sterebilirsiniz.<\/p>\n
\n