Angular Bileşenler Eğitimi — Components

Eğitim Hakkında

Component dekoratöründen yaşam döngüsüne ve OnPush change detection'a kadar

Angular Working with Components Eğitimi, Angular'ın yapı taşı olan bileşenleri temelden ileriye öğretir. Katılımcılar Component dekoratörünü, template ve stil yapısını ve dört data binding türünü öğrenir. Ardından Input ve Output ile bileşen iletişimi, Signals giriş çıkışı, yaşam döngüsü kancaları, görünüm sorguları ve ng-content ile içerik projeksiyonu işlenir. Program OnPush change detection, ViewEncapsulation, host bağlama ve dinamik bileşen yükleme ile tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; kısa anlatımın ardından yeniden kullanılabilir bir bileşen seti adım adım kurularak binding ve iletişim kavramları uygulanır.

Seviye

Orta Seviye — Angular bileşenlerini binding, iletişim ve change detection ile derinleştiren eğitim

Öğrenme Metodu

Yeniden kullanılabilir bir bileşen kütüphanesi dört gün boyunca kurulur; her kavram gerçek bir UI bileşenine uygulanarak öğretilir.

Neden Bu Eğitim?

🧩Yeniden kullanım

Input, Output ve içerik projeksiyonuyla yeniden kullanılabilir bileşenler tasarlayarak arayüzü tutarlı ve bakımı kolay hale getirirsiniz.

🔄Yaşam döngüsü kontrolü

Yaşam döngüsü kancalarını doğru kullanarak başlatma, güncelleme ve temizlik işlerini doğru anda çalıştırmayı öğrenirsiniz.

⚡Performans bilinci

OnPush change detection ve immutable veri yaklaşımıyla gereksiz render'ları önleyerek akıcı arayüzler geliştirirsiniz.

Anahtar Konular

angular bileşen eğitimiangular component kursuinput output angularangular yaşam döngüsüchange detection eğitimiangular signalsangular egitiming-content projeksiyonviewchild kullanımıfrontend bileşen eğitimi

“İyi bir bileşen çok şey yapan değil; tek bir işi iyi yapan ve başkalarıyla temiz bir sözleşmeyle konuşan bileşendir.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak Angular ve TypeScript bilgisi

1

Angular temelleri

Bir Angular projesini çalıştırabilmek ve temel bileşen kavramına aşinalık eğitime başlamak için gerekir.

2

TypeScript bilgisi

Sınıf, dekoratör ve tip tanımı gibi temel TypeScript konularını bilmek örnekleri izlemeyi kolaylaştırır.

3

HTML ve CSS

Template ve stil örneklerini anlamak için temel HTML ve CSS bilgisi faydalı olur.

4

Angular CLI ortamı

Node.js ve Angular CLI'ın kurulu olması, ng serve ile projeyi çalıştırabilir durumda olmak 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ı Component dekoratörünü ve metadata'sını kavrar, template ile stil ilişkisini kurar ve interpolation, property, event ile two-way binding türlerini uygular.

Modül 1

Component Anatomisi

Component dekoratörü ve selector tanımı
templateUrl ile ayrı şablon dosyası kullanımı
styleUrls ile bileşene özel stiller
Bileşen sınıfında alan ve metot tanımı
ng generate component ile bileşen üretimi
Bileşenin ekranda bir ağaç oluşturması

Modül 2

Interpolation ve Property

Çift süslü parantez ile metin interpolation
Property binding ile DOM özelliğine değer
Attribute ve property farkının anlaşılması
class ve style binding ile görsel durum
ngClass ve ngStyle ile koşullu stil
Güvenli değer ve ifade kısıtlamaları

Modül 3

Event ve Two-Way

Event binding ile olay dinleme
$event nesnesiyle olay verisine erişim
Two-way binding için banana in a box söz dizimi
ngModel ile iki yönlü değer bağlama
Kendi two-way bağlamanı kurma deseni
Olayda metot çağrısı ve argüman geçişi

Modül 4

Şablon ve Kontrol Akışı

Template reference değişkeni ile öğeye erişim
Yeni akış söz dizimiyle koşul ve döngü
ngIf ve ngFor ile klasik yapısal direktifler
trackBy ile liste render verimliliği
ng-template ve ng-container kullanımı
Şablonda ifade ve basit mantık sınırı

Günün hedefiKatılımcı Input ile üstten veri alır, Output ve EventEmitter ile olay yayar, Signals tabanlı input ve output kullanır ve bileşenler arası iletişim desenlerini uygular.

Modül 1

Input ile Veri Alma

Input dekoratörü ile dışarıdan değer alma
Property binding ile input'a değer geçişi
Giriş adını yeniden adlandırma seçeneği
required input ile zorunlu değer işareti
setter ile input değişimine tepki
Değişmez veriyle input'un güvenli kullanımı

Modül 2

Output ile Olay Yayma

Output ve EventEmitter ile olay tanımı
emit ile üst bileşene veri gönderme
Üstte event binding ile olayı yakalama
Olay adıyla anlamlı iletişim sözleşmesi
Alt bileşenin duruma değil olaya odaklanması
Olay verisiyle tipli iletişim sözleşmesi

Modül 3

Signals Giriş Çıkış

input fonksiyonu ile signal tabanlı giriş
input.required ile zorunlu signal girişi
output fonksiyonu ile güncel olay yayını
model ile iki yönlü signal bağlama
computed ile türetilmiş değer üretimi
Signal input'un change detection'a etkisi

Modül 4

İletişim Desenleri

Üstten alta ve alttan üste iletişim akışı
Kardeş bileşenlerin üst üzerinden haberleşmesi
Paylaşılan servisle uzak bileşen iletişimi
Akıllı ve sunum bileşeni ayrımı
Prop drilling sorununun tanınması
İletişimde servis ve Input dengesi

Günün hedefiKatılımcı yaşam döngüsü kancalarını sırasıyla kavrar, ViewChild ve ContentChild ile alt öğelere erişir ve ng-content ile içerik projeksiyonunu uygular.

Modül 1

Yaşam Döngüsü Kancaları

ngOnInit ile başlatma mantığının yeri
ngOnChanges ile input değişimini yakalama
ngDoCheck ile özel değişim denetimi
ngAfterViewInit ile görünüm hazır anı
ngOnDestroy ile temizlik ve abonelik kapama
Kanca çağrı sırasının anlaşılması

Modül 2

View Sorguları ve Erişim

ViewChild ile şablondaki öğeye erişim
ViewChildren ile birden çok öğe sorgusu
Template reference ile hedef belirleme
static seçeneği ve erişim zamanlaması
ElementRef ile DOM öğesine ulaşma
viewChild signal tabanlı sorgu API'si

Modül 3

İçerik Projeksiyonu

ng-content ile dışarıdan içerik yerleştirme
select ile çok yuvalı projeksiyon
Esnek kart ve panel bileşeni tasarımı
Projeksiyonun bileşen esnekliğine katkısı
ngProjectAs ile hedef yuva eşleme
Projekte içerik ile şablon içeriği farkı

Modül 4

ContentChild ve Etkileşim

ContentChild ile projekte içeriğe erişim
ContentChildren ile projekte liste sorgusu
ngAfterContentInit ile içerik hazır anı
Üst bileşenin projekte bileşeni koordinasyonu
Sekme grubu gibi bileşik bileşen deseni
View ve content sorgusu zamanlama farkı

Günün hedefiKatılımcı change detection mekanizmasını kavrar, OnPush ile render'ı optimize eder, ViewEncapsulation ve host bağlamayı uygular ve dinamik bileşen yüklemeyi gerçekleştirir.

Modül 1

Change Detection

Zone tabanlı değişim denetiminin çalışması
Varsayılan stratejide ağacın taranması
OnPush ile denetimin referans değişimine bağlanması
Değişmez veriyle OnPush uyumunun sağlanması
markForCheck ile manuel tetikleme
async pipe ve OnPush birlikte kullanımı

Modül 2

ViewEncapsulation

Emulated kapsama ile stilin bileşene özel olması
ShadowDom kapsama ile gerçek izolasyon
None ile stilin global sızması
host ve host-context seçicileri
ng-deep kullanımının riskleri ve sınırları
Stil kapsamının bileşen bakımına etkisi

Modül 3

Host Bağlama ve Dinleme

HostBinding ile ana öğeye özellik bağlama
HostListener ile ana öğe olaylarını dinleme
host metadata ile bildirimsel bağlama
Ana öğeye koşullu sınıf ekleme
Erişilebilirlik için host attribute tanımı
Direktifle host davranışının paylaşımı

Modül 4

Dinamik Bileşen Yükleme

ViewContainerRef ile çalışma zamanı bileşen
createComponent ile programatik oluşturma
ngComponentOutlet ile bildirimsel yükleme
Dinamik bileşene input değerlerinin geçişi
Modal ve bildirim için dinamik kullanım
Oluşturulan bileşenin imha yönetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Data binding ustalığı

Interpolation, property, event ve two-way binding türlerini kullanarak bileşen ile şablon arasında akıcı veri akışı kurabilirsiniz.

✅

Bileşen iletişimi

Input ve Output ile üst ve alt bileşenler arasında tipli ve anlaşılır bir iletişim sözleşmesi tasarlayabilirsiniz.

✅

Signals giriş çıkış

Signal tabanlı input, output ve model API'siyle güncel ve reaktif bileşen arayüzleri oluşturabilirsiniz.

✅

Yaşam döngüsü yönetimi

Yaşam döngüsü kancalarını doğru sırada kullanarak başlatma, güncelleme ve temizlik işlerini doğru anda çalıştırabilirsiniz.

✅

Görünüm sorguları

ViewChild ve ContentChild ile şablon ve projekte öğelere erişerek bileşik bileşenleri koordine edebilirsiniz.

✅

İçerik projeksiyonu

ng-content ve çok yuvalı projeksiyonla esnek, yeniden kullanılabilir kart ve panel bileşenleri tasarlayabilirsiniz.

✅

Change detection

OnPush stratejisi ve değişmez veri yaklaşımıyla gereksiz render'ları önleyerek performanslı arayüzler geliştirebilirsiniz.

✅

İleri bileşen teknikleri

ViewEncapsulation, host bağlama ve dinamik bileşen yüklemeyle gelişmiş UI senaryolarını hayata geçirebilirsiniz.

Kimler İçin Uygundur?

Angular ile bileşen yazan ancak bileşen iletişimini
yaşam döngüsünü
içerik projeksiyonunu
change detection davranışını kavramak isteyen ön yüz geliştiricileri ve UI mimarisini güçlendirmek isteyen yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Angular ile bileşen yazan ancak bileşen iletişimini, yaşam döngüsünü, içerik projeksiyonunu ve change detection davranışını gerçekten kavramak isteyen geliştiriciler için uygundur. Temel Angular ve TypeScript bilgisi yeterlidir; konular temelden ileriye işlenir.

Signals tabanlı input ve output ele alınıyor mu?

Evet, klasik Input ve Output dekoratörlerinin yanında güncel input, output ve model fonksiyonları ayrı bir modülle işlenir. Signal tabanlı girişlerin change detection ve reaktif türetme üzerindeki etkisi örneklerle gösterilir.

OnPush change detection anlatılıyor mu?

Evet, son gün change detection mekanizması ve OnPush stratejisi uygulamalı ele alınır. Değişmez veriyle uyum, markForCheck ile manuel tetikleme ve async pipe ile birlikte kullanımı gereksiz render'ları önleme bağlamında anlatılır.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Yeniden kullanılabilir bileşenlerden oluşan bir arayüz gün gün geliştirilir. Yüz yüze veya online yapılabilir ve kurumun kullandığı Angular sürümüne göre içerik 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 eğitim boyunca geliştirilen örnek çalışmaları 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 : WORKING WITH COMPONENTS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Component Anatomisi

Interpolation ve Property

Event ve Two-Way

Şablon ve Kontrol Akışı

Input ile Veri Alma

Output ile Olay Yayma

Signals Giriş Çıkış

İletişim Desenleri

Yaşam Döngüsü Kancaları

View Sorguları ve Erişim

İçerik Projeksiyonu

ContentChild ve Etkileşim

Change Detection

ViewEncapsulation

Host Bağlama ve Dinleme

Dinamik Bileşen Yükleme

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Angular Architectures for Enterprise Application Eğitimi

Angular Eğitimi

Angular Giriş Eğitimi

Angular ve Firebase ile Web Uygulamaları Eğitimi

Angular ve RxJS ile Reaktif Programlama Eğitimi

Angular ve Web API ile Full-Stack Applications Bootcamp Eğitimi