Introducing Directives Eğitimi

Eğitim Hakkında

Angular directive mimarisi ve özel directive geliştirme

Eğitim, Angular directive kavramını kullanımdan özel yazıma kadar anlatır. Component, structural ve attribute directive ayrımı, ngIf, ngFor, ngSwitch ve yeni control flow söz dizimi, ngClass ve ngStyle, @Directive dekoratörü, ElementRef, Renderer2, HostListener, HostBinding, @Input ile parametre geçirme, TemplateRef ve ViewContainerRef ile özel yapısal directive üretimi ele alınır.

Süre ve Format

3 Gün. Her gün dört modül; 1. gün Hazır Directive'ler; 2. gün Özel Directive Yazımı; 3. gün Yapısal Directive'ler ve Kompozisyon.

Seviye

Orta Seviye — Angular directive türleri, özel directive yazımı ve şablon davranışı

Öğrenme Metodu

Katılımcılar Angular CLI projesinde kendi directive'lerini yazar, test eder ve bir bileşen kitaplığı mantığıyla paylaşılan modüle toplar.

Neden Bu Eğitim?

🎯Tekrarı Azaltma

Ortak DOM davranışını directive'e taşıyarak şablon tekrarını ortadan kaldırırsınız.

🧪Yapısal Kontrol

TemplateRef ve ViewContainerRef ile kendi *yapısal directive'inizi yazarsınız.

⚙️Temiz Bileşenler

Bileşen mantığından DOM manipülasyonunu ayırırsınız.

Anahtar Konular

Angular directive eğitimistructural directiveattribute directivengIf ngForHostListenerHostBindingTemplateRefözel directive yazmaAngular control flowAngular eğitimi

“Tekrarlanan DOM davranışı, bir directive olmayı bekleyen koddur.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

TypeScript

Sınıf, dekoratör ve tür kavramları bilinmelidir.

2

Angular Temeli

Component, modül ve veri bağlama konularına aşinalık gerekir.

3

Node.js

Node ve npm kurulu olmalıdır.

4

Editör

VS Code ve Angular Language Service önerilir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Angular'ın yerleşik directive'lerini bilinçli kullanır.

Modül 1

Directive Kavramı

Component, attribute ve structural directive farkı
Directive metadata: selector, standalone
Şablonda * söz diziminin açılımı (ng-template)
DOM ile directive yaşam döngüsü
NgModule ve standalone import farkı
Angular DevTools ile directive inceleme

Modül 2

Koşullu ve Döngüsel

ngIf, else ve then blokları
ngFor, index, even/odd, trackBy
ngSwitch, ngSwitchCase
@if, @for ve @switch control flow bloğu
@for track zorunluluğu
Büyük listelerde performans

Modül 3

Stil Directive'leri

[ngClass] nesne ve dizi kullanımı
[ngStyle] ile dinamik stil
Class ve style bağlama farkı
NgOptimizedImage directive
Form directive'leri: ngModel, formControl
routerLink ve routerLinkActive

Modül 4

Şablon Yardımcıları

ng-container ile sarmalayıcı eleman olmadan gruplama
ng-template ve ngTemplateOutlet
Template reference değişkeni (#ref)
ng-content ile içerik yansıtma
async pipe ile abonelik
Pipe ve directive farkı

Günün hedefiKatılımcı DOM ile etkileşen özel attribute directive'ler yazar.

Modül 1

İlk Özel Directive

ng generate directive ile iskelet
@Directive ve selector kuralları
ElementRef ile eleman erişimi
Renderer2 ile güvenli DOM değişikliği
nativeElement doğrudan kullanımının riskleri
appHighlight örneği

Modül 2

Olay ve Bağlama

@HostListener ile mouseenter/mouseleave
@HostBinding ile sınıf ve stil
Klavye olayları: keydown.enter
@Input alias ve parametre geçirme
@Output ile olay yayma
Input setter ile dönüşüm

Modül 3

Kullanışlı Örnekler

Otomatik odaklanma (autofocus) directive
Debounce click directive
Sadece sayı kabul eden input directive
Tooltip directive
Click outside directive
Sürükle-bırak temel directive

Modül 4

Directive Testi

TestBed ile test bileşeni oluşturma
DebugElement ve By.directive
fixture.detectChanges
Olay tetikleme ve doğrulama
Spy ile etkileşim doğrulama
Kapsama ve sınır durumları

Günün hedefiKatılımcı kendi yapısal directive'ini yazar ve directive'leri birleştirir.

Modül 1

Özel Yapısal Directive

TemplateRef ve ViewContainerRef
createEmbeddedView ve clear
appUnless örneği
Bağlam nesnesi ($implicit) ve ngTemplateContextGuard
Yetkiye göre gösteren *appHasRole
Lazy içerik yükleme

Modül 2

Directive Kompozisyonu

hostDirectives özelliği
Birden çok directive'i bileşene ekleme
Inputs ve outputs yeniden açma
Directive sıralaması ve öncelik
Dependency injection ile directive arası iletişim
ContentChild ve ViewChild kullanımı

Modül 3

Performans ve Değişim Algılama

ChangeDetectionStrategy.OnPush
Directive içinde NgZone dışı çalıştırma
Signals ile reaktif directive girdileri
Bellek sızıntısı ve ngOnDestroy
Listener temizliği
Profil çıkarma

Modül 4

Kitaplık Paylaşımı

Ortak SharedModule veya standalone export
Angular library ile directive paketi
Public API ve barrel dosyası
Semantik sürümleme
Dokümantasyon (Storybook)
Dahili kod gözden geçirme listesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Directive Ayrımı

Component, attribute ve structural directive türlerini ayırt edebilirsiniz.

🛠️

Control Flow

ngIf/ngFor ve yeni @if/@for söz dizimini doğru kullanabilirsiniz.

📈

Attribute Directive

ElementRef ve Renderer2 ile güvenli özel directive yazabilirsiniz.

🔍

Host Etkileşimi

HostListener ve HostBinding ile olay ve stil yönetebilirsiniz.

🧩

Yapısal Directive

TemplateRef ve ViewContainerRef ile özel *directive üretebilirsiniz.

🚀

Kompozisyon

hostDirectives ile davranışları birleştirebilirsiniz.

🔒

Directive Testi

TestBed ile directive davranışını test edebilirsiniz.

📊

Paylaşım

Directive'leri paylaşılan modül veya kitaplık olarak sunabilirsiniz.

Kimler İçin Uygundur?

Angular temelini bilen ön yüz geliştiriciler
şablon davranışlarını yeniden kullanılabilir hale getirmek isteyenler içindir

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Angular temelini bilen ön yüz geliştiriciler ve şablon davranışlarını yeniden kullanılabilir hale getirmek isteyenler içindir.

Hangi Angular sürümü kullanılır?

Güncel Angular ile standalone yapı ve yeni control flow anlatılır; eski ngIf söz dizimi de gösterilir.

Özel structural directive yazılacak mı?

Evet, üçüncü günde TemplateRef ve ViewContainerRef ile yazılır.

Test yazımı kapsanıyor mu?

TestBed ile directive birim testleri yazılır.

Belge verilir mi?

Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

INTRODUCING DIRECTIVES EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Directive Kavramı

Koşullu ve Döngüsel

Stil Directive'leri

Şablon Yardımcıları

İlk Özel Directive

Olay ve Bağlama

Kullanışlı Örnekler

Directive Testi

Özel Yapısal Directive

Directive Kompozisyonu

Performans ve Değişim Algılama

Kitaplık Paylaşımı

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

OS Deployment Strategies: Deploying Modern Systems Eğitimi

OS Deployment Strategies: Maintaining & Managing Modern Systems Eğitimi

OS Deployment Strategies: Upgrading & Maintaining Systems Eğitimi

Performance Engineering: Assessing Performance Issues in Software Development Eğitimi

Performance Engineering: Optimizing Performance in an Application Eğitimi