{"id":14669,"date":"2025-03-09T12:45:14","date_gmt":"2025-03-09T09:45:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angularda-kuru-bilesenler-signal-ve-directive-composition-api\/"},"modified":"2025-03-09T12:45:14","modified_gmt":"2025-03-09T09:45:14","slug":"angularda-kuru-bilesenler-signal-ve-directive-composition-api","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-kuru-bilesenler-signal-ve-directive-composition-api\/","title":{"rendered":"Angular’da Kuru Bile\u015fenler: Signal ve Directive Composition API"},"content":{"rendered":"

<\/p>\n

Angular’da Kuru Bile\u015fenler: Signal ve Directive Composition API<\/p>\n

Merhaba! Ben Fatih Soysal ve bu makalede Angular’da Signal ve Directive Composition API’sini kullanarak nas\u0131l DRY (Don’t Repeat Yourself – Kendi Kendini Tekrar Etme) prensibine uygun, temiz ve tekrar kullan\u0131labilir bile\u015fenler olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azaltarak, bak\u0131m maliyetini d\u00fc\u015f\u00fcr\u00fcyor ve kod kalitesini art\u0131r\u0131yor. \u00d6ncelikle DRY prensibinin \u00f6nemini anlamak gerekiyor. Kodunuzda ayn\u0131 mant\u0131\u011f\u0131 veya i\u015flevi bir\u00e7ok kez tekrarl\u0131yorsan\u0131z, bu DRY prensibini ihlal ediyorsunuz demektir. Bu durum, hatalara ve bak\u0131m zorluklar\u0131na yol a\u00e7ar.<\/p>\n

Signal ve Directive Composition API Nedir?<\/h2>\n

Angular’\u0131n Signal API’si, uygulaman\u0131zdaki de\u011fi\u015fkenleri izlemek ve de\u011fi\u015fikliklere tepki vermek i\u00e7in daha reaktif ve performansl\u0131 bir yol sunar. Bu sayede, karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131 daha temiz ve okunabilir hale getirebilirsiniz. Directive Composition API ise, direktiflerin daha mod\u00fcler ve tekrar kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. Bile\u015fenlerinizin davran\u0131\u015flar\u0131n\u0131 daha k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z par\u00e7alara b\u00f6lebilir ve bu par\u00e7alar\u0131 farkl\u0131 yerlerde yeniden kullanabilirsiniz.<\/p>\n

\u00d6rnek Senaryo: Form Do\u011frulama<\/h2>\n

Bir form do\u011frulama bile\u015feni olu\u015fturaca\u011f\u0131m\u0131z\u0131 d\u00fc\u015f\u00fcnelim. Bu bile\u015fen, farkl\u0131 alanlar i\u00e7in (\u00f6rne\u011fin, e-posta, \u015fifre) farkl\u0131 do\u011frulama kurallar\u0131 i\u00e7erebilir. Tradisyonel y\u00f6ntemle her alan i\u00e7in ayr\u0131 bir do\u011frulama mant\u0131\u011f\u0131 yazmam\u0131z gerekirdi. Ancak Signal ve Directive Composition API ile bu durumu daha iyi y\u00f6netebiliriz.<\/p>\n

Directive Composition API ile Mod\u00fcler Do\u011frulama<\/h3>\n
\n\/\/ validation.directive.ts\n@Directive({\n  selector: '[appValidation]'\n})\nexport class ValidationDirective {\n  constructor(private el: ElementRef, private renderer: Renderer2) { }\n\n  @HostListener('input') onInput() {\n      \/\/ Do\u011frulama mant\u0131\u011f\u0131 burada yer al\u0131r.\n      \/\/ \u00d6rne\u011fin, e-posta format\u0131 do\u011frulamas\u0131 veya bo\u015fluk kontrol\u00fc.\n  }\n}\n<\/code><\/pre>\n
Bu direktif, herhangi bir input eleman\u0131na eklenerek, ona do\u011frulama yetene\u011fi kazand\u0131rabilir.  Farkl\u0131 do\u011frulama kurallar\u0131,  bu direktifin i\u00e7inde veya farkl\u0131 yard\u0131mc\u0131 fonksiyonlarda belirlenebilir.  Bu, kodu \u00e7ok daha mod\u00fcler ve tekrar kullan\u0131labilir hale getirir.<\/p>\n
Signal ile Reaktif G\u00fcncelleme<\/h3>\n
\n\/\/ my-form.component.ts\nimport { signal } from '@angular\/core';\n\nexport class MyFormComponent {\n  email = signal('');\n  isValidEmail = signal(false);\n\n  constructor() {\n      \/\/ Email de\u011fi\u015fkenindeki her de\u011fi\u015fiklikte isValidEmail g\u00fcncellenir.\n      effect(() => {\n        this.isValidEmail.set(this.validateEmail(this.email()));\n      });\n  }\n\n\n  validateEmail(email: string): boolean {\n    \/\/ E-posta do\u011frulama mant\u0131\u011f\u0131\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\n  }\n}\n\n<\/code><\/pre>\n
Bu \u00f6rnekte, email de\u011fi\u015fkeni bir Signal olarak tan\u0131mlanm\u0131\u015ft\u0131r.  effect fonksiyonu ile, email de\u011fi\u015fkenindeki her de\u011fi\u015fiklik isValidEmail de\u011fi\u015fkenini g\u00fcnceller.  Bu sayede, UI’y\u0131 manuel olarak g\u00fcncellemek zorunda kalmadan, veri de\u011fi\u015fikliklerine an\u0131nda tepki verebiliriz. Bu, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
Sonu\u00e7<\/h2>\n
Angular’da Signal ve Directive Composition API’si kullanarak, DRY prensibine uygun, temiz ve tekrar kullan\u0131labilir bile\u015fenler olu\u015fturman\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r.  Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve  uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.  Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla Angular geli\u015ftirme ipucu ve \u00f6\u011fretici i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz ek kaynaklar:<\/p>\n