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
import { RouterModule } from '@angular/router';
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.
Ö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.
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”
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
<router-outlet></router-outlet>
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.
<a routerLink="/login" routerLinkActive="active">Login</a>
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.
