Angular Directives & Pipes Eğitimi

Eğitim Hakkında

Yerleşik ve özel directive ile pipe yazımından performans ve en iyi uygulamalara kadar

Angular Directives & Pipes Eğitimi, Angular şablonlarının en güçlü iki aracını derinlemesine öğretir. Katılımcılar yerleşik attribute ve structural directive'leri kullanır; HostBinding, HostListener ve Renderer2 ile kendi directive'lerini yazar. TemplateRef ve ViewContainerRef ile custom structural directive kurar, yerleşik pipe'ları öğrenir, pure ve impure pipe ayrımını kavrar ve performans odaklı custom pipe yazar. Program test ve en iyi uygulamalarla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; kısa anlatımın ardından her directive ve pipe örnek bir uygulamada gerçek senaryolarla yazılarak uygulamalı pekiştirilir.

Seviye

Orta Seviye — Angular directive ve pipe yapılarını derinlemesine öğreten ve özelleştirmeyi kapsayan program

Öğrenme Metodu

Örnek bir uygulamada her modülde yeni bir directive veya pipe yazılır; davranış ve biçimlendirme gerçek senaryolarla şablona uygulanır.

Neden Bu Eğitim?

🎯Yeniden kullanılabilirlik

Tekrarlayan şablon davranışını ve biçimlendirmeyi directive ve pipe ile merkezileştirerek kod tekrarını ortadan kaldırırsınız.

🧩Temiz şablonlar

Mantığı directive ve pipe'a taşıyarak şablonları okunabilir, bildirimsel ve bakımı kolay halde tutarsınız.

⚡Performans bilinci

Pure ve impure pipe ayrımını ve change detection etkisini öğrenerek biçimlendirmeyi performanslı biçimde kurgularsınız.

Anahtar Konular

angular directive eğitimiangular pipe eğitimicustom directive angularcustom pipe angularstructural directivehostbinding hostlistenerrenderer2 angularangular şablon eğitimiangular directives pipes kursuön yüz geliştirme eğitimi

“Directive davranışı, pipe ise görünümü şekillendirir; ikisini doğru kullanmak şablonu mantıktan arındırıp bildirimsel kılar.”

Ön Koşullar

Eğitimden verim almak için gereken Angular ve TypeScript hazırlığı

1

Angular temeli

Bileşen, şablon söz dizimi ve veri bağlama gibi temel Angular kavramlarına aşinalık gerekir.

2

TypeScript bilgisi

Sınıf, dekoratör ve tip kavramlarına hâkim olmak directive ve pipe yazımını kolaylaştırır.

3

DOM anlayışı

Temel DOM ve olay kavramlarını bilmek attribute directive davranışlarını anlamayı hızlandırır.

4

CLI kurulumu

Node.js ve Angular CLI'nin kurulu, ng generate ile directive ve pipe üretebilir durumda olması gerekir.

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ı yerleşik directive'leri kullanır, @Directive ile kendi attribute directive'ini yazar ve HostBinding, HostListener ile Renderer2 kullanarak DOM davranışını güvenle değiştirir.

Modül 1

Yerleşik Directive'ler

ngClass ile koşullu sınıf uygulama
ngStyle ile dinamik stil atama
ngModel ile iki yönlü veri bağlama
Attribute ve structural directive ayrımı
Directive ile bileşen arasındaki fark
Directive'in seçici mantığının kavranması

Modül 2

Custom Attribute Directive

@Directive dekoratörü ve selector tanımı
ElementRef ile ana öğeye erişim
ng generate directive ile iskelet üretme
@Input ile directive'e değer aktarma
Vurgulama directive'i örneğinin yazımı
Directive'in şablonda uygulanması

Modül 3

HostBinding ve HostListener

HostBinding ile ana öğe özelliğini bağlama
HostListener ile ana öğe olayını dinleme
mouseenter ve mouseleave ile etkileşim
Sınıf ve stil özelliklerini koşullu bağlama
Klavye olaylarına directive ile yanıt
host meta verisi ile alternatif tanım

Modül 4

Renderer2 ile Güvenli DOM

Renderer2 ile platformdan bağımsız DOM işlemi
setStyle ve removeStyle ile stil değişimi
addClass ve removeClass ile sınıf yönetimi
setAttribute ile öznitelik atama
listen ile olay dinleyici ekleme
Doğrudan nativeElement erişiminin riskleri

Günün hedefiKatılımcı structural directive mekaniğini kavrar, TemplateRef ve ViewContainerRef ile ngIf benzeri directive yazar ve mikro söz dizimi ile bağlam değişkeni sunmayı öğrenir.

Modül 1

Structural Directive Mekaniği

Yıldız söz diziminin şablona açılması
ng-template ile görünümün temsil edilmesi
ngIf, ngFor ve ngSwitch iç işleyişi
Yeni @if ve @for akış kontrolü karşılaştırması
Görünümün oluşturulup kaldırılması mantığı
Structural ile attribute directive farkı

Modül 2

TemplateRef ve ViewContainerRef

TemplateRef ile şablon referansının alınması
ViewContainerRef ile görünüm kabı yönetimi
createEmbeddedView ile görünüm oluşturma
clear ile görünümün kaldırılması
@Input setter ile koşula göre güncelleme
Kendi ngIf benzeri directive'inizin yazımı

Modül 3

Mikro Söz Dizimi ve Bağlam

Mikro söz dizimi ile kısa yazımın çözümü
Bağlam nesnesi ile şablona değer aktarma
let ile bağlam değişkeni tanımlama
$implicit ile varsayılan bağlam değeri
Tekrar directive'i ile sayıya göre görünüm
Tip güvenli bağlam için şablon koruması

Modül 4

Pratik Directive Senaryoları

Yetki tabanlı gösterim directive'i
Tıklama dışı alanı algılayan directive
Girdi biçimlendirme ve maskeleme directive'i
Gecikmeli yükleme ve görünürlük directive'i
Directive'ler arası bağımlılık enjeksiyonu
Directive'in yeniden kullanılabilir tasarımı

Günün hedefiKatılımcı yerleşik pipe'ları ve parametrelerini kullanır, custom pipe yazar, pure ve impure ayrımının performans etkisini kavrar ve pipe ile directive'leri test eder.

Modül 1

Yerleşik Pipe'lar

date pipe ile tarih biçimlendirme
currency ve number ile sayısal biçim
uppercase, lowercase ve titlecase pipe'ları
slice ve json pipe kullanımı ve amacı
Pipe zincirleme ile ardışık dönüşüm
Yerelleştirme ve locale etkisi

Modül 2

Async Pipe ve Parametreler

async pipe ile Observable değerini bağlama
async pipe ile otomatik abonelik yönetimi
Pipe'a parametre ve seçenek aktarma
date pipe format desenlerinin kullanımı
Promise değerinin async pipe ile çözümü
async pipe ile OnPush uyumlu akış

Modül 3

Custom Pipe Yazımı

@Pipe dekoratörü ve PipeTransform arayüzü
transform metodu ile dönüşüm mantığı
Parametreli custom pipe tasarımı
Metin kısaltma ve biçimlendirme pipe'ı
Filtreleme pipe'ının riskleri ve alternatifi
Pipe'ın şablonda yeniden kullanımı

Modül 4

Pure, Impure ve Test

Pure pipe ve referans değişimine duyarlılık
Impure pipe ve her döngüde çalışma maliyeti
pure bayrağı ile davranış kontrolü
Change detection ile pipe etkileşimi
Pipe'ın transform metodunun birim testi
Directive davranışının test ile doğrulanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Yerleşik directive kullanımı

ngClass, ngStyle ve yeni akış kontrol söz dizimiyle şablon davranışını bildirimsel ve okunabilir biçimde kurarsınız.

✅

Custom attribute directive

@Directive, ElementRef ve @Input ile kendi attribute directive'lerinizi yazarak DOM davranışını yeniden kullanılabilir kılarsınız.

✅

HostBinding ve HostListener

HostBinding ve HostListener ile ana öğenin özelliklerini bağlar, olaylara yanıt veren etkileşimli directive'ler kurarsınız.

✅

Renderer2 ile güvenli DOM

Renderer2 ile platformdan bağımsız, güvenli DOM işlemleri yapar ve doğrudan erişimin risklerinden kaçınırsınız.

✅

Custom structural directive

TemplateRef ve ViewContainerRef ile ngIf benzeri structural directive yazar, mikro söz dizimi ve bağlam değişkeni sunarsınız.

✅

Yerleşik ve custom pipe

date, currency ve async gibi yerleşik pipe'ları kullanır, PipeTransform ile kendi parametreli custom pipe'larınızı yazarsınız.

✅

Pure-impure bilinci

Pure ve impure pipe ayrımını ve change detection etkisini kavrayarak biçimlendirmeyi performanslı biçimde tasarlarsınız.

✅

Test edebilme

Pipe'ın transform metodunu ve directive davranışını yalıtarak test eder, güvenilir biçimde doğrularsınız.

Kimler İçin Uygundur?

Angular temellerine sahip olup şablon mantığını directive ve pipe ile yeniden kullanılabilir hale getirmek
davranışı DOM seviyesinde özelleştirmek
veri biçimlendirmeyi merkezileştirmek isteyen ön yüz geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Angular temellerine sahip olup şablon mantığını directive ve pipe ile yeniden kullanılabilir hale getirmek, davranışı DOM seviyesinde özelleştirmek ve veri biçimlendirmeyi merkezileştirmek isteyen ön yüz geliştiricileri için uygundur. Temel Angular ve TypeScript bilgisi beklenir.

Directive ile pipe arasındaki fark nedir?

Directive bir öğenin davranışını veya yapısını değiştirir; attribute directive görünümü ve etkileşimi, structural directive ise öğenin varlığını yönetir. Pipe ise bir değeri şablonda görüntülenmek üzere dönüştürür, örneğin tarih veya para biçimlendirir. Eğitim her ikisini ayrı ayrı derinlemesine işler.

Pure ve impure pipe ne demek?

Pure pipe yalnızca girdi referansı değiştiğinde çalışır ve performanslıdır; varsayılan davranış budur. Impure pipe her change detection döngüsünde çalışır ve dikkatli kullanılmazsa performansı düşürür. Eğitimde bu ayrım ve doğru kullanım senaryoları uygulamalı işlenir.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Her directive ve pipe örnek bir uygulamada gerçek senaryolarla yazılır. Yüz yüze veya online yapılabilir ve kurumun kullandığı Angular sürümüne göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve yazılan directive ile pipe örneklerini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

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

ANGULAR : DIRECTIVES & PIPES EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Yerleşik Directive'ler

Custom Attribute Directive

HostBinding ve HostListener

Renderer2 ile Güvenli DOM

Structural Directive Mekaniği

TemplateRef ve ViewContainerRef

Mikro Söz Dizimi ve Bağlam

Pratik Directive Senaryoları

Yerleşik Pipe'lar

Async Pipe ve Parametreler

Custom Pipe Yazımı

Pure, Impure ve Test

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Angular Development: Dependency Injection & ng-bootstrap Eğitimi

Angular Development: Libraries Eğitimi

Angular Development: Material & Elements Eğitimi

Angular Development: Reactive Programming Eğitimi

Angular Development: Testing & TDD Eğitimi

Angular Gelişmiş Eğitimi