<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular 17 ile gelen ve built-in olarak mimaride varl\u0131k g\u00f6steren *ngIf<\/code>, *ngFor<\/code> ve *ngSwitch<\/code> gibi direktifler yerine daha programatik bir \u00fcslupla if\/else<\/code>, for<\/code> ve switch<\/code> yap\u0131lar\u0131n\u0131 kullanmam\u0131z\u0131 sa\u011flayan Control Flow Syntax<\/em> isimli \u00f6zelli\u011fi inceliyor olaca\u011f\u0131z.<\/p>\n
\u00d6ncelikle yukar\u0131da bahsedilen direktiflerin yeni syntax’lar\u0131na odaklanmadan \u00f6nce bu g\u00fcne kadar Angular’da nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131na g\u00f6z atarak ba\u015flayal\u0131m.<\/p>\n
Bizler bu g\u00fcne kadar Angular mimarisinde built-in olarak gelen yap\u0131sal dedi\u011fimiz(Structural Directives<\/a>) direktifler sayesinde herhangi bir html nesnesini sayfaya ekleyebiliyor, \u00e7\u0131karabiliyor yahut manip\u00fcle edebiliyorduk. Yani bu direktifler ile DOM nesnesinin yap\u0131s\u0131na m\u00fcdahale edebiliyorduk. Misal olarak a\u015fa\u011f\u0131daki kod blo\u011funu ele al\u0131rsak e\u011fer;<\/p>\n
\n\r\n    <div *ngIf="condition">\r\n      <ul>\r\n        <li *ngFor="let number of numbers">\r\n          {{number}}\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n<\/pre>\n<\/div>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere * karakteriyle ba\u015flayan *ngIf<\/code> ve *ngFor<\/code> gibi yap\u0131sal direktifler e\u015fli\u011finde y\u00fcr\u00fct\u00fclen bu \u00e7al\u0131\u015fma esas\u0131nda Angular compiler’\u0131 taraf\u0131ndan bir JavaScript koduna d\u00f6n\u00fc\u015ft\u00fcr\u00fclmektedir. Tabi Angular JavaScript’i \u00fcretebilmek i\u00e7in \u00f6ncelikle component’in template’ini a\u015fa\u011f\u0131daki gibi par\u00e7a par\u00e7a view’lere ay\u0131rmakta;<\/p>\n\n\r\n    <div *ngIf="condition">\r\n\r\n    <\/div>\r\n<\/pre>\n<\/div>\n\n\r\n      <ul>\r\n\r\n      <\/ul>\r\n<\/pre>\n<\/div>\n\n\r\n        <li *ngFor="let number of numbers">\r\n          \r\n        <\/li>\r\n<\/pre>\n<\/div>\nve b\u00f6ylece t\u00fcm bu par\u00e7alar\u0131 esas\u0131nda bir ng-template<\/a> i\u00e7erisinde * karakteri e\u015fli\u011finde direktiflerle kullanmam\u0131z\u0131 sa\u011flayarak syntactic sugar uygulamaktad\u0131r. Yani Angular compiler, yukar\u0131daki \u00f6rne\u011fi arkaplanda a\u015fa\u011f\u0131daki hale getirmektedir;<\/p>\n
\n\r\n    <ng-template [ngIf]="condition">\r\n    <div>\r\n      <ng-template>\r\n      <ul>\r\n        <ng-template [ngFor]="numbers" let-number>\r\n        <li>\r\n          {{number}}\r\n        <\/li>\r\n        <\/ng-template>\r\n      <\/ul>\r\n      <\/ng-template>\r\n    <\/div>\r\n    <\/ng-template>\r\n<\/pre>\n<\/div>\nBurada esas\u0131nda her bir view’in i\u00e7eri\u011fi static bir yap\u0131ya sahiptir. Yani de\u011fi\u015fmez! Ancak burada dinamik olarak i\u00e7eriklerin de\u011fi\u015fmesi, ba\u015fka bir deyi\u015fle eklenmesi gerekmektedir. \u0130\u015fte tam bu noktada <!-- special comment --><\/code> devreye girmektedir.<\/p>\n
Angular, bildi\u011finiz \u00fczere i\u00e7erisine alt view’leri ekleyip kald\u0131rabilece\u011finiz ViewContainer<\/code> kavram\u0131na sahiptir. Bu yap\u0131lanma sayesinde DOM’da gerekli dinamik tutumu sergileyebilmektedir ve yukar\u0131da bahsi ge\u00e7en i\u00e7erik de\u011fi\u015fiklikleri bu container sayesinde y\u00fcr\u00fct\u00fclmektedir. Angular, DOM’da i\u00e7eri\u011fin de\u011fi\u015fece\u011fi dinamik nokta i\u00e7in container’\u0131 konumland\u0131rabilmek i\u00e7in \u00f6zel bir html yorumu kullanmaktad\u0131r. Ve asl\u0131nda \u015fu ana kadar anlat\u0131lanlarda da i\u015fin \u00f6z\u00fcnde yap\u0131lanlar bundan ibarettir. Misal olarak; *ngIf<\/code> arkaplanda bir ViewContainer<\/code> olu\u015fturacak ve bu container ise \u00f6zel bir html yorumu ile ilgili noktayla ili\u015fkilendirilecektir. Verilen ko\u015fula g\u00f6re bu noktaya alt view eklenecek yahut \u00e7\u0131kar\u0131lacakt\u0131r. Yani o nesne ya g\u00f6sterilecek ya da kald\u0131r\u0131lm\u0131\u015f olacakt\u0131r.<\/p>\nZaten hat\u0131rlarsan\u0131z e\u011fer, bundan dolay\u0131 kendimize \u00f6zel yap\u0131sal direktifleri(Custom Structural Directives<\/a>) olu\u015ftururken de ViewContainerRef<\/code>‘ten istifade etmekteyiz.<\/p>\n
Uzun laf\u0131n k\u0131sas\u0131, bizler built-in gelen direktifler sayesinde arkaplanda fark\u0131nda olmaks\u0131z\u0131n template’i \u00f6nce ng-template<\/a>‘e d\u00f6n\u00fc\u015ft\u00fcrmekte ve ard\u0131ndan da ViewContainer<\/code> ile bunlar\u0131 dinamik bir \u015fekilde y\u00f6netebilmekteyiz. Bu olduk\u00e7a g\u00fc\u00e7l\u00fc g\u00f6z\u00fcken ama pekte sezgisel olmayan yap\u0131lanman\u0131n ister istemez compiler a\u00e7\u0131s\u0131ndan maliyet gibi dezavantajlar\u0131 da mevcuttur. Angular ekibi, bu duruma kar\u015f\u0131n direktifler yerine ek compiler y\u00fck\u00fc olmaks\u0131z\u0131n ayn\u0131 i\u015fi yapacak ve ayn\u0131 view’i olu\u015fturacak daha performansl\u0131 olan Control Flow Syntax<\/em>‘\u0131 geli\u015ftirmi\u015flerdir.<\/p>\n
\n\r\n    @if(condition)\r\n    {\r\n      <div>\r\n        <ul>\r\n          @for(number of numbers;track $index){\r\n            <li>{{number}}<\/li>\r\n          }\r\n        <\/ul>\r\n      <\/div>\r\n    }\r\n<\/pre>\n<\/div>\n\u0130\u015fte… G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Angular, art\u0131k direktiflere nazaran daha g\u00fc\u00e7l\u00fc ve programatik \u00fcsluba daha uygun bir syntax ile bizlere e\u015flik edebilecektir.<\/p>\n
Not : Art\u0131k bu syntax sayesinde @, { ve } karakterleri \u00f6zel anlamlara sahip olaca\u011f\u0131ndan dolay\u0131 bu karakterlerin template i\u00e7erisinde kullan\u0131lmas\u0131 hataya sebebiyet verecektir. Haliyle bunlar\u0131n kullan\u0131labilmesi i\u00e7in a\u015fa\u011f\u0131daki e\u015fde\u011ferlerinin kullan\u0131lmas\u0131 gerekmektedir.
\n@ = \\&#64;
\n{ = \\&#123;
\n} = \\&#125;<\/em><\/p><\/blockquote>\n
\u015eimdi gelin control flow syntax ile gelen t\u00fcm ifadeleri tek tek detayl\u0131ca inceleyelim.<\/p>\n
if statement<\/h3>\nEn a\u00e7\u0131k haliyle a\u015fa\u011f\u0131daki gibi kullan\u0131labilir;<\/p>\n
\n\r\n    @if(condition == 1)\r\n    {\r\n      1\r\n    }@else if(condition == 2)\r\n    {\r\n      2\r\n    }@else{\r\n      3\r\n    }\r\n<\/pre>\n<\/div>\nBunun d\u0131\u015f\u0131nda ekstradan tek bir detaya sahiptir, o da, kontrol edilmi\u015f ko\u015fulun sonucunu da a\u015fa\u011f\u0131daki gibi farkl\u0131 bir de\u011fi\u015fkene atayabilirsiniz;<\/p>\n
\n\r\n    @if(condition == 1; as result)\r\n    {\r\n      1\r\n      {{result}}\r\n    }\r\n<\/pre>\n<\/div>\nYukar\u0131daki as result<\/code> keyword’\u00fc sayesinde condition == 1<\/code> ko\u015fulunun sonucu elde edilebilmektedir.<\/p>\n
for statement<\/h3>\nfor ifadesinin kullan\u0131m\u0131 ise a\u015fa\u011f\u0131daki gibi track<\/code> keyword’\u00fc ile birliktedir;<\/p>\n
\n\r\n  <ul>\r\n    @for(number of numbers;track number){\r\n      <li>{{number}}<\/li>\r\n    }\r\n  <\/ul>\r\n<\/pre>\n<\/div>\nEvet, track<\/code> keyword’\u00fcn\u00fcn kullan\u0131m\u0131 zorunludur.<\/p>\n
\u015eahsen for d\u00f6ng\u00fcs\u00fcnde yap\u0131lan en yararl\u0131 eklemelerden biri bo\u015f koleksiyonlar\u0131n i\u015flenebilmesidir. \u015e\u00f6yle ki;<\/p>\n
\n\r\n  <ul>\r\n    @for(number of numbers;track number){\r\n      <li>{{number}}<\/li>\r\n    }\r\n    @empty{\r\n      <li>\r\n        <strong>No numbers<\/strong>\r\n      <\/li>\r\n    }\r\n  <\/ul>\r\n<\/pre>\n<\/div>\n\u00d6nceden bu i\u015flemi yapabilmek i\u00e7in \u00f6nce *ngIf<\/code> ile gerekli kontrol\u00fcn yap\u0131lmas\u0131n\u0131 ve e\u011fer koleksiyon bo\u015f ise bir mesaj\u0131n g\u00f6r\u00fcnt\u00fclenmesini sa\u011flamam\u0131z gerekiyordu. Yeni syntax’ta ise i\u015fler ne kadar kolay ve \u015f\u0131k de\u011fil mi \ud83d\ude42<\/p>\n
Bu arada eskiden sahip olunan $index, $first, $last, $even, $odd ve $count gibi de\u011fi\u015fkenlere hala eri\u015filebilmektedir.<\/p>\n
\n\r\n    @for(number of numbers;track number;let f = $first; let l = $last){\r\n      <li>{{number}} - {{f}} -- {{l}}<\/li>\r\n    }\r\n<\/pre>\n<\/div>\nUnutmay\u0131n ki for d\u00f6ng\u00fcs\u00fc, yeni syntax’\u0131nda eskisine nazaran olduk\u00e7a farkl\u0131 ve etkili bir algoritmayla gelmi\u015ftir ve bundan dolay\u0131 daha performansl\u0131 ve h\u0131zl\u0131 \u00e7al\u0131\u015fma sergilemektedir.<\/p>\n
switch statement<\/h3>\nswitch yap\u0131s\u0131 da a\u015fa\u011f\u0131daki syntax ile kullan\u0131labilmektedir;<\/p>\n
\n\r\n    @switch(number){\r\n      @case(1)\r\n      {\r\n        <div>User<\/div>\r\n      }\r\n      @case(2){\r\n        <div>Anonymous<\/div>\r\n      }\r\n      @default{\r\n        <div>Other<\/div>\r\n      }\r\n    }\r\n<\/pre>\n<\/div>\nMevcut Uygulamalardaki Direktifleri Yeni Syntax’a D\u00f6n\u00fc\u015ft\u00fcrmek<\/h3>\nMevcut uygulamalar\u0131n\u0131zdaki direktifler ile yap\u0131lan operasyonlar\u0131 control flow syntax’a d\u00f6n\u00fc\u015ft\u00fcrmek istiyorsan\u0131z e\u011fer bunu manuel yapabilece\u011finiz gibi Angular CLI’dan yard\u0131m alarakta ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n
Bunun i\u00e7in CLI’a vermeniz gereken talimat a\u015fa\u011f\u0131dakinden ibaret olacakt\u0131r.<\/p>\n
ng g @angular\/core:control-flow<\/code><\/div>\nBu talimat neticesinde hem uygulamadaki component’ler de yap\u0131lan direktif \u00e7al\u0131\u015fmalar\u0131 yeni syntax’a ge\u00e7irilecek hem de template’ler de bulunan @, { ve } gibi \u00f6zel karakterler \u00f6nceki sat\u0131rlarda bahsedildi\u011fi \u00fczere html varl\u0131klar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclecektir.<\/p>\n
Nihai olarak;
\nAnla\u015f\u0131lan o ki, Angular ekibi gelecekte control flow syntax’a odaklanacak ve projelerde ihtiya\u00e7 noktalar\u0131nda \u00f6nerilen davran\u0131\u015f olarak \u00f6ne \u00e7\u0131karacakt\u0131r kanaatindeyim. Tabi bu durumda, control flow syntax’\u0131n gelmesi demek structural directives’lerin kullan\u0131mdan kald\u0131r\u0131laca\u011f\u0131 anlam\u0131na gelmemektedir. Sevenler istedi\u011fi taktirde direktiflerle yola devam edebilecektir \ud83d\ude42<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular 17 ile gelen ve built-in olarak mimaride varl\u0131k g\u00f6steren *ngIf, *ngFor ve *ngSwitch gibi direktifler yerine daha programatik bir \u00fcslupla if\/else, for ve switch yap\u0131lar\u0131n\u0131 kullanmam\u0131z\u0131 sa\u011flayan Control Flow Syntax...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4958],"tags":[2156,4960,4959],"class_list":["post-26685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-17","tag-angular","tag-angular-17","tag-control-flow-syntax"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26685","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=26685"}],"version-history":[{"count":8,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26685\/revisions"}],"predecessor-version":[{"id":26699,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26685\/revisions\/26699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=26685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=26685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=26685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}