Yapısal Yönergeler
Yapısal yönergeler, Angular uygulamalarında kullanıcı arayüzünün dinamik olarak şekillendirilmesini sağlayan güçlü araçlardır. Bu yönergeler, DOM yapısını değiştirmek için kullanılır; yani belirli koşullara bağlı olarak elemanları ekler, çıkarır veya çoğaltır. Örneğin, ngIf bir elemanın DOM'da bulunup bulunmayacağını belirlerken, ngFor bir listeyi döngüyle render eder. Bu, özellikle modern tek sayfa uygulamalarında (SPA) performans ve kullanıcı deneyimi açısından kritik öneme sahiptir.
Angular'da bileşen tabanlı düşünceyi benimsemek, state yönetimi, veri akışı ve yaşam döngüsü yönetimiyle birleştirildiğinde, yapısal yönergeler ile daha okunabilir, sürdürülebilir ve yeniden kullanılabilir kullanıcı arayüzleri tasarlamak mümkündür. Bu eğitimde, ngIf, ngFor ve ng-template gibi temel yapısal yönergelerin kullanımını, ileri seviye senaryolarla birlikte öğrenerek Angular projelerinizde nasıl etkin bir şekilde uygulayabileceğinizi keşfedeceksiniz. Ayrıca, performans optimizasyonları ve Angular'daki en iyi uygulama yöntemleri üzerinde durulacaktır.
Temel Örnek
typescriptimport { Component } from '@angular/core';
@Component({
selector: 'app-yapisal-demo',
template: ` <h2>Projeler Listesi</h2> <ul>
<li *ngFor="let proje of projeler">{{ proje }}</li> </ul>
<button (click)="toggleMesaj()">Mesaj Göster/Gizle</button>
<p *ngIf="mesajGoster">Bu, koşullu olarak görüntülenen bir mesajdır.</p>
`
})
export class YapisalDemoComponent {
projeler: string[] = ['Proje A', 'Proje B', 'Proje C'];
mesajGoster: boolean = false;
toggleMesaj() {
this.mesajGoster = !this.mesajGoster;
}
}Bu temel örnekte, ngFor kullanılarak projeler dizisi üzerinde döngü yapılır ve her proje için bir liste elemanı oluşturulur. ngIf ise mesajGoster değişkenine bağlı olarak paragrafın DOM’da gösterilip gösterilmeyeceğini kontrol eder. toggleMesaj() metodu, boolean değeri tersine çevirerek kullanıcı etkileşimine cevap verir. Bu yapı, Angular’ın veri bağlama, state yönetimi ve bileşen yaşam döngüsü kavramlarını bütünleştirir. DOM’a doğrudan müdahale etmeye gerek kalmadan dinamik içerik yönetimi sağlar ve performansı optimize eder.
Pratik Örnek
typescriptimport { Component, Input } from '@angular/core';
@Component({
selector: 'app-kullanici-kart',
template: ` <div *ngIf="kullanici" class="kart"> <h3>{{ kullanici.isim }}</h3> <p>Email: {{ kullanici.email }}</p> <p *ngIf="kullanici.aktif; else pasif">Durum: Aktif</p> <ng-template #pasif>Durum: Pasif</ng-template> </div>
`,
styles: [` .kart { border: 1px solid #ccc; padding: 16px; margin: 8px 0; border-radius: 8px; }
`]
})
export class KullaniciKartComponent {
@Input() kullanici: { isim: string; email: string; aktif: boolean } | null = null;
}
@Component({
selector: 'app-kullanici-listesi',
template: ` <app-kullanici-kart *ngFor="let kullanici of kullanicilar" [kullanici]="kullanici"></app-kullanici-kart>
`
})
export class KullaniciListesiComponent {
kullanicilar = [
{ isim: 'Ali', email: '[[email protected]](mailto:[email protected])', aktif: true },
{ isim: 'Ayşe', email: '[[email protected]](mailto:[email protected])', aktif: false },
{ isim: 'Mehmet', email: '[[email protected]](mailto:[email protected])', aktif: true }
];
}Pratik örnekte, KullaniciKartComponent ve KullaniciListesiComponent, ngIf, ngFor ve ng-template’i birleştirerek tekrar kullanılabilir ve dinamik listeler oluşturur. KullaniciKartComponent, kullanıcı nesnesi mevcutsa kartı gösterir ve aktif/pasif durumunu ng-template ile koşullu olarak render eder. KullaniciListesiComponent, kullanıcı listesini *ngFor ile iterasyon yaparak her öğeyi alt bileşene aktarır. Bu yapı, bileşenler arası veri akışını net tutar, render işlemlerini optimize eder ve büyük uygulamalarda bakım kolaylığı sağlar.
Yapısal yönergeler için Angular en iyi uygulamaları ve hatalar:
- ngIf, ngFor ve ng-template kullanarak DOM yönetimi yapılmalı, doğrudan DOM manipülasyonundan kaçınılmalı.
- İş mantığı ve görselliği ayrı tutmak, state’i template’de değiştirmemek kritik önemdedir.
- Büyük listelerde *ngFor kullanırken trackBy fonksiyonu ile performans optimize edilmeli.
-
Componentler arası veri akışı @Input ve EventEmitter ile sağlanmalı.
Sık yapılan hatalar: -
Template içinde array veya obje direkt değiştirilmesi
- Çok katmanlı yapısal yönergeler kullanımı
-
*ngIf ile null/undefined kontrolü yapılmaması
Performans ve güvenlik: -
trackBy ile gereksiz renderlar önlenir
- ng-template ile kullanılmayan içerik DOM’a eklenmez
- Kullanıcı girişleri validate edilmeli, güvenlik açıkları önlenmelidir
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| *ngIf | Koşula bağlı eleman gösterme/gizleme | <p *ngIf="goster">Mesaj</p> |
| *ngFor | Array üzerinde iterasyon yapma | <li *ngFor="let item of items">{{ item }}</li> |
| ng-template | Koşullu içerik veya tekrar kullanılabilir şablon | <ng-template #alternatif>İçerik</ng-template> |
| @Input | Baba bileşenden çocuk bileşene veri aktarımı | <child [data]="veri"></child> |
| trackBy | *ngFor performans optimizasyonu | *ngFor="let item of items; trackBy: trackById" |
Yapısal yönergeler ile dinamik, ölçeklenebilir ve performanslı arayüzler oluşturabilirsiniz. Bir sonraki adım olarak NgRx ile state yönetimi, değişiklik algılama stratejileri ve asenkron veri yönetimini öğrenmek önerilir. Bu sayede bileşenlerin yeniden kullanılabilirliği artar, bakım kolaylaşır ve güvenilir Angular uygulamaları geliştirmek mümkün olur. Resmî dökümantasyon ve pratik örnekler, bilgilerinizi pekiştirmenize yardımcı olacaktır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek