Angular Signals: S\u0131f\u0131rdan Uzmana<\/p>\n
Angular, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Son y\u0131llarda Angular, geli\u015ftirme deneyimini iyile\u015ftirmek i\u00e7in \u00e7e\u015fitli \u00f6zelliklere sahip yeni s\u00fcr\u00fcmler yay\u0131nlam\u0131\u015ft\u0131r. Bu \u00f6zelliklerden biri de **Angular Signals**’t\u0131r.<\/p>\n
Angular Signals, Angular’\u0131n tepkisel programlama modeli i\u00e7in yeni bir yakla\u015f\u0131m sunar. Bu makale, Angular Signals’\u0131n temellerini, avantajlar\u0131n\u0131 ve kullan\u0131m\u0131 hakk\u0131nda detayl\u0131 bilgiler sunmaktad\u0131r. Sizlere Angular Signals’\u0131 kullanarak daha temiz ve etkili kodlar yazmay\u0131 \u00f6\u011fretecektir.<\/p>\n
Angular Signals, Angular’\u0131n tepkisel programlama modelinde, veri de\u011fi\u015fikliklerini otomatik olarak g\u00fcncellemeyi sa\u011flayan bir mekanizmad\u0131r. Bir sinyal, de\u011feri de\u011fi\u015febilen bir de\u011fi\u015fken olarak d\u00fc\u015f\u00fcn\u00fclebilir. Bu de\u011fer de\u011fi\u015fti\u011finde, ba\u011fl\u0131 t\u00fcm bile\u015fenler otomatik olarak g\u00fcncellenir.<\/p>\n
Signals, geleneksel Angular bile\u015fenlerinde kullan\u0131lan Angular Signals’\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r:<\/p>\n Angular Signals’\u0131 kullanmak i\u00e7in \u00f6ncelikle “`typescript @Component({ Bu \u00f6rnekte, Sinyalleri g\u00fcncellemek i\u00e7in “`typescript Bu kod, Signals, Angular’\u0131n tepkisel programlama modelini daha da g\u00fc\u00e7lendirir. Tepkisel programlama, veri de\u011fi\u015ftik\u00e7e otomatik olarak g\u00fcncellemeler yaparak, uygulaman\u0131z\u0131n kullan\u0131c\u0131 etkile\u015fimlerine daha h\u0131zl\u0131 ve dinamik bir \u015fekilde yan\u0131t vermesini sa\u011flar.<\/p>\n Signals, tepkisel programlamada \u00f6nemli bir rol oynar. De\u011ferleri de\u011fi\u015ftik\u00e7e, ba\u011fl\u0131 olan \u015fablonlar ve bile\u015fenler otomatik olarak g\u00fcncellenir. Bu, kullan\u0131c\u0131lara daha etkile\u015fimli ve ak\u0131c\u0131 bir deneyim sunar.<\/p>\n@Input<\/code> ve @Output<\/code> dekorat\u00f6rlerini kullanma ihtiyac\u0131n\u0131 azalt\u0131r. Daha basit bir s\u00f6zdizimi kullanarak veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmenizi sa\u011flar.<\/p>\nAngular Signals’\u0131n Avantajlar\u0131<\/h2>\n
\n
@Input<\/code> ve @Output<\/code> dekorat\u00f6rleri ve EventEmitter<\/code>‘leri kullanma ihtiyac\u0131n\u0131 azalt\u0131r.<\/li>\nAngular Signals’\u0131 Kullanma<\/h2>\n
@angular\/core<\/code> paketini ve Signals<\/code> mod\u00fcl\u00fcn\u00fc i\u00e7e aktarman\u0131z gerekir:<\/p>\n
\nimport { Component, signal } from ‘@angular\/core’;<\/p>\n
\n selector: ‘app-my-component’,
\n template: `
\n {{ name }}
\n `
\n})
\nexport class MyComponent {
\n name = signal(‘Fatih’);
\n}
\n“`<\/p>\nsignal()<\/code> fonksiyonu ile bir sinyal olu\u015fturduk. name<\/code> adl\u0131 bir de\u011fi\u015fken olu\u015fturup, 'Fatih'<\/code> de\u011feri ile ba\u015flatt\u0131k. {{ name }}<\/code> kullanarak HTML \u015fablonunda sinyali kullanabiliriz. De\u011feri de\u011fi\u015fti\u011finde, \u015fablon otomatik olarak g\u00fcncellenecektir.<\/p>\n.set()<\/code> metodunu kullanabiliriz:<\/p>\n
\nname.set(‘Soysal’);
\n“`<\/p>\nname<\/code> sinyalinin de\u011ferini 'Soysal'<\/code> olarak g\u00fcncelleyecektir.<\/p>\nSignal’lar ve Tepkisel Programlama<\/h2>\n
Signals ile De\u011ferleri G\u00fcncelleme<\/h2>\n