AngularUI Utilities & Modules Eğitimi

Eğitim Hakkında

AngularUI modüllerinin seçimi, entegrasyonu ve ölçeklenebilir uygulama organizasyonu

Bu eğitim, AngularUI ekosistemindeki modülleri birlikte kullanmayı anlatır. UI-Router, UI Bootstrap, ui-utils, ui-select ve ui-grid'in rolleri, modül bağımlılık yönetimi, bower/npm ile kurulum, webpack veya gulp ile paketleme, klasör yapısı ve lazy load (ocLazyLoad), bileşen tabanlı mimari (component API), performans ayarı ve Angular'a geçiş stratejileri uygulamalı işlenir.

Süre ve Format

2 Gün. Her gün dört modül; 1. günde Modül Ailesi ve Yardımcılar ve 2. günde Mimari, Performans ve Geçiş ele alınır, her modül uygulamalı çalışmayla pekiştirilir.

Seviye

Orta Seviye — AngularUI modül ailesi, ui-utils yardımcıları, modül organizasyonu ve bileşen entegrasyonu

Öğrenme Metodu

Tek bir örnek uygulama, modüllere ayrılır; her adımda paketleme boyutu, açılış süresi ve bakım kolaylığı ölçülerek karar verilir.

Neden Bu Eğitim?

🎯Ekosistem Hakimiyeti

Hangi AngularUI modülünün hangi ihtiyaca uygun olduğunu bilip gereksiz bağımlılıktan kaçınırsınız.

⚙️Ölçeklenebilir Yapı

Modül ve bileşen tabanlı organizasyonla büyüyen kod tabanını yönetilebilir tutarsınız.

🚀Geçişe Hazırlık

ngUpgrade ve bileşen mimarisiyle Angular'a kademeli geçiş zemini hazırlarsınız.

Anahtar Konular

AngularUI modülleriui-utilsUI-RouterUI BootstrapAngularJS mimariocLazyLoadAngularJS componentAngularJS webpackngUpgradeAngularJS performans

“Ekosistemi tanımak, her ihtiyaç için yeni kütüphane aramaktan çok daha hızlı yol aldırır.”

Ön Koşullar

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

1

AngularJS Deneyimi

Servis, direktif ve filtre yazmış olmak gerekir.

2

JavaScript Araçları

npm, gulp veya webpack ile temel derleme deneyimi faydalıdır.

3

Mimari Farkındalık

MVC/MVVM ve modüler tasarım kavramları bilinmelidir.

4

Geliştirme Ortamı

Node.js ve Git kurulu bir bilgisayar 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ı AngularUI modüllerini karşılaştırır, kurar ve birbirine uyumlu biçimde bağlar.

Modül 1

AngularUI Ekosistem Haritası

UI-Router, UI Bootstrap, ui-utils, ui-select, ui-grid ve ui-calendar'ın rolleri
Bakımı sürmeyen ve kullanımdan kalkan modüllerin tespiti
Sürüm uyumluluk tablosu ve changelog okuma
Modül seçiminde boyut, bakım durumu ve lisans değerlendirmesi
Üçüncü taraf alternatifler ve ne zaman tercih edilecekleri
Bağımlılık güncelleme stratejisi ve semver aralıkları

Modül 2

ui-utils Yardımcıları

ui-mask, ui-validate, ui-event ve ui-scrollfix özetleri
ui-indeterminate ve ui-jq ile jQuery eklentisi köprüleri
ui-route ve ui-keypress kullanım senaryoları
ui-utils paketini parça parça yükleme
jQuery bağımlılığını azaltma ve jqLite sınırları
Yardımcıların birim testle doğrulanması

Modül 3

Kurulum ve Paketleme

npm ve bower farkı, package.json ve lock dosyası
Modül ismi ve angular.module bağımlılık listesi
webpack ile AngularJS paketleme ve html şablonlarını önbelleğe alma
ng-annotate ve strictDi ile minify güvenliği
Kaynak harita (source map) ve üretim derlemesi
CDN ve yerel paket seçimi, bütünlük (SRI) kontrolü

Modül 4

Modül ve Klasör Organizasyonu

Özellik bazlı (feature) klasör yapısı ve katman bazlı yapı karşılaştırması
Paylaşılan (shared) modül ve çekirdek (core) modül ayrımı
Public API disiplini: modülün dışa neyi açacağı
Bağımlılık yönü kuralları ve döngüsel bağımlılığı önleme
Sabitler, yapılandırma ve ortam değişkenleri yönetimi
Kod standardı: John Papa stil rehberi özeti

Günün hedefiKatılımcı bileşen tabanlı yapı kurar, yüklemeyi optimize eder ve modernizasyon planı çıkarır.

Modül 1

Bileşen Tabanlı Mimari

component() API, bindings (<, @, &, =) ve tek yönlü veri akışı
Akıllı ve sunum (dumb) bileşen ayrımı
Yaşam döngüsü kancaları: $onInit, $onChanges, $onDestroy
Controller as sözdizimi ve $scope kullanımının azaltılması
Bileşen testleri ve $componentController
UI-Router 1.x ile bileşen tabanlı state (component:) kullanımı

Modül 2

Lazy Load ve Yükleme Performansı

ocLazyLoad ile modül ve state bazlı gecikmeli yükleme
UI-Router future state ve lazyLoad yaklaşımı
Şablon önbelleği ve $templateCache
Paket boyutunu webpack analiz araçlarıyla inceleme
Kritik yükleme yolu ve ilk boyama süresi
Sunucu sıkıştırma (gzip, brotli) ve HTTP önbellek başlıkları

Modül 3

Çalışma Zamanı Performansı

$watch sayısı ve digest döngüsü maliyetinin ölçülmesi
One-time binding (::) ve track by ile ng-repeat optimizasyonu
$applyAsync, debounce ve $timeout kullanımının etkileri
ng-model-options ile gereksiz digest'in azaltılması
Batarya ve bellek sızıntısı: $destroy ve olay dinleyici temizliği
Chrome DevTools ve Batarang benzeri araçlarla profil çıkarma

Modül 4

Angular'a Geçiş Stratejisi

ngUpgrade ile hibrit uygulama ve UpgradeModule
Strangler kalıbıyla bileşen bileşen taşıma
TypeScript'e geçiş ve ES6 modülleri
Geçişte test kapsamının artırılması
Hizmet ve yönlendirme katmanının taşınma sırası
Maliyet-yarar ve zaman planı çıkarma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Modül Seçimi

AngularUI modüllerini ihtiyaca göre seçip bakım durumunu değerlendirebilirsiniz.

🧩

Yardımcı Kullanımı

ui-utils yardımcılarını doğru yerde uygulayabilirsiniz.

🛠️

Paketleme

webpack ve strictDi ile üretim derlemesi hazırlayabilirsiniz.

📊

Modül Mimarisi

Özellik bazlı modül ve klasör yapısı tasarlayabilirsiniz.

🔍

Bileşen API'si

component() ile tek yönlü veri akışlı bileşenler yazabilirsiniz.

🧪

Lazy Loading

ocLazyLoad ile ilk yükleme süresini kısaltabilirsiniz.

📐

Digest Optimizasyonu

Watcher sayısını azaltıp çalışma zamanı performansını artırabilirsiniz.

🚀

Geçiş Planı

Angular'a kademeli geçiş için yol haritası çıkarabilirsiniz.

Kimler İçin Uygundur?

AngularJS projelerinde mimari kararlar alan kıdemli geliştiriciler
eski kod tabanlarını sürdüren takım liderleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

AngularJS projelerinde mimari kararlar alan kıdemli geliştiriciler ve eski kod tabanlarını sürdüren takım liderleri için uygundur.

AngularJS desteği sona erdi mi?

Resmi destek sona ermiştir; eğitim, sürmekte olan sistemlerin güvenli bakımı ve geçiş planı üzerine yoğunlaşır.

Diğer AngularUI eğitimleriyle farkı nedir?

Bu eğitim bileşen detaylarından çok modül seçimi, mimari, performans ve geçiş kararlarına odaklanır.

Bileşenlerin hepsi uygulanıyor mu?

Ana bileşenler uygulanır; diğerleri için seçim ve entegrasyon ölçütleri verilir.

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