Sayfa Yönlendirme (Routing and Navigation Guide)

 Merhabalar
 Geçen hafta uygulamamız için bir login sayfası nasıl oluşturulur incelemiştik . Bu hafta butonlara bastığımızda sayfa yönlendirmesini nasıl yapabiliriz bunu üzerine biraz konuşacağız.

   Sayfaların yönlendirilmesi için gerekli içerikler app-routing.module.ts dosyasında tanımlanır. Burada , sayfalara ulaşmak için kullancak url tanımlamaları yapılır.

path: 'yemekler', loadChildren: './yemekler/yemekler.module#YemeklerPageModule'

   Burada  'loadChildren' özelliğiyle yemekler dosyasının içerisine git sayfanın görünmesi için gerekli olan componentı yükle anlamına getiriyor. Path ile de navigasyon işlemi yaparken url olarak kullanılacak isimi tanımlıyoruz.
  Yukarıdaki kod parçacığı normalde CLI dan sayfa oluşturduğumuzda (ionic g page sayfaAdı  kodunu yazdığımızda) kendiliğinden app-routing.module.ts sayfasında oluşuyor.

  Chrome için ekleyebileceğiniz yönlendirme haritasını gösteren 'Augury'  eklentisini chrome'unuza ekleyerek yönlendirme sayfalarınızı inceleyebilir ve bir hata var mı yok mu inceleyebilirsiniz.

                                             Karşımıza şu şekilde bir harita çıkıyor.


   app-routing.module.ts dosyasında bu tanımlamaları yaptıktan sonra yönlendirme yapmak istediğimiz sayfanın  .page.ts uzantılı dosyasına gelerek buraya buton için kullanmak istediğimiz metodu yazabiliriz. Böylece component'tan dinamik bir yönlendirme sağlayabiliriz. Angular bize component'ların constructor'larına Router tanımlayarak bu özelliği component'lara entegre edebilmeyi sağlıyor.

export class HomePage {
  constructor(private router: Router) {}

  go() {
    this.router.navigateByUrl('/yemekler');
  }
}

    Burada oluşturduğumuz go() metodunu gidip 'Home' sayfasındaki herhangi bir butonda kullanabiliriz.

 <ion-button (click)="go()">
        Yemekler
  </ion-button>

   Bu şekilde ts dosyasında tanımladığımız metodumuzu .page.html uzantılı dosyamızdaki butonumuza atamış olduk.

  Bu kadar uğraşmak istemezseniz app-roouting.module.ts de kayıtlı sayfanızın path'ini butonda

   <ion-button href="/yemekler"> Yemekler </ion-button>
şeklinde tanımlayabilirsiniz.
 
       Uygulamanın işleyişini videodan görebilirsiniz.

                

       Şimdilik uygulamada login yaptığımızda bizi yemekler sayfasına yönlendirmesini sağladık.Bu yönlendirmeyi yapmak için  .page.ts uzantılı sayfada metod tanımlamayı tercih ettim.

       Haftaya görüşmek üzere. Hoşçakalın 🙋


Yararlandığım Kaynaklar:
 https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/
 https://www.joshmorony.com/using-angular-routing-with-ionic-4/