27 Temmuz 2025 Pazar

Routing

  Routing: Bir componentten (sayfadan) diğer componenete geçiş yapabilmek için Angular Router Modulünden faydalanırız.

  • Adres çubuğuna yazılan URL üzerinden belirlie componentlere gitme
  • Componenet'e query string değerlerini gönderme
  • Browser'ın ileri ve geri düğmelerini aktifleştirme
  • Dinamik olarak component yükleme
  • Rotalar üzerinde yetki kontolü gerçekleştirme (Guard yapısı)
Angular Router Yapılanması

1-) Uygulamanın index.html doyasının <head> bölümü içerisine aşağıdaki 6.satırdaki gibi tanımlama yapılır.

2-) Componentler için rotaların tanımlanması. app-routing-module.ts




4-) Router Link üzerinen istenilen noktaya link oluşturulur. ve Rotayla eşleşen componenetin yükleneceği alanı belirtmemiz gerekir.(<router-outlet>



Route Parameter
URL üzerinde veri taşımamızı sağlar

İstek yapılan URL ile eşleşen sayfaya biryandan da ekstradan URL üzerinden veri taşıyabilmemizi sağlayan yapıdır.Aşağıda solda tüm productlar gelirken sağ tarafta sadece URL üzerindeki 2 değerine karşılık product'ı elde edip listeleyebiliyoruz.




URL'deki route parametresini(urldeki 2 değeri) component içerisinde elde etmek için asağıdaki yaklaşımı sergileriz.


yada aşağıdaki gibi en doğru çözüm 



Child Routes/ Nested Routes






Query String
URL üzerinde veri taşımamızı sağlar.





kaynak : Link


Hiç yorum yok:

Yorum Gönder