AngularUI Input Utilities Eğitimi

Eğitim Hakkında

AngularJS formlarında maskeleme, doğrulama ve gelişmiş seçim bileşenleri

Bu eğitim, AngularJS formlarında kullanıcı girdisini kolaylaştıran ve doğrulayan AngularUI bileşenlerini ele alır. ngModel ve form doğrulama temelleri, ui-mask ile telefon ve TC kimlik maskeleri, ui-validate ile özel doğrulayıcılar, ui-select ile aranabilir çoklu seçim, UI Bootstrap datepicker ve typeahead, ngMessages ile hata iletileri ve erişilebilir form tasarımı uygulamalı anlatılır.

Süre ve Format

2 Gün. Her gün dört modül; 1. günde Form Doğrulama ve Maskeleme ve 2. günde Gelişmiş Seçim ve Tarih Bileşenleri ele alınır, her modül uygulamalı çalışmayla pekiştirilir.

Seviye

Orta Seviye — AngularJS formları için maske, doğrulama, seçim kutusu ve tarih girişi bileşenleri

Öğrenme Metodu

Kayıt, sipariş ve başvuru formları üzerinde her bileşen kademeli eklenir; doğrulama senaryoları Protractor benzeri testlerle denenir.

Neden Bu Eğitim?

🎯Temiz Veri

Maske ve doğrulayıcılarla hatalı veriyi sunucuya gitmeden yakalarsınız.

⚙️Gelişmiş Seçim

Aranabilir, çoklu ve sunucu destekli seçim kutularıyla kullanıcı deneyimini iyileştirirsiniz.

🚀Anlaşılır Hata

ngMessages ile alan bazlı, yerelleştirilmiş hata iletileri gösterirsiniz.

Anahtar Konular

AngularUIui-maskui-validateui-selectAngularJS form doğrulamangMessagesUI Bootstrap datepickertypeaheadngModelAngularJS eğitimi

“İyi bir form, kullanıcının hata yapmasını zorlaştıran ve yaptığında nazikçe yol gösteren formdur.”

Ön Koşullar

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

1

AngularJS Bilgisi

Scope, direktif ve ngModel kullanımı temel düzeyde bilinmelidir.

2

HTML Formları

Input türleri ve HTML5 doğrulama özellikleri hakkında bilgi gerekir.

3

JavaScript

Fonksiyonlar ve düzenli ifadeler (regex) kullanabilmek beklenir.

4

Ortam

Node.js, npm veya bower ile paket kurulabilen 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ı form durumlarını yönetir, maskeler uygular ve özel doğrulayıcılar yazar.

Modül 1

AngularJS Form Temelleri

ngModel, ngModelController ve $setViewValue/$render döngüsü
form ve ngForm ile $pristine, $dirty, $valid, $touched durumları
$error nesnesi ve yerleşik doğrulayıcılar (required, pattern, minlength)
ng-model-options ile debounce ve updateOn ayarı
Gönderim sırasında $submitted durumu ve tüm alanları işaretleme
Form sıfırlama ve ilk durum koruma kalıpları

Modül 2

ui-mask ile Girdi Maskeleme

ui-mask yönergesi ve maske tanım dizgesi
Telefon, TC kimlik, IBAN ve plaka için maske örnekleri
uiMaskConfig ile özel maske karakterleri
Model değerine maskeli veya maskesiz veri aktarımı
Yer tutucu karakter ve ui-options ayarları
Maskenin kopyala-yapıştır ve mobil klavye davranışları

Modül 3

ui-validate ile Özel Doğrulama

ui-validate ifadesi ve ui-validate-watch ile bağımlı alanlar
Şifre eşleşmesi ve tarih aralığı gibi çapraz alan doğrulaması
TC kimlik numarası algoritma doğrulaması
$validators ve $asyncValidators ile özel direktif yazımı
Sunucuda benzersizlik denetimi için asenkron doğrulama
Doğrulama sonuçlarının ngModel.$error üzerinden okunması

Modül 4

Hata İletileri ve Erişilebilirlik

ngMessages ve ngMessage ile koşullu ileti gösterimi
Ortak ileti şablonları ve ng-messages-include
aria-invalid, aria-describedby ve odak yönetimi
Çok dilli (i18n) hata iletileri
Alan düzeyinde ve form düzeyinde özet hata paneli
Mobilde dokunma hedefi ve etiketleme ilkeleri

Günün hedefiKatılımcı aranabilir seçim, tarih ve otomatik tamamlama bileşenlerini forma entegre eder.

Modül 1

ui-select ile Aranabilir Seçim

ui-select, ui-select-match ve ui-select-choices yapısı
Tekli ve çoklu (multiple) seçim modları
Filtre, grup ve sıralama ile seçenek listesi
Sunucudan arama: refresh fonksiyonu ve refresh-delay
Etiket oluşturma (tagging) ve özel değer kabulü
Tema seçimi (bootstrap, select2, selectize) ve stil özelleştirme

Modül 2

Tarih ve Saat Girişi

UI Bootstrap uib-datepicker ve uib-datepicker-popup
Tarih biçimi, yerelleştirme ve Türkçe ay/gün adları
min-date, max-date ve tarih devre dışı bırakma fonksiyonu
Saat seçici uib-timepicker ve 24 saat biçimi
Saat dilimi ve UTC dönüşümü tuzakları
Tarih aralığı seçici kurgusu

Modül 3

Typeahead ve Otomatik Tamamlama

uib-typeahead yönergesi ve sunucu destekli öneri kaynağı
typeahead-min-length, typeahead-wait-ms ve ağ yükünü azaltma
Şablonlu öneri satırları ve seçim olayı
typeahead-editable ve modelin nesne olarak tutulması
Klavye ile gezinme ve erişilebilirlik
Yükleme durumu ve sonuç bulunamadı geri bildirimi

Modül 4

Bileşenleri Birleştirme ve Test

Çok adımlı sihirbaz formu ve adımlar arası doğrulama
Bileşenleri yeniden kullanılabilir direktife sarmalama
Dinamik form alanları ve ng-repeat içinde doğrulama tuzakları
Karma ile birim test ve $compile ile direktif testi
Performans: $watch sayısını azaltma ve one-time binding
Form verisini sunucuya gönderirken dönüşüm ve temizlik

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Form Durumları

ngModelController ve form durumlarını doğru yönetebilirsiniz.

🧩

Girdi Maskeleme

ui-mask ile telefon, IBAN ve TC kimlik gibi alanları maskeleyebilirsiniz.

🛠️

Özel Doğrulayıcı

Eşzamanlı ve eşzamansız doğrulayıcı direktifler yazabilirsiniz.

📊

Hata İletisi

ngMessages ile okunaklı, çok dilli hata iletileri üretebilirsiniz.

🔍

Gelişmiş Seçim

ui-select ile aranabilir ve çoklu seçim kutuları kurabilirsiniz.

🧪

Tarih Girişi

Datepicker ve timepicker bileşenlerini yerelleştirip kısıtlayabilirsiniz.

📐

Otomatik Tamamlama

Typeahead'i sunucu destekli ve ağ dostu şekilde uygulayabilirsiniz.

🚀

Form Testi

Form bileşenlerini birim testlerle güvence altına alabilirsiniz.

Kimler İçin Uygundur?

AngularJS 1.x
form ağırlıklı kurumsal uygulamalar geliştiren veya bakımını yapan ön yüz geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

AngularJS 1.x ile form ağırlıklı kurumsal uygulamalar geliştiren veya bakımını yapan ön yüz geliştiricileri için uygundur.

Hangi AngularJS sürümüyle çalışılır?

Örnekler AngularJS 1.5 ve üzeri sürümlerle hazırlanır; sürüm farkları gerektiğinde belirtilir.

UI Bootstrap eğitime dahil mi?

Evet, datepicker, timepicker ve typeahead bileşenleri bu kapsamda uygulanır.

Yeni projede kullanılmalı mı?

Yeni projelerde modern çerçeveler önerilir; eğitim mevcut AngularJS sistemlerini sürdürenler içindir.

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 INPUT UTILITIES EĞİTİMİ