<\/div>\n

Merhaba,<\/p>\n

Angular mimarisi; klasik web platform literat\u00fcr\u00fcne nazaran farkl\u0131 terminoloji ve yap\u0131lar bar\u0131nd\u0131ran ve yakla\u015f\u0131m olarak bu terminoloji ve yap\u0131lar\u0131 esas kabul eden, Front End tabanl\u0131 programlama mimarilerinden birisidir. Yakla\u015f\u0131m a\u00e7\u0131s\u0131ndan yenilikler aras\u0131nda en radikal de\u011fi\u015fiklik “Page” yerine “Component” kavram\u0131n\u0131 getirmesi ve bunun yan\u0131nda kullan\u0131c\u0131n\u0131n iste\u011fi do\u011frultusunda ilgili “Component” yap\u0131s\u0131n\u0131n render edilerek kullan\u0131c\u0131ya sunulmas\u0131 s\u00f6z konusudur. Bu i\u015fleyi\u015fte hangi componentin hangi istekle ili\u015fkili oldu\u011fu durumu ise route yap\u0131lanmas\u0131 sayesinde bilinmekte ve kullan\u0131c\u0131 t\u00fcm bu s\u00fcreci gayet dinamik ve h\u0131zl\u0131 bir web uygulamas\u0131 ile muhattap olarak ge\u00e7irmektedir. Buda asl\u0131nda Angular mimarisinin a’dan z’ye bir \u00f6zetidir…<\/p>\n

Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda componentler aras\u0131 seyirleri takip edebilmemizi sa\u011flayan router event arac\u0131l\u0131\u011f\u0131 ile Navigation durumlar\u0131n\u0131 inceleyece\u011fiz ve bir componentin render s\u00fcrecinden bir ba\u015fka componentin talep edilmesi an\u0131na kadar t\u00fcm ad\u0131mlardaki durumlar\u0131n\u0131 elde ederek denetleyecek ve de\u011ferlendirece\u011fiz.<\/p>\n

Tabi bu i\u015flem i\u00e7in iki component aras\u0131ndaki seyir s\u00fcrecini teorik olarak izah etmemiz gerekmektedir. Buna da klasik web uygulamalar\u0131n\u0131n sayfalar aras\u0131 ge\u00e7i\u015f durumlar\u0131n\u0131 de\u011ferlendirerek temelden mukayese ile ba\u015flayabiliriz.<\/p>\n

Klasik web uygulamalar\u0131nda sayfalar aras\u0131 ge\u00e7i\u015fler kaynak y\u00f6nlendirmesi ile ger\u00e7ekle\u015fmektedir. Yani “x\/a.html” sayfas\u0131ndan “y\/b.html” sayfas\u0131na y\u00f6nlendirme ger\u00e7ekle\u015ftirebilmek i\u00e7in “a.html” sayfas\u0131na “b.html” sayfas\u0131n\u0131n fiziksel yolunu ve dosya ad\u0131n\u0131 vermek gerekmektedir. Ancak bu \u015fekilde iki sayfa aras\u0131nda y\u00f6nlendirme ger\u00e7ekle\u015fecektir.<\/p>\n

Angular mimarisinde ise; componentler, bulunduklar\u0131 dizinlerden ba\u011f\u0131ms\u0131z olarak tan\u0131mland\u0131klar\u0131 route yap\u0131lar\u0131 taraf\u0131ndan \u00e7a\u011fr\u0131lmakta ve render edilmektedirler. Dolay\u0131s\u0131yla iki component aras\u0131 ge\u00e7i\u015f asl\u0131nda o iki componentten ba\u011f\u0131ms\u0131z olacak \u015fekilde i\u015flemektedir.<\/p>\n

B\u00f6yle bir durumda biz yaz\u0131l\u0131mc\u0131lar componentin Navigation durumunun hangi de\u011ferde oldu\u011funu \u00f6\u011frenmek isteyebiliriz. Yeni mi render ediliyor?<\/em>, hata m\u0131 veriyor?<\/em>, iptal mi ediliyor?<\/em> yoksa bu componentin seyri son mu buluyor?<\/em> vs. gibi sorular\u0131n cevaplar\u0131n\u0131 alabiliriz…<\/p>\n

\u0130\u015fte bu bilgileri, ilgili componentin router eventlar\u0131na abone olarak takibe alabilir ve ad\u0131m ad\u0131m elde edebiliriz.<\/p>\n

\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Router, NavigationEnd, NavigationStart, NavigationCancel, NavigationError } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.css']\r\n})\r\nexport class HomeComponent implements OnInit {\r\n\r\n  constructor(private router: Router) { }\r\n\r\n  ngOnInit() {\r\n    this.router.events\r\n      .subscribe(e => {\r\n        if (e instanceof NavigationStart)\r\n          alert(`Home Component State : NavigationStart`);\r\n        else if (e instanceof NavigationEnd)\r\n          alert(`Home Component State : NavigationEnd`);\r\n        else if (e instanceof NavigationCancel)\r\n          alert(`Home Component State : NavigationCancel`);\r\n        else if (e instanceof NavigationError)\r\n          alert('Home Component State : NavigationError');\r\n      });\r\n  }\r\n\r\n}\r\n<\/pre>\nYukar\u0131daki \u00f6rnek kod blo\u011funu incelerseniz e\u011fer component’in constructer’\u0131ndan al\u0131nan “Router” nesnesi \u00fczerinden abone olunan olaylar neticesinde t\u00fcm Navigation durumlar\u0131 incelenmektedir.<\/p>\n
Bu \u00f6zellik e\u015fli\u011finde web uygulamalar\u0131nda UI k\u0131sm\u0131nda detayl\u0131 raporlama elde edebilir ya da kullan\u0131c\u0131n\u0131n y\u00f6nelimleri \u00fczerine istatistiksel veriler olu\u015fturabiliriz.<\/p>\n
Faydalanman\u0131z dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular mimarisi; klasik web platform literat\u00fcr\u00fcne nazaran farkl\u0131 terminoloji ve yap\u0131lar bar\u0131nd\u0131ran ve yakla\u015f\u0131m olarak bu terminoloji ve yap\u0131lar\u0131 esas kabul eden, Front End tabanl\u0131 programlama mimarilerinden birisidir. Yakla\u015f\u0131m a\u00e7\u0131s\u0131ndan yenilikler aras\u0131nda en...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2144,2415,2599],"tags":[2156,2706,2705],"class_list":["post-9956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-4","category-angular-5","category-angular-6","tag-angular","tag-angular-navigation","tag-angular-router-event"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9956"}],"version-history":[{"count":12,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9956\/revisions"}],"predecessor-version":[{"id":9968,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9956\/revisions\/9968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}