G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131 beklentileri her zamankinden daha y\u00fcksek. H\u0131zl\u0131, dinamik ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek, yaz\u0131l\u0131m m\u00fchendislerinin \u00f6ncelikli hedeflerinden biri haline geldi. Peki, bu hedeflere ula\u015fmak i\u00e7in hangi ara\u00e7lara ihtiyac\u0131m\u0131z var? \u0130\u015fte tam da bu noktada, Google taraf\u0131ndan geli\u015ftirilen g\u00fc\u00e7l\u00fc bir frontend (\u00f6n y\u00fcz) framework’\u00fc (yaz\u0131l\u0131m \u00e7er\u00e7evesi) olan Angular devreye giriyor. Angular, b\u00fcy\u00fck \u00f6l\u00e7ekli ve performans odakl\u0131 uygulamalar geli\u015ftirmek isteyen ekipler i\u00e7in kapsaml\u0131 bir \u00e7\u00f6z\u00fcm sunar. Bu makale, Angular’\u0131n temel \u00f6zelliklerini, bu \u00f6zelliklerin modern web geli\u015ftirme s\u00fcre\u00e7lerinde nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve her geli\u015ftiricinin neden bu konuya hakim olmas\u0131 gerekti\u011fini derinlemesine inceleyecektir. \u0130ster yeni ba\u015flayan bir geli\u015ftirici olun, ister deneyimli bir profesyonel, Angular’\u0131n sundu\u011fu bu temel ara\u00e7 setini anlamak, projelerinizin kalitesini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\n
Angular, tek sayfa uygulamalar\u0131 (Single Page Application – SPA) geli\u015ftirmek i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131, TypeScript tabanl\u0131 bir frontend framework’\u00fcd\u00fcr. SPA’lar, t\u00fcm sayfa yenilemeleri olmadan i\u00e7eri\u011fi dinamik olarak y\u00fckleyerek kullan\u0131c\u0131lara kesintisiz bir deneyim sunar. Gmail, Netflix ve Forbes gibi pop\u00fcler platformlar, SPA mimarisinin g\u00fcc\u00fcn\u00fc g\u00f6steren iyi \u00f6rneklerdir. Angular’\u0131n tercih edilmesinin bir\u00e7ok g\u00fc\u00e7l\u00fc nedeni vard\u0131r:<\/p>\n
K\u0131sacas\u0131, Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc, kapsaml\u0131 ve g\u00fcvenilir bir platform sunar. Bu framework’\u00fc \u00f6\u011frenmek, \u00f6zellikle kurumsal projelerde kendinize sa\u011flam bir yer edinmenizi sa\u011flayacakt\u0131r.<\/p>\n
Angular’\u0131n kalbinde, uygulaman\u0131n yap\u0131 ta\u015flar\u0131 olan bile\u015fenler ve bu bile\u015fenleri organize eden mod\u00fcller yer al\u0131r. Bu iki kavram\u0131 anlamak, Angular ile geli\u015ftirme yapman\u0131n ilk ve en \u00f6nemli ad\u0131m\u0131d\u0131r.<\/p>\n
Bile\u015fenler (Components), Angular uygulamalar\u0131n\u0131n temel g\u00f6rsel ve mant\u0131ksal birimleridir. Her bile\u015fen, bir g\u00f6r\u00fcn\u00fcm (HTML \u015fablonu), bu g\u00f6r\u00fcn\u00fcm\u00fcn davran\u0131\u015f\u0131n\u0131 tan\u0131mlayan bir TypeScript s\u0131n\u0131f\u0131 ve stilini belirleyen CSS kodlar\u0131ndan olu\u015fur. Bile\u015fenler, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alar halinde tasarlan\u0131r, bu da kodun d\u00fczenli, bak\u0131m\u0131 kolay ve test edilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Bir bile\u015fen olu\u015ftururken, Ger\u00e7ek d\u00fcnya senaryosu olarak bir e-ticaret sitesindeki \u00fcr\u00fcn kart\u0131 bile\u015fenini d\u00fc\u015f\u00fcnelim. Bu bile\u015fen, \u00fcr\u00fcn\u00fcn g\u00f6rselini, ad\u0131n\u0131, fiyat\u0131n\u0131 ve “Sepete Ekle” d\u00fc\u011fmesini i\u00e7erebilir. Her \u00fcr\u00fcn i\u00e7in bu kart\u0131 tekrar tekrar yazmak yerine, tek bir Yukar\u0131daki \u00f6rnekte, Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r ve uygulaman\u0131n daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar.<\/p>\n Mod\u00fcller (Modules), Angular uygulamalar\u0131n\u0131 mant\u0131ksal olarak d\u00fczenlemek i\u00e7in kullan\u0131l\u0131r. Her Angular uygulamas\u0131 en az bir k\u00f6k mod\u00fcle ( Mod\u00fcller de bile\u015fenler gibi bir dekorat\u00f6r ile tan\u0131mlan\u0131r: \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda “\u00dcr\u00fcnler” ve “Kullan\u0131c\u0131 Profili” gibi farkl\u0131 \u00f6zellik alanlar\u0131 olabilir. Bu alanlar\u0131 ayr\u0131 mod\u00fcllere ay\u0131rmak, uygulaman\u0131n daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar. Her bir \u00f6zellik mod\u00fcl\u00fc, kendi bile\u015fenlerini, servislerini ve y\u00f6nlendirme ayarlar\u0131n\u0131 i\u00e7erebilir. Bu sayede, bir geli\u015ftirici sadece \u00fcr\u00fcnlerle ilgili k\u0131sma odaklan\u0131rken, di\u011fer k\u0131s\u0131mlar\u0131n kodundan etkilenmez.<\/p>\n Angular’\u0131n dinamik ve etkile\u015fimli uygulamalar olu\u015fturmadaki en g\u00fc\u00e7l\u00fc yeteneklerinden biri, veri ba\u011flama mekanizmas\u0131d\u0131r. Bu mekanizma, bile\u015fenler ve DOM (Belge Nesne Modeli) aras\u0131nda veri ak\u0131\u015f\u0131n\u0131 y\u00f6netirken, y\u00f6nergeler (directives) ise HTML elementlerinin davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmemizi sa\u011flar.<\/p>\n Veri ba\u011flama (Data Binding), Angular’\u0131n temel \u00f6zelliklerinden biridir ve uygulama verileri ile HTML \u015fablonu aras\u0131ndaki senkronizasyonu sa\u011flar. Bu sayede, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) verilerdeki de\u011fi\u015fikliklere otomatik olarak tepki verir ve g\u00fcncellenir. Angular d\u00f6rt ana veri ba\u011flama t\u00fcr\u00fc sunar:<\/p>\n Burada Burada Kullan\u0131c\u0131 input alan\u0131na bir \u015feyler yazd\u0131\u011f\u0131nda, Bu veri ba\u011flama y\u00f6ntemleri, Angular’\u0131n dinamik aray\u00fczler olu\u015fturmadaki g\u00fcc\u00fcn\u00fc ortaya koyar. Geli\u015ftiricilerin, DOM manip\u00fclasyonuyla u\u011fra\u015fmadan, sadece veri modellerini g\u00fcncelleyerek kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc kontrol etmelerini sa\u011flar.<\/p>\n Y\u00f6nergeler (Directives), DOM’u de\u011fi\u015ftiren veya HTML elementlerinin davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc dinamik olarak kontrol eden \u00f6zel i\u015faretleyicilerdir. Angular \u00fc\u00e7 t\u00fcr y\u00f6nerge sunar:<\/p>\n Burada Burada Y\u00f6nergeler, HTML’i daha dinamik ve esnek hale getirerek karma\u015f\u0131k UI mant\u0131\u011f\u0131n\u0131 \u015fablonlar i\u00e7inde y\u00f6netmemizi sa\u011flar. Bu sayede, JavaScript ile do\u011frudan DOM manip\u00fclasyonu yapma ihtiyac\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azal\u0131r ve kod daha temiz ve anla\u015f\u0131l\u0131r hale gelir.<\/p>\n Bile\u015fenler, uygulaman\u0131n g\u00f6rsel aray\u00fcz\u00fcn\u00fc ve kullan\u0131c\u0131 etkile\u015fimini y\u00f6netirken, i\u015f mant\u0131\u011f\u0131, veri y\u00f6netimi ve di\u011fer yard\u0131mc\u0131 fonksiyonlar genellikle servisler arac\u0131l\u0131\u011f\u0131yla y\u00fcr\u00fct\u00fcl\u00fcr. Servisler, kodun yeniden kullan\u0131labilirli\u011fini, test edilebilirli\u011fini ve uygulaman\u0131n genel mimarisinin temizli\u011fini sa\u011flayan \u00f6nemli bir Angular kavram\u0131d\u0131r. Servislerin bile\u015fenlere nas\u0131l ula\u015ft\u0131r\u0131ld\u0131\u011f\u0131n\u0131 ise ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu (Dependency Injection – DI) mekanizmas\u0131 y\u00f6netir.<\/p>\n Servisler (Services), belirli bir g\u00f6revi yerine getiren, i\u015f mant\u0131\u011f\u0131n\u0131 veya veri y\u00f6netimini i\u00e7eren TypeScript s\u0131n\u0131flar\u0131d\u0131r. Bir servis genellikle veri \u00e7ekme (API \u00e7a\u011fr\u0131lar\u0131), veri d\u00f6n\u00fc\u015ft\u00fcrme, durum y\u00f6netimi veya karma\u015f\u0131k hesaplamalar gibi i\u015flemleri yapar. Bile\u015fenlerin aksine, servisler do\u011frudan bir g\u00f6r\u00fcn\u00fcmle (HTML \u015fablonu) ili\u015fkilendirilmezler. Bunun yerine, birden fazla bile\u015fen veya ba\u015fka servisler taraf\u0131ndan kullan\u0131lmak \u00fczere tasarlanm\u0131\u015flard\u0131r.<\/p>\n Bir servisi Angular’a bildirmek i\u00e7in Ger\u00e7ek d\u00fcnya senaryosu olarak, bir film kiralama uygulamas\u0131nda filmleri getiren bir Yukar\u0131daki Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection – DI), Angular’\u0131n temel tasar\u0131m desenlerinden biridir ve bile\u015fenlerin veya di\u011fer servislerin ihtiya\u00e7 duydu\u011fu ba\u011f\u0131ml\u0131l\u0131klar\u0131 (servisler, yap\u0131land\u0131rma de\u011ferleri vb.) d\u0131\u015far\u0131dan sa\u011flamak i\u00e7in kullan\u0131l\u0131r. DI, kodunuzu daha mod\u00fcler, esnek ve test edilebilir hale getirir.<\/p>\n Angular’da DI, bir s\u0131n\u0131f\u0131n (\u00f6rne\u011fin bir bile\u015fen veya ba\u015fka bir servis) kurucu metodunda (constructor) ihtiya\u00e7 duydu\u011fu ba\u011f\u0131ml\u0131l\u0131klar\u0131 belirtmesiyle \u00e7al\u0131\u015f\u0131r. Angular’\u0131n enjekt\u00f6r sistemi, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 otomatik olarak bulur ve s\u0131n\u0131f\u0131n bir \u00f6rne\u011fini olu\u015ftururken sa\u011flar. Bu sayede, bir bile\u015fen, ihtiya\u00e7 duydu\u011fu servisi kendi i\u00e7inde olu\u015fturmak yerine, Angular’\u0131n ona sa\u011flamas\u0131n\u0131 bekler.<\/p>\n \u00d6rne\u011fimizdeki Yukar\u0131daki DI’nin faydalar\u0131 \u015funlard\u0131r:<\/p>\n Servisler ve ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu, Angular’\u0131n sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar olu\u015fturma yetene\u011finin temelini olu\u015fturur. Bu mekanizmalar sayesinde, uygulaman\u0131n i\u015f mant\u0131\u011f\u0131 g\u00f6rsel aray\u00fczden ayr\u0131l\u0131r, bu da b\u00fcy\u00fck ve karma\u015f\u0131k projelerin y\u00f6netimini \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n Angular’\u0131n g\u00fcc\u00fc sadece bile\u015fenler, mod\u00fcller, veri ba\u011flama ve servislerle s\u0131n\u0131rl\u0131 de\u011fildir. Kullan\u0131c\u0131 deneyimini geli\u015ftiren, uygulaman\u0131n ak\u0131\u015f\u0131n\u0131 ve performans\u0131n\u0131 optimize eden bir dizi ba\u015fka temel \u00f6zellik de mevcuttur. Bu \u00f6zellikler, modern ve profesyonel web uygulamalar\u0131 geli\u015ftirmek i\u00e7in vazge\u00e7ilmezdir.<\/p>\n Tek Sayfa Uygulamalar\u0131 (SPA) i\u00e7in y\u00f6nlendirme (routing), farkl\u0131 URL’lere gidildi\u011finde sayfan\u0131n tamam\u0131n\u0131 yeniden y\u00fcklemeden farkl\u0131 bile\u015fenleri veya g\u00f6r\u00fcn\u00fcmleri g\u00f6sterme yetene\u011fidir. Angular Router, bu i\u015flevi sa\u011flayan g\u00fc\u00e7l\u00fc bir mod\u00fcld\u00fcr. Kullan\u0131c\u0131lar\u0131n uygulaman\u0131z i\u00e7inde gezinmesini ve belirli bir i\u00e7eri\u011fe do\u011frudan eri\u015fmesini sa\u011flar.<\/p>\n Angular’da y\u00f6nlendirme, Yukar\u0131daki \u00f6rnekte:<\/p>\n \u015eablonlarda ise Y\u00f6nlendirme, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda sezgisel bir \u015fekilde gezinmesini sa\u011flayarak geli\u015fmi\u015f bir kullan\u0131c\u0131 deneyimi sunar. Ayr\u0131ca, tembel y\u00fckleme (lazy loading) ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, sadece ihtiya\u00e7 duyulan mod\u00fcllerin y\u00fcklenmesi sa\u011flanarak uygulaman\u0131n performans\u0131 art\u0131r\u0131labilir.<\/p>\n Angular bile\u015fenleri, olu\u015fturulduklar\u0131 andan itibaren yok edilene kadar belirli bir ya\u015fam d\u00f6ng\u00fcs\u00fcnden ge\u00e7erler. Angular, bu ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn belirli anlar\u0131nda \u00e7al\u0131\u015ft\u0131rabilece\u011finiz metotlar olan “ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131” (lifecycle hooks) sa\u011flar. Bu kancalar, bile\u015fenlerinizi daha hassas bir \u015fekilde kontrol etmenize ve belirli olaylara tepki vermenize olanak tan\u0131r.<\/p>\n En s\u0131k kullan\u0131lan ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131 \u015funlard\u0131r:<\/p>\n Bir bile\u015fenin bu kancalar\u0131 uygulamak i\u00e7in ilgili aray\u00fcz\u00fc (\u00f6rne\u011fin Bu \u00f6rnekte, Borular (Pipes), Angular’da veriyi \u015fablonda g\u00f6r\u00fcnt\u00fclemeden \u00f6nce d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131lan basit fonksiyonlard\u0131r. Tarihleri bi\u00e7imlendirmek, para birimlerini g\u00f6stermek, metinleri b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harfe \u00e7evirmek veya listeleri filtrelemek gibi yayg\u0131n veri d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemleri i\u00e7in idealdirler. Borular, veriyi de\u011fi\u015ftirmeden sadece g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc d\u00f6n\u00fc\u015ft\u00fcrd\u00fckleri i\u00e7in bile\u015fen mant\u0131\u011f\u0131n\u0131 temiz tutmaya yard\u0131mc\u0131 olurlar.<\/p>\n Angular, bir\u00e7ok yerle\u015fik boru ile gelir:<\/p>\n@Component<\/code> dekorat\u00f6r\u00fcn\u00fc kullan\u0131r\u0131z. Bu dekorat\u00f6r, Angular’a bir s\u0131n\u0131f\u0131n bile\u015fen oldu\u011funu bildirir ve ona ait metadata (\u00fcst veri) sa\u011flar. En temel metadata \u00f6zellikleri \u015funlard\u0131r:<\/p>\n\n
selector<\/code>: Bu bile\u015feni HTML \u015fablonunda \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131lan CSS se\u00e7icisidir. \u00d6rne\u011fin, <app-urun-karti><\/app-urun-karti><\/code> \u015feklinde kullan\u0131labilir.<\/li>\ntemplateUrl<\/code> veya template<\/code>: Bile\u015fenin HTML \u015fablonunun yolunu veya do\u011frudan \u015fablon i\u00e7eri\u011fini belirtir.<\/li>\nstyleUrls<\/code> veya styles<\/code>: Bile\u015fenin stil dosyalar\u0131n\u0131n yollar\u0131n\u0131 veya do\u011frudan stil i\u00e7eri\u011fini belirtir.<\/li>\n<\/ul>\nUrunKartiComponent<\/code> olu\u015fturup farkl\u0131 \u00fcr\u00fcn verileriyle kullanabiliriz.<\/p>\n\n\/\/ urun-karti.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n selector: 'app-urun-karti',\n templateUrl: '.\/urun-karti.component.html',\n styleUrls: ['.\/urun-karti.component.css']\n})\nexport class UrunKartiComponent {\n @Input() urunAdi: string = '';\n @Input() urunFiyati: number = 0;\n @Input() urunResmi: string = '';\n\n sepeteEkle(): void {\n console.log(${this.urunAdi} sepete eklendi!<\/code>);\n \/\/ Sepete ekleme mant\u0131\u011f\u0131 burada yer alacak\n }\n}\n <\/code><\/pre>\n<\/div>\n\n<!-- urun-karti.component.html -->\n<div class=\"urun-karti\">\n <img [src]=\"urunResmi\" alt=\"{{ urunAdi }}\" class=\"urun-resmi\">\n <h3 class=\"urun-adi\">{{ urunAdi }}<\/h3>\n <p class=\"urun-fiyati\">{{ urunFiyati | currency:'TRY':'symbol':'1.2-2' }}<\/p>\n <button (click)=\"sepeteEkle()\" class=\"sepete-ekle-btn\">Sepete Ekle<\/button>\n<\/div>\n <\/code><\/pre>\n<\/div>\nUrunKartiComponent<\/code> bile\u015feni, d\u0131\u015far\u0131dan urunAdi<\/code>, urunFiyati<\/code> ve urunResmi<\/code> bilgilerini @Input()<\/code> dekorat\u00f6r\u00fc arac\u0131l\u0131\u011f\u0131yla al\u0131r. Bu sayede, ana bile\u015fenimizde (\u00f6rne\u011fin AppComponent<\/code>) bu kart\u0131 birden fazla kez farkl\u0131 \u00fcr\u00fcnlerle kullanabiliriz:<\/p>\n\n<!-- app.component.html -->\n<app-urun-karti \n urunAdi=\"Ak\u0131ll\u0131 Telefon\" \n [urunFiyati]=\"9999.90\" \n urunResmi=\"assets\/telefon.jpg\">\n<\/app-urun-karti>\n\n<app-urun-karti \n urunAdi=\"Diz\u00fcst\u00fc Bilgisayar\" \n [urunFiyati]=\"14999.00\" \n urunResmi=\"assets\/bilgisayar.jpg\">\n<\/app-urun-karti>\n <\/code><\/pre>\n<\/div>\nMod\u00fcller: Uygulaman\u0131z\u0131 Nas\u0131l D\u00fczenlersiniz?<\/h3>\n
AppModule<\/code>) sahiptir. Mod\u00fcller, ilgili bile\u015fenleri, servisleri, y\u00f6nergeleri ve borular\u0131 bir araya getirerek uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini tan\u0131mlar. Bu yap\u0131, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde kodun y\u00f6netilebilirli\u011fini ve okunabilirli\u011fini art\u0131r\u0131r.<\/p>\n@NgModule<\/code>. Bu dekorat\u00f6r\u00fcn temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n\n
declarations<\/code>: Bu mod\u00fcle ait olan bile\u015fenleri, y\u00f6nergeleri ve borular\u0131 (pipes) tan\u0131mlar.<\/li>\nimports<\/code>: Bu mod\u00fcl\u00fcn kulland\u0131\u011f\u0131 di\u011fer Angular mod\u00fcllerini veya kendi \u00f6zel mod\u00fcllerimizi i\u00e7eri aktar\u0131r. \u00d6rne\u011fin, y\u00f6nlendirme i\u00e7in RouterModule<\/code>, formlar i\u00e7in FormsModule<\/code> buraya eklenir.<\/li>\nproviders<\/code>: Bu mod\u00fcl taraf\u0131ndan sa\u011flanan servisleri (dependency injection – ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu i\u00e7in) tan\u0131mlar.<\/li>\nbootstrap<\/code>: Sadece k\u00f6k mod\u00fclde (AppModule<\/code>) kullan\u0131l\u0131r ve uygulaman\u0131n ba\u015flang\u0131\u00e7 bile\u015fenini belirtir.<\/li>\n<\/ul>\n\n\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\nimport { UrunlerModule } from '.\/urunler\/urunler.module'; \/\/ \u00dcr\u00fcnler mod\u00fcl\u00fcn\u00fc import ettik\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UrunlerModule \/\/ \u00dcr\u00fcnler mod\u00fcl\u00fcn\u00fc buraya ekledik\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n <\/code><\/pre>\n<\/div>\n\n\/\/ urunler\/urunler.module.ts\nimport { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { UrunListesiComponent } from '.\/urun-listesi\/urun-listesi.component';\nimport { UrunDetayComponent } from '.\/urun-detay\/urun-detay.component';\nimport { UrunKartiComponent } from '.\/urun-karti\/urun-karti.component'; \/\/ Kendi bile\u015fenimiz\n\n@NgModule({\n declarations: [\n UrunListesiComponent,\n UrunDetayComponent,\n UrunKartiComponent \/\/ Bu mod\u00fcldeki bile\u015fenleri tan\u0131mlad\u0131k\n ],\n imports: [\n CommonModule \/\/ ngIf, ngFor gibi temel y\u00f6nergeler i\u00e7in gerekli\n ],\n exports: [\n UrunKartiComponent \/\/ Bu mod\u00fcldeki bile\u015fenlerin d\u0131\u015far\u0131dan eri\u015filebilir olmas\u0131n\u0131 sa\u011flar\u0131z\n ]\n})\nexport class UrunlerModule { }\n <\/code><\/pre>\n<\/div>\nUrunlerModule<\/code>‘\u00fcn exports<\/code> dizisine UrunKartiComponent<\/code>‘i eklememiz, bu bile\u015fenin UrunlerModule<\/code>‘\u00fc i\u00e7eri aktaran di\u011fer mod\u00fcller taraf\u0131ndan kullan\u0131labilmesini sa\u011flar. Mod\u00fcllerin bu yap\u0131s\u0131, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesine ve test edilmesine olanak tan\u0131r. Ayr\u0131ca, tembel y\u00fckleme (lazy loading) ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, sadece ihtiya\u00e7 duyulan mod\u00fcllerin y\u00fcklenmesi sa\u011flanarak uygulaman\u0131n ba\u015flang\u0131\u00e7 performans\u0131 art\u0131r\u0131labilir. Bu, \u00f6zellikle mobil kullan\u0131c\u0131lar veya yava\u015f internet ba\u011flant\u0131s\u0131na sahip kullan\u0131c\u0131lar i\u00e7in kritik bir avantajd\u0131r.<\/p>\nVeri Ak\u0131\u015f\u0131n\u0131 Y\u00f6netmek: Veri Ba\u011flama (Data Binding) ve Y\u00f6nergeler (Directives)<\/h2>\n
Veri Ba\u011flama: Kullan\u0131c\u0131 Aray\u00fcz\u00fc ile Veri Aras\u0131ndaki K\u00f6pr\u00fc<\/h3>\n
\n
{{ }}<\/code>:<\/strong> Bile\u015fen s\u0131n\u0131f\u0131ndaki bir \u00f6zelli\u011fin de\u011ferini do\u011frudan HTML \u015fablonuna metin olarak yerle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu, tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131d\u0131r (bile\u015fenden g\u00f6r\u00fcn\u00fcme). \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ad\u0131n\u0131 veya bir \u00fcr\u00fcn\u00fcn a\u00e7\u0131klamas\u0131n\u0131 g\u00f6stermek i\u00e7in idealdir.\n\n<p>Ho\u015f geldiniz, {{ kullaniciAdi }}!<\/p>\n <\/code><\/pre>\n<\/p><\/div>\nkullaniciAdi<\/code>, bile\u015fen s\u0131n\u0131f\u0131nda tan\u0131mlanm\u0131\u015f bir \u00f6zelliktir.<\/li>\n[property]<\/code>:<\/strong> Bir HTML elementinin \u00f6zelli\u011fine (attribute) veya bir bile\u015fenin @Input()<\/code> \u00f6zelli\u011fine bile\u015fen s\u0131n\u0131f\u0131ndaki bir de\u011feri atamak i\u00e7in kullan\u0131l\u0131r. Bu da tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131d\u0131r (bile\u015fenden g\u00f6r\u00fcn\u00fcme). \u00d6rne\u011fin, bir resmin src<\/code> \u00f6zelli\u011fini veya bir d\u00fc\u011fmenin disabled<\/code> \u00f6zelli\u011fini dinamik olarak ayarlamak i\u00e7in kullan\u0131l\u0131r.\n\n<img [src]=\"resimUrl\" alt=\"\u00dcr\u00fcn Resmi\">\n<button [disabled]=\"isSepetBos\">Sipari\u015f Ver<\/button>\n <\/code><\/pre>\n<\/p><\/div>\nresimUrl<\/code> ve isSepetBos<\/code>, bile\u015fen s\u0131n\u0131f\u0131nda tan\u0131ml\u0131 \u00f6zelliklerdir.<\/li>\n(event)<\/code>:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fcndeki olaylara (t\u0131klama, klavye giri\u015fi, form g\u00f6nderme vb.) tepki vermek ve bile\u015fen s\u0131n\u0131f\u0131ndaki bir metodu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. Bu, tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131d\u0131r (g\u00f6r\u00fcn\u00fcme bile\u015fene).\n\n<button (click)=\"sepeteEkle()\">Sepete Ekle<\/button>\n<input (input)=\"onInputChange($event)\">\n <\/code><\/pre>\n<\/p><\/div>\nsepeteEkle()<\/code> metodu d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda, onInputChange()<\/code> metodu ise input alan\u0131na her karakter girildi\u011finde \u00e7al\u0131\u015f\u0131r.<\/li>\n[(ngModel)]<\/code>:<\/strong> Hem \u00f6zellik ba\u011flamay\u0131 hem de olay ba\u011flamay\u0131 birle\u015ftirerek bile\u015fen ve g\u00f6r\u00fcn\u00fcm aras\u0131nda \u00e7ift y\u00f6nl\u00fc bir senkronizasyon sa\u011flar. Genellikle form elemanlar\u0131nda kullan\u0131l\u0131r. ngModel<\/code> y\u00f6nergesini kullanmak i\u00e7in FormsModule<\/code>‘\u00fc uygulaman\u0131z\u0131n mod\u00fcl\u00fcne import etmeniz gerekir.\n\n<input [(ngModel)]=\"kullaniciMesaji\" placeholder=\"Mesaj\u0131n\u0131z\u0131 girin\">\n<p>Mesaj\u0131n\u0131z: {{ kullaniciMesaji }}<\/p>\n <\/code><\/pre>\n<\/p><\/div>\nkullaniciMesaji<\/code> \u00f6zelli\u011fi otomatik olarak g\u00fcncellenir. Ayn\u0131 \u015fekilde, kullaniciMesaji<\/code> \u00f6zelli\u011fi programatik olarak de\u011fi\u015firse, input alan\u0131ndaki de\u011fer de g\u00fcncellenir. Bu, formlarda veri giri\u015fi ve g\u00f6r\u00fcnt\u00fclemesi i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ol>\nY\u00f6nergeler: HTML’e G\u00fc\u00e7 Katman\u0131n Yollar\u0131<\/h3>\n
\n
\n
*ngIf<\/code>: Bir ko\u015fula ba\u011fl\u0131 olarak bir elementi DOM’a ekler veya DOM’dan kald\u0131r\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n y\u00f6netici olup olmad\u0131\u011f\u0131n\u0131 kontrol ederek belirli bir men\u00fc \u00f6\u011fesini g\u00f6stermek veya gizlemek.\n\n<div *ngIf=\"isLoggedIn\">Ho\u015f geldiniz, \u00fcye!<\/div>\n<div *ngIf=\"!isLoggedIn\">Giri\u015f yap\u0131n\u0131z.<\/div>\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n*ngFor<\/code>: Bir koleksiyon (dizi) \u00fczerinde d\u00f6ng\u00fc yaparak her \u00f6\u011fe i\u00e7in bir \u015fablonu tekrar eder. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesini veya yorumlar\u0131 g\u00f6r\u00fcnt\u00fclemek.\n\n<ul>\n <li *ngFor=\"let urun of urunler; let i = index\">\n {{ i + 1 }}. {{ urun.ad }} - {{ urun.fiyat | currency:'TRY' }}\n <\/li>\n<\/ul>\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n[ngSwitch]<\/code>, *ngSwitchCase<\/code>, *ngSwitchDefault<\/code>: Birden fazla ko\u015fuldan birine g\u00f6re farkl\u0131 \u015fablonlar\u0131 g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.\n\n<div [ngSwitch]=\"durum\">\n <p *ngSwitchCase=\"'beklemede'\">Sipari\u015finiz beklemede.<\/p>\n <p *ngSwitchCase=\"'yolda'\">Sipari\u015finiz yolda.<\/p>\n <p *ngSwitchDefault>Sipari\u015f durumu bilinmiyor.<\/p>\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\n<\/li>\n\n
[ngClass]<\/code>: Bir elementin CSS s\u0131n\u0131flar\u0131n\u0131 dinamik olarak eklemek veya kald\u0131rmak i\u00e7in kullan\u0131l\u0131r.\n\n<div [ngClass]=\"{'aktif': isActive, 'pasif': !isActive}\">\n Bu div aktif veya pasif olabilir.\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\nisActive<\/code> bir boolean (mant\u0131ksal) de\u011fi\u015fkendir.<\/li>\n[ngStyle]<\/code>: Bir elementin inline CSS stillerini dinamik olarak ayarlamak i\u00e7in kullan\u0131l\u0131r.\n\n<div [ngStyle]=\"{'background-color': renk, 'font-size.px': boyut}\">\n Bu div'in rengi ve boyutu de\u011fi\u015febilir.\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\nrenk<\/code> ve boyut<\/code> bile\u015fen s\u0131n\u0131f\u0131ndaki \u00f6zelliklerdir.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nUygulama Mant\u0131\u011f\u0131n\u0131 Merkezile\u015ftirme: Servisler (Services) ve Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu (Dependency Injection)<\/h2>\n
Servisler: Uygulaman\u0131z\u0131n Arka Plan Kahramanlar\u0131<\/h3>\n
@Injectable()<\/code> dekorat\u00f6r\u00fcn\u00fc kullan\u0131r\u0131z. Bu dekorat\u00f6r, Angular’\u0131n ba\u011f\u0131ml\u0131l\u0131k enjeksiyon sistemine bu servisin enjekte edilebilir oldu\u011funu ve muhtemelen ba\u015fka ba\u011f\u0131ml\u0131l\u0131klar\u0131 olabilece\u011fini s\u00f6yler. @Injectable()<\/code> dekorat\u00f6r\u00fc genellikle { providedIn: 'root' }<\/code> se\u00e7ene\u011fi ile birlikte kullan\u0131l\u0131r. Bu, servisin uygulama genelinde tekil (singleton) bir \u00f6rnek olarak sa\u011flanaca\u011f\u0131 anlam\u0131na gelir. Yani, uygulama boyunca bu servisin sadece bir \u00f6rne\u011fi olu\u015fturulur ve t\u00fcm bile\u015fenler ayn\u0131 \u00f6rne\u011fi kullan\u0131r. Bu, durum y\u00f6netimi i\u00e7in olduk\u00e7a \u00f6nemlidir; \u00f6rne\u011fin, bir kullan\u0131c\u0131n\u0131n oturum bilgilerini saklayan bir servis, uygulaman\u0131n her yerinde ayn\u0131 oturum verisine eri\u015fmelidir.<\/p>\nFilmServisi<\/code> d\u00fc\u015f\u00fcnelim. Bu servis, filmleri bir API’den \u00e7ekecek ve bile\u015fenlere sunacakt\u0131r.<\/p>\n\n\/\/ film.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\ninterface Film {\n id: number;\n ad: string;\n yonetmen: string;\n yil: number;\n}\n\n@Injectable({\n providedIn: 'root' \/\/ Uygulama genelinde tekil bir \u00f6rnek sa\u011flar\n})\nexport class FilmServisi {\n private apiUrl = 'https:\/\/api.ornek.com\/filmler'; \/\/ \u00d6rnek API adresi\n\n constructor(private http: HttpClient) { } \/\/ HttpClient servisini enjekte ediyoruz\n\n getFilmler(): Observable<Film[]> {\n return this.http.get<Film[]>(this.apiUrl);\n }\n\n getFilmById(id: number): Observable<Film> {\n return this.http.get<Film>(${this.apiUrl}\/${id}<\/code>);\n }\n}\n <\/code><\/pre>\n<\/div>\nFilmServisi<\/code>, Angular’\u0131n HttpClient<\/code> servisini kullanarak bir API’den film verilerini \u00e7eker. Bu servis, farkl\u0131 bile\u015fenler taraf\u0131ndan (\u00f6rne\u011fin, film listesi bile\u015feni veya film detay bile\u015feni) yeniden kullan\u0131labilir. Bu sayede, veri \u00e7ekme mant\u0131\u011f\u0131 tek bir yerde merkezile\u015ftirilmi\u015f olur, bu da kod tekrar\u0131n\u0131 \u00f6nler ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\nBa\u011f\u0131ml\u0131l\u0131k Enjeksiyonu: Kodunuzu Daha Esnek Hale Getirin<\/h3>\n
FilmServisi<\/code>‘ni bir bile\u015fende kullanmak istersek:<\/p>\n\n\/\/ film-listesi.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { FilmServisi } from '..\/film.service'; \/\/ FilmServisi'ni import ediyoruz\n\ninterface Film {\n id: number;\n ad: string;\n yonetmen: string;\n yil: number;\n}\n\n@Component({\n selector: 'app-film-listesi',\n templateUrl: '.\/film-listesi.component.html',\n styleUrls: ['.\/film-listesi.component.css']\n})\nexport class FilmListesiComponent implements OnInit {\n filmler: Film[] = [];\n\n constructor(private filmServisi: FilmServisi) { } \/\/ FilmServisi'ni enjekte ediyoruz\n\n ngOnInit(): void {\n this.filmServisi.getFilmler().subscribe(data => {\n this.filmler = data;\n });\n }\n}\n <\/code><\/pre>\n<\/div>\n\n<!-- film-listesi.component.html -->\n<h2>Filmler Listesi<\/h2>\n<ul>\n <li *ngFor=\"let film of filmler\">\n {{ film.ad }} ({{ film.yil }}) - Y\u00f6netmen: {{ film.yonetmen }}\n <\/li>\n<\/ul>\n <\/code><\/pre>\n<\/div>\nFilmListesiComponent<\/code> s\u0131n\u0131f\u0131nda, FilmServisi<\/code>‘ni kurucu metot arac\u0131l\u0131\u011f\u0131yla enjekte ettik. Angular, FilmListesiComponent<\/code>‘in bir \u00f6rne\u011fini olu\u015ftururken, FilmServisi<\/code>‘nin de bir \u00f6rne\u011fini (e\u011fer daha \u00f6nce olu\u015fturulmam\u0131\u015fsa) olu\u015fturur ve bile\u015fene sa\u011flar. Bu enjeksiyon sayesinde, bile\u015fenimiz FilmServisi<\/code>‘ni do\u011frudan kullanabilir.<\/p>\n\n
MockFilmServisi<\/code> kullanabiliriz.<\/li>\nKullan\u0131c\u0131 Deneyimini Zenginle\u015ftiren Di\u011fer Temel \u00d6zellikler<\/h2>\n
Y\u00f6nlendirme (Routing): Tek Sayfada \u00c7oklu G\u00f6r\u00fcn\u00fcm<\/h3>\n
RouterModule<\/code> ve Routes<\/code> dizisi kullan\u0131larak yap\u0131land\u0131r\u0131l\u0131r. Her bir rota (route), bir URL yolu (path) ile bu yola kar\u015f\u0131l\u0131k gelen bir bile\u015feni e\u015fle\u015ftirir. Y\u00f6nlendirme, uygulaman\u0131z\u0131n AppModule<\/code>‘\u00fcnde veya \u00f6zellik mod\u00fcllerinde yap\u0131land\u0131r\u0131labilir.<\/p>\n\n\/\/ app-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { AnasayfaComponent } from '.\/anasayfa\/anasayfa.component';\nimport { UrunListesiComponent } from '.\/urun-listesi\/urun-listesi.component';\nimport { UrunDetayComponent } from '.\/urun-detay\/urun-detay.component';\nimport { NotFoundComponent } from '.\/not-found\/not-found.component';\n\nconst routes: Routes = [\n { path: '', component: AnasayfaComponent },\n { path: 'urunler', component: UrunListesiComponent },\n { path: 'urunler\/:id', component: UrunDetayComponent }, \/\/ Parametreli rota\n { path: '**', component: NotFoundComponent } \/\/ Tan\u0131ms\u0131z yollar i\u00e7in\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n <\/code><\/pre>\n<\/div>\n\n
''<\/code> yolu, uygulaman\u0131n ana sayfas\u0131na (AnasayfaComponent<\/code>) y\u00f6nlendirir.<\/li>\n'urunler'<\/code> yolu, \u00fcr\u00fcn listesini (UrunListesiComponent<\/code>) g\u00f6sterir.<\/li>\n'urunler\/:id'<\/code> yolu, belirli bir \u00fcr\u00fcn\u00fcn detay sayfas\u0131n\u0131 (UrunDetayComponent<\/code>) g\u00f6sterir. Buradaki :id<\/code> k\u0131sm\u0131, URL’den dinamik olarak al\u0131nacak bir parametreyi temsil eder. \u00d6rne\u011fin, \/urunler\/123<\/code> URL’sinde id<\/code> parametresinin de\u011feri 123<\/code> olacakt\u0131r.<\/li>\n'**'<\/code> yolu, tan\u0131mlanmam\u0131\u015f t\u00fcm di\u011fer yollar\u0131 yakalar ve bir NotFoundComponent<\/code> g\u00f6sterir.<\/li>\n<\/ul>\nrouterLink<\/code> y\u00f6nergesini kullanarak gezinme ba\u011flant\u0131lar\u0131 olu\u015ftururuz ve <router-outlet><\/router-outlet><\/code> etiketi, e\u015fle\u015fen bile\u015fenin g\u00f6r\u00fcnt\u00fclenece\u011fi yeri i\u015faretler.<\/p>\n\n<!-- app.component.html -->\n<nav>\n <a routerLink=\"\/\">Anasayfa<\/a> |\n <a routerLink=\"\/urunler\">\u00dcr\u00fcnler<\/a> |\n <a routerLink=\"\/urunler\/5\">\u00dcr\u00fcn Detay (ID: 5)<\/a>\n<\/nav>\n<router-outlet><\/router-outlet>\n <\/code><\/pre>\n<\/div>\nYa\u015fam D\u00f6ng\u00fcs\u00fc Kancalar\u0131 (Lifecycle Hooks): Bile\u015fen Davran\u0131\u015f\u0131n\u0131 Kontrol Etmek<\/h3>\n
\n
ngOnChanges()<\/code>: Bile\u015fenin input \u00f6zelliklerinden biri (@Input()<\/code> ile tan\u0131mlanan) de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r. Bu, \u00f6zellikle bir bile\u015fenin d\u0131\u015far\u0131dan ald\u0131\u011f\u0131 verilere g\u00f6re dahili durumunu g\u00fcncellemesi gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r.<\/li>\nngOnInit()<\/code>: Bile\u015fen ilk kez ba\u015flat\u0131ld\u0131\u011f\u0131nda, yani input \u00f6zellikleri ayarland\u0131ktan ve bile\u015fen g\u00f6r\u00fcn\u00fcm\u00fc olu\u015fturulduktan sonra \u00e7a\u011fr\u0131l\u0131r. Genellikle veri \u00e7ekme i\u015flemleri, servis ba\u015flatmalar\u0131 veya bile\u015fenin ba\u015flang\u0131\u00e7 durumunu ayarlamak i\u00e7in kullan\u0131l\u0131r. Bu, bir bile\u015fenin haz\u0131r oldu\u011funda yapmas\u0131 gereken ilk i\u015fleri tan\u0131mlamak i\u00e7in ideal yerdir.<\/li>\nngDoCheck()<\/code>: Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcn\u00fcn her \u00e7al\u0131\u015ft\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Daha karma\u015f\u0131k de\u011fi\u015fiklik alg\u0131lama stratejileri uygulamak i\u00e7in kullan\u0131labilir, ancak dikkatli kullan\u0131lmal\u0131d\u0131r \u00e7\u00fcnk\u00fc performans sorunlar\u0131na yol a\u00e7abilir.<\/li>\nngAfterContentInit()<\/code>: Bile\u015fenin i\u00e7eri\u011fi (<ng-content><\/code> ile yans\u0131t\u0131lan) DOM’a yerle\u015ftirildikten sonra \u00e7a\u011fr\u0131l\u0131r.<\/li>\nngAfterContentChecked()<\/code>: Bile\u015fenin i\u00e7eri\u011fi kontrol edildikten sonra \u00e7a\u011fr\u0131l\u0131r.<\/li>\nngAfterViewInit()<\/code>: Bile\u015fenin kendi g\u00f6r\u00fcn\u00fcm\u00fc ve alt g\u00f6r\u00fcn\u00fcmleri (child views) DOM’a tamamen yerle\u015ftirildikten sonra \u00e7a\u011fr\u0131l\u0131r. G\u00f6r\u00fcn\u00fcm elementlerine eri\u015fmek (\u00f6rne\u011fin @ViewChild<\/code> ile) i\u00e7in uygun bir yerdir.<\/li>\nngAfterViewChecked()<\/code>: Bile\u015fenin kendi g\u00f6r\u00fcn\u00fcm\u00fc ve alt g\u00f6r\u00fcn\u00fcmleri kontrol edildikten sonra \u00e7a\u011fr\u0131l\u0131r.<\/li>\nngOnDestroy()<\/code>: Bile\u015fen yok edilmeden hemen \u00f6nce \u00e7a\u011fr\u0131l\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in abonelikleri (subscriptions) iptal etmek, olay dinleyicilerini kald\u0131rmak veya di\u011fer kaynaklar\u0131 serbest b\u0131rakmak i\u00e7in kullan\u0131l\u0131r. Bu kanca, bir bile\u015fenin temizlik i\u015flemlerini yapmas\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/li>\n<\/ul>\nOnInit<\/code>, OnDestroy<\/code>) implement etmesi ve metotlar\u0131n\u0131 tan\u0131mlamas\u0131 gerekir.<\/p>\n\n\/\/ saya\u00e7.component.ts\nimport { Component, OnInit, OnDestroy, Input, OnChanges, SimpleChanges } from '@angular\/core';\nimport { interval, Subscription } from 'rxjs';\n\n@Component({\n selector: 'app-sayac',\n template: <h3>Saya\u00e7: {{ sayac }}<\/h3>\n <p>Ba\u015fl\u0131k: {{ baslik }}<\/p><\/code>\n})\nexport class SayacComponent implements OnInit, OnDestroy, OnChanges {\n sayac: number = 0;\n @Input() baslik: string = 'Varsay\u0131lan Ba\u015fl\u0131k';\n private subscription: Subscription | undefined;\n\n constructor() {\n console.log('Constructor \u00e7a\u011fr\u0131ld\u0131.', this.baslik);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['baslik']) {\n console.log('ngOnChanges: Ba\u015fl\u0131k de\u011fi\u015fti:', changes['baslik'].currentValue);\n }\n }\n\n ngOnInit(): void {\n console.log('ngOnInit \u00e7a\u011fr\u0131ld\u0131. Bile\u015fen ba\u015flat\u0131ld\u0131.');\n this.subscription = interval(1000).subscribe(() => {\n this.sayac++;\n });\n }\n\n ngOnDestroy(): void {\n console.log('ngOnDestroy \u00e7a\u011fr\u0131ld\u0131. Bile\u015fen yok ediliyor.');\n if (this.subscription) {\n this.subscription.unsubscribe(); \/\/ Bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nle\n }\n }\n}\n <\/code><\/pre>\n<\/div>\nSayacComponent<\/code>, ngOnInit<\/code> i\u00e7inde bir saya\u00e7 ba\u015flat\u0131r ve ngOnDestroy<\/code> i\u00e7inde bu sayac\u0131 durdurarak bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nler. ngOnChanges<\/code> ise baslik<\/code> input \u00f6zelli\u011fi de\u011fi\u015fti\u011finde konsola bilgi yazd\u0131r\u0131r. Ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kararl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in bile\u015fenlerin do\u011fru zamanda do\u011fru i\u015fleri yapmas\u0131n\u0131 sa\u011flar.<\/p>\nBorular (Pipes): Veriyi Kolayca D\u00f6n\u00fc\u015ft\u00fcrme<\/h3>\n
\n
DatePipe<\/code>: Tarihleri farkl\u0131 formatlarda g\u00f6r\u00fcnt\u00fclemek i\u00e7in. (\u00d6rn: