Sayfa Yönlendirme (Routing And Navigation Guide) - Ionic

Trang chủ » Html Butona Tıklayınca Başka Sayfaya Yönlendirme » Sayfa Yönlendirme (Routing And Navigation Guide) - Ionic

Có thể bạn quan tâm

Ana içeriğe atla

Sayfa Yönlendirme (Routing and Navigation Guide)

Aralık 02, 2018 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/ Paylaş

Etiketler

Augury Navgation page page navigation routing sayfa yönlendirme Etiketler: Augury Navgation page page navigation routing sayfa yönlendirme Paylaş

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Ionic Kurulumu

Ekim 27, 2018   Merhabalar   Geçen haftaki yazımızda mobil uygulamaların çeşitlerinden kısa bir kesit ve ionic hakkında bilgiler vermiştik . Bu hafta bilgisayarımıza kurmamız gereken bileşenleri konuşacağız.   İonic framework'ünü kurmadan önce bilgisayara kurulması gerekenler arasında NodeJs bulunuyor. Peki neden NodeJs'i kurmak zorundayız diye düşünebilirsiniz. Ionic Framework ve bağımlılıkları Node Package Manager (npm) üzerinden indirilebilir , ancak npm'i kullanmak için Node.JS kurulumu yapmamız gerekiyor.     1- Bilgisayara NodeJS kurulumu  NodeJs 'in kendi sayfasından nodejs.org 'dan "Recommended For Most Users" seçeneğini kurdum ben kendi bilgisayarıma. Sayfaya girince bilgisayarınız 64 bitlikse 64 bitlik olan versiyonu size sunuyor.    Ardından nodeJs 'in bilgisayarınıza kurulup kurulmadığını cmd'yi açıp kontrol edebilirsiniz. Cmd ye aşağıdaki kod satırını yazdığınızda eğer NodeJs yüklenmişse bilgisayarınızda kaçıncı versiyonun yükl... Paylaş Yorum Gönder Devamı

Fab İcon Ekleme

Aralık 24, 2018  Merhabalar  Bu hafta oluşturduğumuz bir uygulamaya fab-icon 'u nasıl eklenir ona bakacağız.  Geçen haftalarda oluşturduğumuz Cafe uygulamamız üzerinden göstermeye çalışalım.Bu uygulamamızda cafe hakkında genel bilgi veren bir sayfamız olsun içinde fotoğrafı , hakkında kısa bilgi  ve sosyal medya hesaplarına ulaşabilmek için bir tane de fab iconumuz olsun . 🔹En başta sayfamızı oluşturarak başlayalım.      ionic g page puga sayfa ismimi, tanıtacağım cafe ismi olarak belirledim. Böylece sayfam oluşmuş oldu. puga.page.html uzantılı sayfama gidip içeriğimi hazırlamaya başlıyorum. İçeriğimi ion-content taglarının arasına yazıyorum öncelikle bir resim görünsün altında da bilgiler verilsin istiyorum . Resmi uygulamanın tanıması için    src→assets klasörünün içerisine taşıyorum. 🔹Resmimizi tanımlayalım <img src= "/src/assets/icecekResimleri/e427d7c9262063a424d0b89f2b36eb1c_1446286155.jpg" >  Resmin ardından cafe... Paylaş Yorum Gönder Devamı

Hakkımda

Melek Kurşun Profili ziyaret edin

Arşivleme

  • 2018 10
    • Aralık 4
      • Fab İcon Ekleme
      • Uygulamamıza Yeni Renkler Katalım
      • Uygulamamızı Geliştirelim -3
      • Sayfa Yönlendirme (Routing and Navigation Guide)
    • Kasım 4
    • Ekim 2

Etiketler

  • angular.js
  • atom
  • Augury
  • base
  • checklist
  • click event
  • contrast
  • cordova
  • fab-icon
  • geri bildirim
  • hex
  • hybrit
  • ion-card
  • ion-card-content
  • ion-cards
  • ion-col
  • ionic
  • ionic lab
  • ionic resim ekleme
  • login
  • mobil uygulama geliştirme
  • native
  • Navgation page
  • nodejs
  • page navigation
  • password
  • placeholder
  • rgb
  • routing
  • sayfa yönlendirme
  • shade
  • terminal
  • tint
  • Toast component
  • toast controller
  • url navigation
  • visual studio code
  • yeni renk
Daha fazla göster

Kötüye Kullanım Bildir

Translate

Từ khóa » Html Butona Tıklayınca Başka Sayfaya Yönlendirme