Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular – Router Event İle Navigation Durum Takibi

Merhaba,

Angular mimarisi; klasik web platform literatürüne nazaran farklı terminoloji ve yapılar barındıran ve yaklaşım olarak bu terminoloji ve yapıları esas kabul eden, Front End tabanlı programlama mimarilerinden birisidir. Yaklaşım açısından yenilikler arasında en radikal değişiklik “Page” yerine “Component” kavramını getirmesi ve bunun yanında kullanıcının isteği doğrultusunda ilgili “Component” yapısının render edilerek kullanıcıya sunulması söz konusudur. Bu işleyişte hangi componentin hangi istekle ilişkili olduğu durumu ise route yapılanması sayesinde bilinmekte ve kullanıcı tüm bu süreci gayet dinamik ve hızlı bir web uygulaması ile muhattap olarak geçirmektedir. Buda aslında Angular mimarisinin a’dan z’ye bir özetidir…

Bu içeriğimizde Angular uygulamalarında componentler arası seyirleri takip edebilmemizi sağlayan router event aracılığı ile Navigation durumlarını inceleyeceğiz ve bir componentin render sürecinden bir başka componentin talep edilmesi anına kadar tüm adımlardaki durumlarını elde ederek denetleyecek ve değerlendireceğiz.

Tabi bu işlem için iki component arasındaki seyir sürecini teorik olarak izah etmemiz gerekmektedir. Buna da klasik web uygulamalarının sayfalar arası geçiş durumlarını değerlendirerek temelden mukayese ile başlayabiliriz.

Klasik web uygulamalarında sayfalar arası geçişler kaynak yönlendirmesi ile gerçekleşmektedir. Yani “x/a.html” sayfasından “y/b.html” sayfasına yönlendirme gerçekleştirebilmek için “a.html” sayfasına “b.html” sayfasının fiziksel yolunu ve dosya adını vermek gerekmektedir. Ancak bu şekilde iki sayfa arasında yönlendirme gerçekleşecektir.

Angular mimarisinde ise; componentler, bulundukları dizinlerden bağımsız olarak tanımlandıkları route yapıları tarafından çağrılmakta ve render edilmektedirler. Dolayısıyla iki component arası geçiş aslında o iki componentten bağımsız olacak şekilde işlemektedir.

Böyle bir durumda biz yazılımcılar componentin Navigation durumunun hangi değerde olduğunu öğrenmek isteyebiliriz. Yeni mi render ediliyor?, hata mı veriyor?, iptal mi ediliyor? yoksa bu componentin seyri son mu buluyor? vs. gibi soruların cevaplarını alabiliriz…

İşte bu bilgileri, ilgili componentin router eventlarına abone olarak takibe alabilir ve adım adım elde edebiliriz.

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, NavigationStart, NavigationCancel, NavigationError } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events
      .subscribe(e => {
        if (e instanceof NavigationStart)
          alert(`Home Component State : NavigationStart`);
        else if (e instanceof NavigationEnd)
          alert(`Home Component State : NavigationEnd`);
        else if (e instanceof NavigationCancel)
          alert(`Home Component State : NavigationCancel`);
        else if (e instanceof NavigationError)
          alert('Home Component State : NavigationError');
      });
  }

}

Yukarıdaki örnek kod bloğunu incelerseniz eğer component’in constructer’ından alınan “Router” nesnesi üzerinden abone olunan olaylar neticesinde tüm Navigation durumları incelenmektedir.

Bu özellik eşliğinde web uygulamalarında UI kısmında detaylı raporlama elde edebilir ya da kullanıcının yönelimleri üzerine istatistiksel veriler oluşturabiliriz.

Faydalanmanız dileğiyle…
Sonraki yazılarımda görüşmek üzere…

İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*