Görüntüleme Directive'leri Eğitimi

Eğitim Hakkında

AngularJS ile dinamik görüntüleme

Eğitim, AngularJS'in arayüz görüntülemeyi yöneten directive'lerini kapsar: ng-repeat ile liste ve $index, $first, $last, track by; ng-if ile DOM ekleme ve ng-show/ng-hide ile görünürlük farkı, ng-switch, ng-class ve ng-style ile koşullu stil, ng-bind, ng-bind-html ve $sce, ng-cloak ve ng-non-bindable, ng-include ile parçalı görünüm, orderBy/filter/limitTo filtreleri, animasyon (ngAnimate) ve performans.

Süre ve Format

2 Gün. Her gün dört modül; Liste ve Koşullu Görüntüleme; Stil, Filtre ve Performans ekseninde ilerleyen uygulamalı program.

Seviye

Temel Seviye — AngularJS görüntüleme directive'leri: ng-repeat, ng-if, ng-show, ng-class, ng-style

Öğrenme Metodu

Ürün listesi, tablo ve form örnekleriyle her directive çalışan canlı bir arayüzde denenir.

Neden Bu Eğitim?

🖼️Dinamik arayüz

Veriye göre kendini güncelleyen listeler ve tablolar kurarsınız.

⚖️Doğru directive

ng-if ile ng-show arasındaki maliyet farkını bilerek seçersiniz.

🚀Performans

track by ve tek yönlü bağlamayla yavaşlamayı önlersiniz.

Anahtar Konular

AngularJS directiveng-repeatng-if ng-show farkıng-classAngularJS filtreAngularJS eğitimitrack byngAnimateng-switchAngularJS görüntüleme

“Ekranda görünen her şeyin bir maliyeti vardır; directive seçimi bu maliyeti belirler.”

Ön Koşullar

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

1

HTML ve JavaScript

Temel HTML, CSS ve JavaScript.

2

AngularJS temeli

ng-app ve ng-model kavramı.

3

Editör

VS Code ve tarayıcı.

4

Ortam

AngularJS 1.8 CDN veya npm.

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ı koleksiyonları ng-repeat ile listeler, koşullu görünümü ng-if, ng-show ve ng-switch ile yönetir.

Modül 1

ng-repeat

Dizi ve nesne üzerinde döngü
$index, $first, $last, $even, $odd
track by ile performans
Yinelenen değer hatası (dupes)
İç içe ng-repeat
ng-repeat-start / end

Modül 2

Koşullu Görüntüleme

ng-if ve DOM ekleme/çıkarma
ng-show ve ng-hide (CSS display)
ng-if ve ng-show seçim ölçütü
ng-switch ve ng-switch-when
Child scope etkisi
Boş durum göstergesi

Modül 3

Veri Gösterimi

İfade {{ }} ve ng-bind
ng-bind-html ve ngSanitize / $sce
ng-cloak ile flicker önleme
ng-non-bindable
Tek seferlik bağlama ::
ng-init sınırlamaları

Modül 4

Parçalı Görünüm

ng-include ve şablon önbelleği
ng-template script etiketi
Şablonda scope paylaşımı
Parametreli bileşen yerine ng-include
Hata durumunda yedek içerik
Şablon organizasyonu

Günün hedefiKatılımcı koşullu stil uygular, filtrelerle listeleri sıralar ve süzer, animasyon ve performans iyileştirmeleri yapar.

Modül 1

Stil Directive'leri

ng-class: string, dizi, nesne biçimleri
ng-class-even / odd
ng-style ve dinamik stil
ng-hide ve .ng-hide sınıfı
ng-disabled, ng-readonly, ng-checked
Geçersiz form durum sınıfları (ng-invalid)

Modül 2

Filtreler

filter, orderBy, limitTo
currency, date, number, json
Özel filtre yazma
Controller'da $filter kullanımı
Filtre zinciri ve performans
Arama kutusu ve canlı süzme

Modül 3

Animasyon

ngAnimate modülü
CSS geçişleri: ng-enter, ng-leave
ng-repeat animasyonu
ng-show / ng-hide animasyonu
JavaScript animasyonları
Animasyon performansı

Modül 4

Performans ve Sorun Giderme

$watch sayısı ve Batarang
Büyük listelerde sayfalama ve sonsuz kaydırma
track by ve bağlama stratejisi
Digest döngüsü maliyeti
Yaygın hatalar ve çözümleri
Kapanış projesi: ürün listesi arayüzü

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Liste gösterimi

ng-repeat ile liste ve tabloları üretebilirsiniz.

✅

Koşullu görünüm

ng-if, ng-show ve ng-switch'i doğru seçebilirsiniz.

✅

Veri bağlama

ng-bind ve ng-cloak ile temiz veri gösterebilirsiniz.

✅

Stil directive

ng-class ve ng-style ile dinamik stil verebilirsiniz.

✅

Filtre

orderBy, filter ve limitTo ile listeleri düzenleyebilirsiniz.

✅

Parçalı şablon

ng-include ile arayüzü bölümlendirebilirsiniz.

✅

Animasyon

ngAnimate ile geçiş efektleri ekleyebilirsiniz.

✅

Performans

track by ve watcher azaltma ile arayüzü hızlandırabilirsiniz.

Kimler İçin Uygundur?

AngularJS'e yeni başlayan veya bakım yapan front-end geliştiricileri
arayüz geliştirenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

AngularJS arayüz geliştirenler ve bakım yapan front-end geliştiricileri için uygundur.

Özel directive yazılıyor mu?

Hayır, yerleşik görüntüleme directive'lerine odaklanılır; özel directive için Controller ve Directive eğitimi önerilir.

ng-if ile ng-show farkı işleniyor mu?

Evet, DOM ve scope etkisiyle ayrıntılı karşılaştırılır.

Animasyon dahil mi?

ngAnimate ile temel geçiş animasyonları gösterilir.

Sertifika verilir mi?

Katılımcılara 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

WORKING WITH DISPLAY DIRECTIVES EĞİTİMİ