AngularUI Interface Utilities Eğitimi

Eğitim Hakkında

AngularUI arayüz bileşenleri, tablo/grid yapıları ve etkileşim yardımcıları

Bu eğitim, AngularJS uygulamalarında zengin arayüz oluşturmak için AngularUI bileşenlerini kapsar. UI Bootstrap ile modal, tabs, accordion, dropdown, tooltip ve popover; ui-grid ile sıralama, filtreleme ve sanal kaydırma; ui-scroll ile sonsuz liste; ui-event ve ui-utils ile olay yardımcıları; ui-router çok görünümlü yerleşimler ve animasyon uygulamalı işlenir.

Süre ve Format

2 Gün. Her gün dört modül; 1. günde UI Bootstrap ve Yerleşim ve 2. günde Tablo, Liste ve Etkileşim Yardımcıları ele alınır, her modül uygulamalı çalışmayla pekiştirilir.

Seviye

Orta Seviye — AngularJS arayüzünde UI Bootstrap bileşenleri, modal, grid, yerleşim ve olay yardımcıları

Öğrenme Metodu

Bir yönetim paneli adım adım kurulur; modal, tablo ve sekme bileşenleri ortak bir tasarım diliyle entegre edilir.

Neden Bu Eğitim?

🎯Hazır Bileşenler

Modal, sekme ve akordeon gibi bileşenleri sıfırdan yazmadan güvenle kullanırsınız.

⚙️Büyük Veri Tabloları

ui-grid ve sanal kaydırmayla binlerce satırı akıcı gösterirsiniz.

🚀Tutarlı Yerleşim

Çok görünümlü state'lerle panel, kenar çubuğu ve içerik alanlarını düzenli yönetirsiniz.

Anahtar Konular

AngularUIUI Bootstrapuib-modalui-gridui-scrollui-eventAngularJS arayüztabs accordionui-router named viewsAngularJS yönetim paneli

“Arayüz bileşenleri kullanıcıya her tıklamada küçük bir söz verir; kodunuz o sözü tutmalıdır.”

Ön Koşullar

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

1

AngularJS Temelleri

Direktif, controller ve scope kavramları bilinmelidir.

2

HTML ve CSS

Bootstrap 3 ızgara sistemi ve temel CSS bilgisi gerekir.

3

JavaScript

Promise ve DOM olayları hakkında temel deneyim beklenir.

4

Ortam

npm ile paket kurup yerel sunucu çalıştırabilen bir geliştirme ortamı 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ı UI Bootstrap bileşenleri ve UI-Router görünümleriyle panel yerleşimi kurar.

Modül 1

UI Bootstrap Kurulumu

ui.bootstrap modülünün eklenmesi ve uib- ön ek kuralı
Bootstrap 3 CSS bağımlılığı ve tema özelleştirme
Şablon önbelleği: ui-bootstrap-tpls ile özel şablon geçersiz kılma
Bileşen seçerek özel yapı (custom build) oluşturma
Sürüm uyumluluğu: AngularJS ve UI Bootstrap eşleşmesi
Animasyon desteği için ngAnimate

Modül 2

Modal Pencereler

$uibModal.open ile controller, template ve resolve kullanımı
result promise ile kapatma ve iptal sonuçları
Modal içine veri aktarma ve dönüş değeri alma
Modal boyutu, backdrop ve klavye (ESC) ayarları
Üst üste modal ve odak tuzağı davranışı
Onay, form ve bilgi modalleri için ortak servis yazımı

Modül 3

Sekme, Akordeon ve Açılır Menü

uib-tabset ve uib-tab ile sekme başlığı, aktif sekme kontrolü
UI-Router state ile sekme eşleştirme
uib-accordion ve tek açık panel davranışı
uib-dropdown, is-open ve otomatik kapanma
Collapse (uib-collapse) ile panel gizleme/gösterme
Pagination ve pager bileşenlerinin kullanımı

Modül 4

Çoklu Görünüm ve Yerleşim

ui-view'ların adlandırılması ve views nesnesi
Üst ve alt state'te farklı şablonların aynı sayfada birleşimi
Kenar çubuğu, üst bar ve içerik alanı düzeni
Başlık ve breadcrumb'ın state verisinden üretilmesi
Yetkiye göre menü öğesi gösterme
Sayfa geçiş animasyonları ve yükleme göstergesi

Günün hedefiKatılımcı büyük veri tablolarını gösterir, sonsuz kaydırma kurar ve etkileşim yardımcılarını uygular.

Modül 1

ui-grid ile Veri Tabloları

columnDefs, data ve gridOptions tanımı
Sıralama, filtreleme ve sütun yeniden boyutlandırma
Sayfalama ve sunucu taraflı veri yükleme
Satır seçimi, düzenleme (cellEdit) ve hücre şablonları
Dışa aktarma (CSV, PDF) ve sütun gizleme
Sanal kaydırma ile performans ve satır yüksekliği

Modül 2

ui-scroll ve Sonsuz Liste

ui-scroll yönergesi ve datasource nesnesi (get fonksiyonu)
Arabellek boyutu, padding ve sanal DOM yönetimi
Büyük listelerde DOM düğümü sayısının sınırlanması
Yukarı ve aşağı yönlü yükleme, adapter kullanımı
Yükleme durumu ve boş liste geri bildirimi
Bilgi kartları listesinde performans ölçümü

Modül 3

ui-event, ui-utils ve Yardımcılar

ui-event ile blur, focus, keyup gibi olayların ifadeye bağlanması
ui-keypress ve klavye kısayolları
ui-scrollfix, ui-jq ve ui-indeterminate yardımcıları
ui-route ve ui-uniq gibi küçük yardımcıların rolü
ng-click yerine ui-event seçildiği durumlar
Mobil dokunmatik olaylar için ngTouch

Modül 4

Tooltip, Popover ve Bildirimler

uib-tooltip ve uib-popover yerleşim ve tetikleyiciler
Dinamik içerikli popover şablonları
Alert bileşeni ve zamanlayıcıyla kapanan bildirimler
Merkezi bildirim servisi (toast) tasarımı
Progress bar ve rating bileşenleri
Erişilebilirlik: klavye gezinmesi ve ekran okuyucu etiketleri

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

UI Bootstrap Kullanımı

Bileşenleri özel şablonlarla projeye entegre edebilirsiniz.

🧩

Modal Tasarımı

$uibModal ile veri alışverişli modal pencereler kurabilirsiniz.

🛠️

Sekme ve Akordeon

State ile eşlenen sekme ve akordeon yapıları geliştirebilirsiniz.

📊

Çoklu Görünüm

Adlandırılmış ui-view'larla panel yerleşimi oluşturabilirsiniz.

🔍

ui-grid Tabloları

Sıralama, filtreleme ve sayfalamalı veri tabloları kurabilirsiniz.

🧪

Sonsuz Kaydırma

ui-scroll ile büyük listeleri akıcı gösterebilirsiniz.

📐

Olay Yardımcıları

ui-event ve ilgili yardımcılarla etkileşimleri sadeleştirebilirsiniz.

🚀

Bildirim Servisi

Tooltip, popover ve toast bildirimlerini tutarlı yönetebilirsiniz.

Kimler İçin Uygundur?

AngularJS 1.x arayüzlerini geliştiren veya yenileyen ön yüz geliştiricileri
arayüz mimarları için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

AngularJS 1.x arayüzlerini geliştiren veya yenileyen ön yüz geliştiricileri ve arayüz mimarları için uygundur.

Bootstrap 4 ile çalışır mı?

UI Bootstrap 2.x sürümleri Bootstrap 4 destekler; eğitimde sürüm eşleştirmesi ve geçiş notları verilir.

ui-grid yerine başka seçenek var mı?

Evet, ag-Grid gibi alternatifler karşılaştırmalı olarak tartışılır.

Mobil uyumluluk işleniyor mu?

Evet, duyarlı yerleşim ve ngTouch kullanımı uygulamalarda ele alınır.

Sertifika veriliyor mu?

Programı tamamlayanlara 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

ANGULARUI INTERFACE UTILITIES EĞİTİMİ