Angular Rouiting Örneği

Angular Rouiting Örneği

Angular Rouiting Örneği yazımla Angular konusunda da sizlere bildiklerimi aktarmaya çalışacağım. İşlemlere geçmeden önce Angular Rouiting nedir ona bakalım.

Angular Rouiting

Bildiğiniz üzre Angular SPA yapısı ile çalışıyor. Yani routing(yönlendirme) yaptığımız sayfalar için ayrı ayrı HTML sayfalara yönlendirmiyor. Peki tek bir index ile çalışan ancak farklı farklı kompanentlere sahip olan Angular’da yönlendirme işlemini nasıl gerçekleştireceğiz? Angular bu işlemi gerçekleştirmek için her modülü index.html içinde çağırıyor. Böylece projemizde bir uzantıya gitmek istediğimizde projeadı/ ‘ dan sonra istediğimiz modülün adını yazıyor ve gerisini Angular’a bırakıyoruz. Ancak işi sahibine teslim etmeden önce biz hangi işlemleri gerçekleştiriyoruz şimdi ona bakalım.

Routing İşlemleri

• Öncelikle bu işlem için ben yeni bir proje oluşturdum ve adını “routingApp” olarak belirledim.
• Eğer sizlerde benim gibi yeni bir proje oluşturacaksınız aşağıdaki görselde olduğu gibi projenize routing yapısını eklemek için size sorulan soruya yes demelisiniz
• Eğer var olan bir projenizde kullanmak istiyorsanız aşağıdaki kodu kullanarak projenize “app-routing.module.ts” dosyasını ekleyebilirsiniz. Bu dosya src>app altında oluşturulacaktır.

• Ben yeni proje oluşturduğum için kendi örnek senaryom üzerinden anlatıma devam edeceğim.
• Projemizde home,user ve user içinde userdetail modüllerini oluşturalım.

• Ekledikten sonra yukarıda ki gibi bir görüntü elde ediyoruz.
• Oluşturmuş olduğumuz bu modülleri app-routing.module.ts dosyamızda hangi url-adrese karşılık gelecek bunun tanımını yapalım.

app-routing.module.ts

• Görselde neler yaptık açıklayayım. Angular, Projeadi/modüladi şeklinde yönlendirme yapıyor demiştik. Ancak bu yönlendirmeleri yaparken /modüladi kısmı için bizden bir tanımlama bekliyor. Bu tanımlamayı yaparken path ve component terimlerini kullanıyoruz.
• Path kısmı /modüladi’na denk geliyor. Örneğin url kısmına Angular/home yazıldığında ilgili modülün devreye girdiğini görürüz. Ancak path burada sadace yönlendirme için alias yani takma ad görevi görüyor diyebiliriz.
• Component kısmı ise çalışacak modüldür. Yani biz, kullanıcı Projemiz / home dediğinde hangi modülün açılmasını istiyorsak onu Component kısmına yazarız.
• Görseli dikkatli incelerseniz userdetail modülü için path kısmına user/:id yazdığımı görebilirsiniz. Burada yapmak istediğim işlem user modülünün altında olan userdetail sayfasına giderken -mantıken- kullanıcın id yani kendisine tanımlanmış benzersiz anahtarına erişmek. Bu şekilde örneğin id’i 5 olan kullanıcıya gittiğimde sadece o kullanıcının bilgilerini rahatlıkla görebilirim.
• Bir diğer dikkat çekici konu ise path içindeki ** sembolleri. Bu semboller eğer kullanıcı bu tanımlamalar dışında yanlış bir adrese gitmek isterse onu yönlendireceğimiz modülü seçmek için kullanıyoruz. Örneğin kullanıcı projemiz/example dediğinde bu modül,sayfa bizde mevcut olmadığı için home modülüne yönlendiriyorum. Sizler 404 sayfası oluşturup oraya da yönlendirebilirsiniz.

Bütün bunları yaptıktan sonra işlemlerimiz bitiyor mu?

HAYIR! Çünkü app-component.html üzerinde yönlendirme için bazı operasyonlar yapacağız. Ben kendi html dosyamda aşağıdaki yapıyı oluşturdum.

Yapıyı incelerseniz ilgili başlıklara tıklandığında yönlendirmeyi yapması için “routerLink” kullandığımı görebilirsiniz. routerLink yazdıktan sonra path kısmında modülümüz için tanımladığımız takma adı yazmamız yeterli.

• Dikkatinizi çekmek istediğim başlıklardan biri şu; Yorum satırı içerisinde ki kodlar eğer bir user sınıfına sahipseniz kullanabilirsiniz. Ancak ben böyle bir sınıf oluşturmadım. Yine de sizlerin görmesi adına yorum satırları içerisinde eğer id alanına sahip bir user sınıfınız varsa routerLink kısmını nasıl bağlayabilirsiniz göstermek istedim.
• Tüm bunların yanı sıra yönlendirme işlemini yapabilmek için <router-outlet> yapısını da eklememiz gerekiyor. Gerekli yönlendirmeleri sağlayan bu yapı olmazsa routing işlemi gerçekleşmez.

Son olarak yaptığımız işlemler sonucunda nasıl bir çıktı elde ettik derseniz onu da aşağıda bulabilirsiniz. Umarım bir junior developerin yazmaya ve anlatmaya çalıştığı bu yazı sizler için faydalı olur.

Bu yazıyı yazarken yeni yıla yani 2021'e girdik. Herkes için bu yeni yılın güzellikler,iyilikler,mutluluklar ve esenlikler getirmesini diliyorum. Yeni yılınızda kutlu olsun :=)