Angular’da Routing İşlemleri

Routing işlemi, uygulamanız içerisinde tek sayfa üzerinde farklı sayfaları ve dinamik olarak bölüm güncellemelerine olanak sağlar. Diğer bir özelliği ise projede dağıtık bir mimari oluşturmayı sağlıyarak, yönetilebilirliği ve erişim kolaylığı sağlamasıdır.

En basit haliyle anlatmak istersem, uygulamayı çeşitli sayfalara ayırarak, herbirini farklı controllerlara bağlamak için kullanılır.

Angular’da Routing kullanımı için app.module.ts dosyasında öncelikle Router Modül’ünü eklemeniz ve kullanacağınızı belirtmeniz gerekmektedir. Bunun için app.module.ts dosyasında

satırı yazılarak dosya eklenmelidir. Kullanım için de NgModule’deki imports hanesinde kullanılacağı belirtilmelidir.

Sonuç olarak app.module.ts aşağıdaki gibi düzenlenmiş olur.

angular_routing_genel_tanim_01

ÖNEMLİ NOT:  Projeniz eğer çok büyük çaplı ise, tüm routing işlemlerinizi ayrı bir modülde toparlayıp buraya yine ekleyebilirsiniz.

Tek sayfa içerisinde sayfa yenilemek için öncelikle diğer sayfaların component’lerini oluşturunuz. (Component’ler hakkında detaylı bilgiyi buradan erişebilirsiniz.)
Daha sonra bu component’leri aşağıdaki gibi bir değişken üzerinden sayfaya tanımlayınız.

angular_routing_genel_tanim_02

Kullanacağınız routing değişkenlerini import ettiğiniz RouterModule modülü üzerinden root tanımı ile işlemi tamamlayınız.

Eğer routing üzerinden component’e bir değişken aktarmak istiyorsanız örnek path olarak  “detail/:id” tanımlayabilir ve id değişkenini ilgili component’e gönderebilirsiniz. Birden fazla değişken aktarmak için ise benzer şekilde değişkenleri çoğaltabilirsiniz; “detail/:id/:title”

angular_routing_genel_tanim_03

HTML tarafında ise yapmanız gereken tek şey ana uygulamamızın HTML’ini barındıran app.component.html dosyasında uygun bir yerine

etiket bloğunu eklemeniz olacaktır. Böylece hemen bu etiketin altına değişkende tanımladığınız component’ler görüntülenebilir.
İstediğiniz component’e link verebilmek için <a> etiketinde href özelliği yerine routerlink kullanmanız yeterli olacaktır.

Routing tanımlı bağlantılara (link’lere) aktif class (current class) tanımı nasıl yapılır?

Bu işlem için sadece yine <a> etiketine routerLinkActive özelliği eklemeniz yeterli olacaktır. Bu özelliğe değer olarakta aktif link’i göstermek için tanımladığınız class’ın adını yazmanız gerekmektedir. Örnek kullanımı aşağıda görebilirsiniz.


Tanımlı olmayan bir url’i yakalamak için nasıl bir rotuing yapılabilir?

Bulunamayan sayfa veya 404 hatası olarak bilinen bu işlem için yine root olarak tanımladığınız değişkenlerde bir tane path olarak “**” ekleyip yönlenmesini istediğiniz bileşeni yazmanız gerekmektedir.

angular_routing_genel_tanim_04