Modern web uygulamalar\u0131, \u00f6zellikle Angular gibi kapsaml\u0131 frameworklerle geli\u015ftirildi\u011finde, genellikle karma\u015f\u0131k yap\u0131lar, \u00e7ok say\u0131da bile\u015fen ve tekrar eden kod bloklar\u0131 i\u00e7erir. Bu durum, geli\u015ftirme s\u00fcrecini uzatabilir ve manuel i\u015flemler nedeniyle hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131rabilir. Peki, bu zorluklar\u0131n \u00fcstesinden gelmek ve geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 dramatik bir \u015fekilde art\u0131rmak i\u00e7in ne yapabilirsiniz? \u0130\u015fte bu noktada Angular snippetleri<\/strong> devreye giriyor.<\/p>\n Angular snippetleri, s\u0131k\u00e7a kulland\u0131\u011f\u0131n\u0131z kod par\u00e7ac\u0131klar\u0131n\u0131, iskelet yap\u0131lar\u0131n\u0131 ve hatta t\u00fcm dosya \u015fablonlar\u0131n\u0131 saniyeler i\u00e7inde olu\u015fturman\u0131z\u0131 sa\u011flayan k\u00fc\u00e7\u00fck ama g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. \u00d6rne\u011fin, yeni bir Angular bile\u015feni olu\u015ftururken, HTML, CSS ve TypeScript dosyalar\u0131n\u0131 tek tek olu\u015fturmak, temel \u015fablon kodunu yazmak ve bunlar\u0131 do\u011fru \u015fekilde ba\u011flamak yerine, tek bir k\u0131sayolla t\u00fcm bu s\u00fcreci otomatik hale getirebilirsiniz. Bu, sadece zamandan tasarruf etmekle kalmaz, ayn\u0131 zamanda kod taban\u0131n\u0131zda tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve olas\u0131 yaz\u0131m hatalar\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu makalede, Angular geli\u015ftirme deneyiminizi d\u00f6n\u00fc\u015ft\u00fcrecek en kullan\u0131\u015fl\u0131 snippetleri derinlemesine inceleyece\u011fiz, s\u0131f\u0131rdan ba\u015flay\u0131p ileri d\u00fczey tekniklere kadar ad\u0131m ad\u0131m ilerleyece\u011fiz.<\/p>\n Bir Angular snippet’i, temel olarak bir kod edit\u00f6r\u00fc (\u00e7o\u011funlukla Visual Studio Code) uzant\u0131s\u0131 taraf\u0131ndan sa\u011flanan \u00f6nceden tan\u0131mlanm\u0131\u015f bir metin par\u00e7as\u0131d\u0131r. Geli\u015ftiriciler, belirli bir “prefix” (\u00f6n ek) yaz\u0131p “Tab” tu\u015funa basarak bu \u00f6n tan\u0131ml\u0131 kodu an\u0131nda \u00e7al\u0131\u015fma alanlar\u0131na ekleyebilirler. \u00d6rne\u011fin, ‘ng-component’ yaz\u0131p Tab’a bast\u0131\u011f\u0131n\u0131zda, bir Angular bile\u015feninin t\u00fcm standart yap\u0131s\u0131 otomatik olarak olu\u015fturulur. Bu yap\u0131land\u0131rmalar genellikle JSON format\u0131nda saklan\u0131r ve kullan\u0131c\u0131n\u0131n veya uzant\u0131n\u0131n ihtiya\u00e7lar\u0131na g\u00f6re \u00f6zelle\u015ftirilebilir. Bu, kod yazma s\u00fcrecini h\u0131zland\u0131rman\u0131n yan\u0131 s\u0131ra, yeni ba\u015flayanlar i\u00e7in Angular’\u0131n temel yap\u0131lar\u0131n\u0131 \u00f6\u011frenirken harika bir rehber g\u00f6revi de g\u00f6r\u00fcr. B\u00f6ylelikle, odak noktan\u0131z\u0131 sintaks detaylar\u0131ndan al\u0131p, uygulaman\u0131z\u0131n \u00e7ekirdek mant\u0131\u011f\u0131na kayd\u0131rabilirsiniz.<\/p>\n Piyasada Angular geli\u015ftiricileri i\u00e7in bir\u00e7ok harika snippet uzant\u0131s\u0131 bulunmaktad\u0131r. Bunlardan en pop\u00fcler olanlar\u0131 aras\u0131nda “Angular Language Service” (resmi Angular ekibi taraf\u0131ndan desteklenir ve daha \u00e7ok dil deste\u011fi sa\u011flarken, baz\u0131 otomatik tamamlamalar da sunar) ve “Angular Snippets (Version 12) by John Papa” say\u0131labilir. John Papa’n\u0131n uzant\u0131s\u0131, geni\u015f bir snippet yelpazesi sunarak geli\u015ftiricilerin ihtiya\u00e7 duydu\u011fu hemen hemen her senaryoyu kapsar. Bu uzant\u0131lar\u0131 kurdu\u011funuzda, projenizde otomatik olarak etkinle\u015fir ve size kod yazarken an\u0131nda \u00f6neriler sunmaya ba\u015flar. Unutulmamal\u0131d\u0131r ki, snippetler sadece temel yap\u0131lar i\u00e7in de\u011fil, ayn\u0131 zamanda RxJS operat\u00f6rleri, form validasyonlar\u0131 ve hatta Angular Material bile\u015fenleri gibi daha spesifik durumlar i\u00e7in de mevcuttur. Bu sayede, farkl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken bile verimlili\u011finizden \u00f6d\u00fcn vermezsiniz.<\/p>\n Angular uygulamalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131 olan bile\u015fenler (components), servisler (services), direktifler (directives) ve pipe’lar (pipes), her projenin olmazsa olmaz\u0131d\u0131r. Bu yap\u0131lar\u0131 her seferinde s\u0131f\u0131rdan yazmak hem zaman kayb\u0131na yol a\u00e7ar hem de k\u00fc\u00e7\u00fck hatalar\u0131n olu\u015fmas\u0131na zemin haz\u0131rlar. \u0130\u015fte bu noktada, do\u011fru Angular snippetlerini kullanmak, kodlama s\u00fcrecinizi standardizasyona ula\u015ft\u0131r\u0131r ve inan\u0131lmaz derecede h\u0131zland\u0131r\u0131r. Bu b\u00f6l\u00fcmde, en temel ve s\u0131k kullan\u0131lan Angular bile\u015fenleri i\u00e7in pratik snippetleri ve onlar\u0131n ger\u00e7ek d\u00fcnya senaryolar\u0131ndaki uygulamalar\u0131n\u0131 inceleyece\u011fiz.<\/p>\n Angular bile\u015fenleri, UI’\u0131n belirli bir k\u0131sm\u0131n\u0131 y\u00f6neten TypeScript s\u0131n\u0131f\u0131, HTML \u015fablonu ve CSS stilinden olu\u015fur. Yeni bir bile\u015fen olu\u015fturmak, bu \u00fc\u00e7 dosyay\u0131 ayarlamay\u0131 ve ana mod\u00fcle kaydetmeyi gerektirir. Ancak <\/code><\/p>\n Bu temel yap\u0131, bile\u015feninizi hemen geli\u015ftirmeye ba\u015flaman\u0131z i\u00e7in gerekli t\u00fcm temel \u00f6\u011feleri i\u00e7erir. Ayr\u0131ca, bile\u015fenler aras\u0131 ileti\u015fimi sa\u011flamak i\u00e7in <\/code><\/p>\n Benzer \u015fekilde, bir <\/code><\/p>\n Ger\u00e7ek D\u00fcnya Senaryosu: \u00dcr\u00fcn Kart\u0131 Bile\u015feni<\/strong><\/p>\n Bir e-ticaret uygulamas\u0131nda, her \u00fcr\u00fcn i\u00e7in bir Bu ad\u0131mlar, manuel kodlama s\u00fcrecini olduk\u00e7a basitle\u015ftirir ve hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 minimize eder. B\u00f6ylece, ana oda\u011f\u0131n\u0131z uygulaman\u0131z\u0131n i\u015flevselli\u011fi \u00fczerinde kal\u0131r.<\/p>\n Angular servisleri, i\u015f mant\u0131\u011f\u0131n\u0131 ve veri eri\u015fimini bile\u015fenlerden ay\u0131rmak i\u00e7in kullan\u0131l\u0131r. Genellikle HTTP istekleri yaparak backend API'leriyle ileti\u015fim kurarlar. <\/code><\/p>\n Bu, servisinizi global olarak kullan\u0131ma haz\u0131r hale getirir. HTTP istekleri i\u00e7in de \u00f6zel snippetler mevcuttur. \u00d6rne\u011fin, bir GET iste\u011fi i\u00e7in <\/code><\/p>\n Benzer \u015fekilde, Ger\u00e7ek D\u00fcnya Senaryosu: Kullan\u0131c\u0131 Verisi Servisi<\/strong><\/p>\n Bir kullan\u0131c\u0131 y\u00f6netim uygulamas\u0131nda, kullan\u0131c\u0131 listesini getirmek ve yeni kullan\u0131c\u0131 eklemek i\u00e7in bir Bu yakla\u015f\u0131m, servislerinizde tutarl\u0131 bir yap\u0131 kurman\u0131za ve API entegrasyonlar\u0131n\u0131 h\u0131zland\u0131rman\u0131za olanak tan\u0131r. Ayr\u0131ca, Observable yap\u0131s\u0131n\u0131 otomatik olarak getirdi\u011fi i\u00e7in RxJS ile \u00e7al\u0131\u015fmaya al\u0131\u015fman\u0131z\u0131 da kolayla\u015ft\u0131r\u0131r.<\/p>\n Direktifler, DOM'u de\u011fi\u015ftirmek veya davran\u0131\u015f eklemek i\u00e7in kullan\u0131l\u0131rken, pipe'lar veriyi \u015fablonda d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131r. Her ikisi i\u00e7in de temel iskelet snippetleri mevcuttur.<\/p>\n <\/code><\/p>\n Bir <\/code><\/p>\n Pipe'lar i\u00e7in ise <\/code><\/p>\n Ger\u00e7ek D\u00fcnya Senaryosu: Vurgulama Direktifi ve Para Birimi Pipe'\u0131<\/strong><\/p>\n Bir uygulamada, fare \u00fczerine gelindi\u011finde bir elementin arka plan rengini de\u011fi\u015ftiren bir Bu snippetler, Angular'\u0131n tekrar kullan\u0131labilir kod yap\u0131lar\u0131n\u0131 h\u0131zla olu\u015fturman\u0131z\u0131 sa\u011flar, b\u00f6ylece daha az boilerplate kod yazarak uygulaman\u0131z\u0131n temel i\u015flevselli\u011fine odaklanabilirsiniz.<\/p>\n Angular uygulamalar\u0131nda reaktif programlama ve \u00f6zellikle RxJS k\u00fct\u00fcphanesi, asenkron i\u015flemleri y\u00f6netmek ve karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131 kontrol etmek i\u00e7in vazge\u00e7ilmezdir. Ancak RxJS'in zengin operat\u00f6r seti ve Observable yap\u0131s\u0131, ba\u015flang\u0131\u00e7ta baz\u0131 geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Neyse ki, Angular snippetleri RxJS ile \u00e7al\u0131\u015fmay\u0131 da b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. Bu b\u00f6l\u00fcmde, RxJS aboneliklerini y\u00f6netmek, pop\u00fcler operat\u00f6rleri kullanmak ve genel reaktif desenleri uygulamak i\u00e7in faydal\u0131 snippetleri ele alaca\u011f\u0131z.<\/p>\n RxJS'in temelini Observable'lar olu\u015fturur. Bir Observable'a abone olmak ve aboneli\u011fi do\u011fru \u015fekilde y\u00f6netmek (memory leakleri \u00f6nlemek i\u00e7in) \u00e7ok \u00f6nemlidir. <\/code><\/p>\n Bu snippet, Observable'\u0131n \u00fc\u00e7 temel bildirimini (next, error, complete) i\u00e7eren bir yap\u0131y\u0131 otomatik olarak ekler. Bu, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in do\u011fru abonelik kal\u0131b\u0131n\u0131 benimsemelerine yard\u0131mc\u0131 olurken, deneyimli geli\u015ftiricilerin de zamandan tasarruf etmesini sa\u011flar. Ayr\u0131ca, RxJS'te en s\u0131k kullan\u0131lan Subject t\u00fcrleri i\u00e7in de snippetler mevcuttur. \u00d6rne\u011fin, <\/code><\/p>\n RxJS operat\u00f6rleri, veri ak\u0131\u015flar\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrmek, filtrelemek ve birle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu operat\u00f6rleri hat\u0131rlamak ve do\u011fru s\u0131rayla uygulamak bazen zor olabilir. Snippetler, <\/code><\/p>\n Bu, \u00f6zellikle kullan\u0131c\u0131 girdilerine dayal\u0131 arama i\u015flevleri gibi senaryolarda hayat kurtar\u0131c\u0131d\u0131r. Vaka Analizi: Arama Kutusu Debounce \u00d6rne\u011fi<\/strong><\/p>\n Bir arama kutusuna yaz\u0131lan her karakterde API'ye istek g\u00f6ndermek yerine, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini beklemek performans a\u00e7\u0131s\u0131ndan daha verimli olacakt\u0131r. RxJS'in <\/code><\/p>\n Bu \u00f6rnek, RxJS operat\u00f6rlerini kullanarak karma\u015f\u0131k bir asenkron senaryoyu nas\u0131l basit ve okunabilir bir \u015fekilde ele alabilece\u011finizi g\u00f6sterir. Snippetler, bu operat\u00f6rleri hat\u0131rlaman\u0131z\u0131 ve do\u011fru \u015fekilde uygulaman\u0131z\u0131 h\u0131zland\u0131rarak, RxJS'in g\u00fcc\u00fcnden tam olarak faydalanman\u0131z\u0131 sa\u011flar. Ayr\u0131ca, RxJS'in temizli\u011fini ve deklaratif do\u011fas\u0131n\u0131 koruman\u0131za yard\u0131mc\u0131 olur.<\/p>\n Angular uygulamalar\u0131nda kullan\u0131c\u0131 giri\u015flerini toplamak ve do\u011frulamak i\u00e7in formlar \u00e7ok \u00f6nemli bir rol oynar. Angular, reaktif formlar ve \u015fablon odakl\u0131 formlar olmak \u00fczere iki farkl\u0131 yakla\u015f\u0131m sunar. Her iki yakla\u015f\u0131m da, \u00f6zellikle karma\u015f\u0131k formlar s\u00f6z konusu oldu\u011funda, \u00f6nemli miktarda kod yazmay\u0131 gerektirebilir. Form kontrollerini tan\u0131mlamak, validasyon kurallar\u0131 eklemek ve hata mesajlar\u0131n\u0131 g\u00f6stermek gibi tekrar eden g\u00f6revler, Angular snippetleri sayesinde b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirilebilir ve h\u0131zland\u0131r\u0131labilir. Bu b\u00f6l\u00fcmde, form y\u00f6netimini ve validasyon s\u00fcre\u00e7lerini optimize etmek i\u00e7in kullanabilece\u011finiz anahtar snippetleri ele alaca\u011f\u0131z.<\/p>\n Reaktif formlar, form mant\u0131\u011f\u0131n\u0131 TypeScript s\u0131n\u0131f\u0131nda y\u00f6netmek i\u00e7in tercih edilen yakla\u015f\u0131md\u0131r. Burada <\/code><\/p>\n Bu snippet, form grubunu ve i\u00e7ine ekleyebilece\u011finiz temel kontrolleri otomatik olarak getirir. Her bir <\/code><\/p>\n Bu, validasyon listelerini hat\u0131rlama ve do\u011fru s\u00f6zdizimini yazma zahmetini ortadan kald\u0131r\u0131r. Daha karma\u015f\u0131k validasyonlar i\u00e7in \u00f6zel validat\u00f6r fonksiyonlar\u0131 yazman\u0131z gerekti\u011finde bile, temel yap\u0131lar\u0131 snippetler arac\u0131l\u0131\u011f\u0131yla h\u0131zla olu\u015fturabilirsiniz. Ayr\u0131ca, \u015fablon i\u00e7inde hata mesajlar\u0131n\u0131 g\u00f6stermek de \u00f6nemli bir ad\u0131md\u0131r. Bir form kontrol\u00fcn\u00fcn ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 veya belirli bir hata t\u00fcr\u00fcne sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in <\/code><\/p>\n Bu snippet, Ger\u00e7ek D\u00fcnya Senaryosu: Kullan\u0131c\u0131 Kay\u0131t Formu<\/strong><\/p>\n Bir web sitesi i\u00e7in kullan\u0131c\u0131 kay\u0131t formu olu\u015fturdu\u011funuzu varsayal\u0131m. Bu formda ad, soyad, e-posta ve \u015fifre alanlar\u0131 bulunacak ve her alan i\u00e7in belirli validasyon kurallar\u0131 uygulanacakt\u0131r. \u0130\u015fte snippetlerle bu formu nas\u0131l kolayca olu\u015fturabilece\u011finiz:<\/p>\n <\/code><\/p>\nG\u00fcndelik Angular G\u00f6revleriniz \u0130\u00e7in Temel Bile\u015fen Snippetleri: H\u0131z ve Tutarl\u0131l\u0131k<\/h2>\n
Yeni Bir Angular Bile\u015feni H\u0131zla Olu\u015fturma: ng-component ve T\u00fcrevleri<\/h3>\n
ng-component<\/code> gibi snippetler bu s\u00fcreci tek bir komuta indirger. \u00d6rne\u011fin, ‘ng-component’ yaz\u0131p Tab tu\u015funa bast\u0131\u011f\u0131n\u0131zda, a\u015fa\u011f\u0131daki gibi bir iskelet kod otomatik olarak olu\u015fturulur:<\/p>\n\nimport { Component, OnInit } from '@angular\/core';\n\n@Component({\n selector: 'app-my-component',\n templateUrl: '.\/my-component.component.html',\n styleUrls: ['.\/my-component.component.css']\n})\nexport class MyComponentComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n<\/pre>\nng-input<\/code> ve ng-output<\/code> gibi snippetler de mevcuttur. Bir Input<\/code> \u00f6zelli\u011fi tan\u0131mlamak i\u00e7in ng-input<\/code> yazmak yeterlidir:<\/p>\n\n@Input() myInput: any;\n<\/pre>\nOutput<\/code> \u00f6zelli\u011fi tan\u0131mlayarak olay yayabilir ve ebeveyn bile\u015fenlerle ileti\u015fim kurabilirsiniz. ng-output<\/code> snippet'i size \u015fu yap\u0131y\u0131 sunar:<\/p>\n\n@Output() myOutput = new EventEmitter();\n<\/pre>\nProductCardComponent<\/code> olu\u015fturman\u0131z gerekti\u011fini d\u00fc\u015f\u00fcn\u00fcn. Bu bile\u015fen, \u00fcr\u00fcn bilgilerini (Product<\/code> objesi) d\u0131\u015far\u0131dan alacak ve bir \"sepete ekle\" butonu t\u0131kland\u0131\u011f\u0131nda olay\u0131 yay\u0131nlayacakt\u0131r. ng-component<\/code>, ng-input<\/code> ve ng-output<\/code> snippetlerini kullanarak bu bile\u015feni saniyeler i\u00e7inde \u015f\u00f6yle olu\u015fturabilirsiniz:<\/p>\n\n
product-card.component.ts<\/code> dosyas\u0131nda 'ng-component' yaz\u0131n ve Tab'a bas\u0131n.<\/li>\n@Input() product: Product;<\/code> olarak d\u00fczenleyin.<\/li>\n@Output() addToCart = new EventEmitteraddToCart()<\/code> metodunu ekleyin ve this.addToCart.emit(this.product);<\/code> \u015feklinde kullan\u0131n.<\/li>\n<\/ol>\nVeri Y\u00f6netimi \u0130\u00e7in H\u0131zl\u0131 Servis \u015eablonlar\u0131: ng-service ve HTTP \u0130stekleri<\/h3>\n
ng-service<\/code> snippet'i, temel bir servis yap\u0131s\u0131n\u0131 h\u0131zla olu\u015fturman\u0131za yard\u0131mc\u0131 olur:<\/p>\n\nimport { Injectable } from '@angular\/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class MyService {\n\n constructor() { }\n\n}\n<\/pre>\nng-http-get<\/code> yazabilirsiniz:<\/p>\n\nimport { HttpClient } from '@angular\/common\/http';\nimport { Injectable } from '@angular\/core';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DataService {\n\n constructor(private http: HttpClient) { }\n\n getData(): Observableng-http-post<\/code>, ng-http-put<\/code>, ng-http-delete<\/code> gibi snippetler de mevcuttur. Bu snippetler, HttpClient<\/code>'\u0131 enjekte etme ve temel Observable yap\u0131s\u0131n\u0131 kurma gibi tekrar eden i\u015flemleri otomatikle\u015ftirir.<\/p>\nUserService<\/code>'e ihtiyac\u0131n\u0131z olabilir. A\u015fa\u011f\u0131daki ad\u0131mlarla bu servisi h\u0131zla olu\u015fturabilirsiniz:<\/p>\n\n
user.service.ts<\/code> dosyas\u0131nda 'ng-service' yaz\u0131n ve Tab'a bas\u0131n.<\/li>\nconstructor<\/code> i\u00e7ine 'private http: HttpClient' ekleyin.<\/li>\ngetUsers()<\/code> metodu i\u00e7in 'ng-http-get' yaz\u0131n ve @Injectable<\/code>'dan sonra otomatik tamamlamay\u0131 kullan\u0131n, endpoint'i \/api\/users<\/code> olarak g\u00fcncelleyin.<\/li>\naddUser()<\/code> metodu i\u00e7in 'ng-http-post' yaz\u0131n, endpoint'i \/api\/users<\/code> ve body'i user: any<\/code> olarak g\u00fcncelleyin.<\/li>\n<\/ol>\nTekrar Edilebilir Mant\u0131k ve D\u00f6n\u00fc\u015f\u00fcmler \u0130\u00e7in Snippetler: Directive ve Pipe \u015eablonlar\u0131<\/h3>\n
ng-directive<\/code> yazarak temel bir direktif olu\u015fturabilirsiniz:<\/p>\n\nimport { Directive } from '@angular\/core';\n\n@Directive({\n selector: '[appMyDirective]'\n})\nexport class MyDirective {\n\n constructor() { }\n\n}\n<\/pre>\nHostListener<\/code> veya HostBinding<\/code> eklemek istedi\u011finizde de ilgili snippetleri kullanabilirsiniz. \u00d6rne\u011fin, ng-hostlistener<\/code> ile bir olay dinleyicisi ekleyebilirsiniz:<\/p>\n\n@HostListener('click') onClick() {\n \/\/ Olay i\u015fleme mant\u0131\u011f\u0131\n}\n<\/pre>\nng-pipe<\/code> snippet'i kullan\u0131l\u0131r:<\/p>\n\nimport { Pipe, PipeTransform } from '@angular\/core';\n\n@Pipe({\n name: 'myPipe'\n})\nexport class MyPipe implements PipeTransform {\n\n transform(value: unknown, ...args: unknown[]): unknown {\n return null;\n }\n\n}\n<\/pre>\nHighlightDirective<\/code> ve say\u0131lar\u0131 para birimine \u00e7eviren bir CurrencyFormatPipe<\/code>'a ihtiyac\u0131n\u0131z oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n\n
highlight.directive.ts<\/code> dosyas\u0131nda 'ng-directive' yaz\u0131n ve Tab'a bas\u0131n.<\/li>\nmouseenter<\/code> ile mouseleave<\/code> olaylar\u0131 i\u00e7in iki ayr\u0131 dinleyici ekleyerek elementin rengini de\u011fi\u015ftirin.<\/li>\ncurrency-format.pipe.ts<\/code> dosyas\u0131nda 'ng-pipe' yaz\u0131n ve Tab'a bas\u0131n.<\/li>\ntransform<\/code> metodunu, gelen say\u0131y\u0131 Intl.NumberFormat<\/code> kullanarak istenen para birimi format\u0131na d\u00f6n\u00fc\u015ft\u00fcrecek \u015fekilde d\u00fczenleyin.<\/li>\n<\/ol>\nReaktif Programlama ve RxJS Ak\u0131\u015flar\u0131n\u0131 H\u0131zland\u0131rma: Operat\u00f6r ve Abonelik Snippetleri<\/h2>\n
ng-subscribe<\/code> gibi snippetler, temel abonelik yap\u0131s\u0131n\u0131 h\u0131zl\u0131ca olu\u015fturman\u0131za olanak tan\u0131r:<\/p>\n\nthis.yourObservable.subscribe({\n next: (data) => {\n \/\/ Veri i\u015fleme\n },\n error: (error) => {\n \/\/ Hata i\u015fleme\n },\n complete: () => {\n \/\/ Tamamlanma i\u015fleme\n }\n});\n<\/pre>\nng-subject<\/code>, ng-behaviorsubject<\/code>, ng-replaysubject<\/code> yazarak ilgili Subject'leri kolayca olu\u015fturabilirsiniz:<\/p>\n\nimport { Subject } from 'rxjs';\n\nprivate mySubject = new Subjectpipe<\/code> i\u00e7indeki pop\u00fcler operat\u00f6rleri an\u0131nda eklemenizi sa\u011flar. \u00d6rne\u011fin, ng-switchmap<\/code>, ng-debouncetime<\/code>, ng-takeuntil<\/code>, ng-filter<\/code> gibi snippetler mevcuttur. Bir HTTP iste\u011fi zincirinde switchMap<\/code> kullanmak istedi\u011finizde, sadece ng-switchmap<\/code> yaz\u0131p Tab'a basman\u0131z yeterlidir:<\/p>\n\nthis.sourceObservable.pipe(\n switchMap((value) => {\n return this.anotherObservable(value);\n })\n).subscribe();\n<\/pre>\ndebounceTime<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, gereksiz API isteklerini \u00f6nleyerek performans\u0131 art\u0131rabilirsiniz.<\/p>\ndebounceTime<\/code> operat\u00f6r\u00fc bu senaryo i\u00e7in idealdir. A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 ve ilgili snippetleri kullanarak bu i\u015flevi kolayca uygulayabilirsiniz:<\/p>\n\n
FormControl<\/code> ve bir Subject<\/code> veya Observable<\/code> olu\u015fturun.<\/li>\nng-debouncetime<\/code> yazarak debounceTime(300)<\/code> operat\u00f6r\u00fcn\u00fc ekleyin (300ms gecikme).<\/li>\nng-distinctuntilchanged<\/code> yazarak ayn\u0131 de\u011feri tekrar tekrar g\u00f6ndermeyi engelleyin.<\/li>\nng-switchmap<\/code> ile API iste\u011fini yap\u0131n, b\u00f6ylece \u00f6nceki istek tamamlanmadan yeni bir arama geldi\u011finde eski istek iptal edilir.<\/li>\n<\/ol>\n\nimport { Component, OnInit } from '@angular\/core';\nimport { FormControl } from '@angular\/forms';\nimport { Subject, Observable } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, switchMap } from 'rxjs\/operators';\nimport { DataService } from '..\/data.service'; \/\/ \u00d6rnek servis\n\n@Component({\n selector: 'app-search',\n template: \n \n
takeUntil<\/code> veya AsyncPipe<\/code> kullanmak, memory leakleri \u00f6nlemek i\u00e7in kritik \u00f6neme sahiptir. ng-takeuntil<\/code> snippet'i ile kolayca bir Subject<\/code> olu\u015fturup ngOnDestroy<\/code> i\u00e7inde tamamlayabilirsiniz.\n <\/div>\nForm Y\u00f6netimi ve Validasyon Snippetleri: Hata Ay\u0131klamay\u0131 Kolayla\u015ft\u0131rma<\/h2>\n
FormGroup<\/code> ve FormControl<\/code> gibi s\u0131n\u0131flar kullan\u0131l\u0131r. ng-form-group<\/code> snippet'i, temel bir form grubunu h\u0131zla olu\u015fturman\u0131za yard\u0131mc\u0131 olur:<\/p>\n\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\n\nthis.myForm = new FormGroup({\n name: new FormControl('', Validators.required),\n email: new FormControl('', [Validators.required, Validators.email])\n});\n<\/pre>\nFormControl<\/code> i\u00e7in ng-form-control<\/code> yazarak daha fazla kontrol ekleyebilirsiniz. Validasyonlar da formlar\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Angular, bir\u00e7ok yerle\u015fik validat\u00f6r sunar. ng-validator-required<\/code>, ng-validator-email<\/code>, ng-validator-minlength<\/code> gibi snippetler, gerekli validat\u00f6rleri an\u0131nda FormControl tan\u0131m\u0131n\u0131za eklemenizi sa\u011flar:<\/p>\n\nnew FormControl('', Validators.required) \/\/ ng-validator-required\nnew FormControl('', [Validators.required, Validators.email]) \/\/ ng-validator-email\nnew FormControl('', Validators.minLength(5)) \/\/ ng-validator-minlength\n<\/pre>\nng-form-error<\/code> gibi snippetler kullan\u0131labilir:<\/p>\n\n*ngIf<\/code> ile hata kontrollerini i\u00e7eren bir div yap\u0131s\u0131 olu\u015fturur ve touched<\/code> veya dirty<\/code> gibi durumlar\u0131 kontrol ederek kullan\u0131c\u0131 dostu hata mesajlar\u0131 g\u00f6sterir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirirken geli\u015ftirme s\u00fcrecini de h\u0131zland\u0131r\u0131r.<\/p>\n\n
ng-form-group<\/code> yaz\u0131n ve Tab'a bas\u0131n. Form grubunuzu registrationForm<\/code> olarak adland\u0131r\u0131n.<\/li>\nname<\/code>, email<\/code>, password<\/code> alanlar\u0131 i\u00e7in ng-form-control<\/code> yazarak kontrolleri olu\u015fturun.<\/li>\nname<\/code> i\u00e7in ng-validator-required<\/code> ve ng-validator-minlength(3)<\/code> ekleyin.<\/li>\nemail<\/code> i\u00e7in ng-validator-required<\/code> ve ng-validator-email<\/code> ekleyin.<\/li>\npassword<\/code> i\u00e7in ng-validator-required<\/code> ve ng-validator-minlength(6)<\/code> ekleyin.<\/li>\ninput<\/code> eleman\u0131 i\u00e7in [formControlName]<\/code> ba\u011flamas\u0131n\u0131 yap\u0131n.<\/li>\ninput<\/code>'un alt\u0131nda, ng-form-error<\/code> snippet'ini kullanarak ilgili hata mesajlar\u0131n\u0131 g\u00f6sterin. \u00d6rne\u011fin, email alan\u0131 i\u00e7in hem required<\/code> hem de email<\/code> hatalar\u0131n\u0131 kontrol edin.<\/li>\n<\/ol>\n\n\/\/ registration.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\n\n@Component({\n selector: 'app-registration',\n templateUrl: '.\/registration.component.html',\n styleUrls: ['.\/registration.component.css']\n})\nexport class RegistrationComponent implements OnInit {\n registrationForm: FormGroup;\n\n constructor() { }\n\n ngOnInit(): void {\n this.registrationForm = new FormGroup({\n name: new FormControl('', [Validators.required, Validators.minLength(3)]),\n email: new FormControl('', [Validators.required, Validators.email]),\n password: new FormControl('', [Validators.required, Validators.minLength(6)])\n });\n }\n\n onSubmit(): void {\n if (this.registrationForm.valid) {\n console.log('Form Submitted!', this.registrationForm.value);\n } else {\n console.log('Form is invalid');\n }\n }\n}\n<\/pre>\n\n\n