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.
  • Projemizde home,user ve user içinde userdetail modüllerini oluşturalım.
  • 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
  • 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.

  • 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.

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store