AngularUI Routing ve UI-Select Eğitimi

Eğitim Hakkında

UI-Router durum yönlendirmesi, UI-Select bileşeni ve model bağlama aliasing teknikleri

Bu orta seviye eğitim, AngularJS tek sayfa uygulamalarında AngularUI ekosistemini derinlemesine ele alır. UI-Router ile $stateProvider üzerinden durum (state) tanımlama, ui-sref yönlendirme bağlantıları, ui-view ile iç içe ve isimlendirilmiş görünümler, abstract state'ler ve resolve ile veri ön yüklemesi işlenir. UI-Select bileşeniyle arama, çoklu seçim, etiketleme ve uzak veri kaynağından (AJAX) doldurma uygulanır. Model aliasing tarafında controllerAs sözdizimi, ngModelOptions ile debounce/updateOn davranışı ve $stateParams ile durum parametrelerinin bağlanması gerçek örneklerle gösterilir. Hedef, karmaşık gezinmeye sahip bakımı kolay SPA'lar üretmektir.

Süre ve Format

3 Gün. Her gün dört modül; her modülde kavram anlatımının ardından tarayıcıda çalışan canlı kod örnekleri geliştirilir.

Seviye

Orta Seviye — AngularJS uygulamalarında UI-Router ile durum tabanlı yönlendirme, UI-Select ile gelişmiş seçim ve model aliasing teknikleri.

Öğrenme Metodu

Katılımcılar her konuyu küçük bir SPA iskeletinde Plunker/tarayıcı ortamında kodlayarak pekiştirir; state ağacı ve bağlama davranışı canlı izlenir.

Neden Bu Eğitim?

🧭Durum Yönlendirme

UI-Router ile iç içe görünümler ve abstract state'leri kullanarak karmaşık gezinmeyi düzene sokarsınız.

🔎Gelişmiş Seçim

UI-Select ile arama, çoklu seçim ve AJAX kaynaklı doldurma özellikli form bileşenleri kurarsınız.

🔗Temiz Bağlama

controllerAs ve ngModelOptions ile okunur, öngörülebilir model bağlama tasarlarsınız.

Anahtar Konular

angularui eğitimiui-routerangularjs yönlendirmeui-selectstate tabanlı routingresolvengmodeloptionscontrollerastek sayfa uygulamaspa yönlendirme

“İyi bir tek sayfa uygulaması, kullanıcıyı değil durumu yönetir; gerisi görünümdür.”

Ön Koşullar

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

1

AngularJS Temeli

Controller, scope, directive ve two-way binding kavramlarına aşinalık gerekir.

2

JavaScript

Fonksiyonlar, promise ve modül yapısına temel düzeyde hâkimiyet beklenir.

3

Geliştirme Ortamı

Modern bir tarayıcı, kod editörü ve basit bir yerel HTTP sunucusu yeterlidir.

4

HTML/CSS

Şablon ve sınıf tabanlı stil kavramlarına temel aşinalık.

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ı, $stateProvider ile durum ağacı kurup ui-view üzerinden iç içe görünümleri yönetebilir.

Modül 1

UI-Router'a Giriş

ngRoute ile UI-Router arasındaki durum (state) tabanlı farkın kavranması
angular.module bağımlılığına ui.router eklenmesi
$stateProvider.state() ile ilk durumun tanımlanması
$urlRouterProvider.otherwise() ile varsayılan rota yönlendirmesi
template ve templateUrl ile durum görünümünün bağlanması
controller ile duruma iş mantığının eklenmesi

Modül 2

ui-sref ve Gezinme

ui-sref ile durumlar arası bağlantı oluşturma
ui-sref-active ile aktif menü öğesinin vurgulanması
$state.go() ile programatik durum geçişi
ui-sref'e parametre geçirme sözdizimi
href üretiminin otomatikleştirilmesi ve URL tutarlılığı
$state.current ile aktif durum bilgisinin okunması

Modül 3

İç İçe ve İsimli Görünümler

Nokta notasyonuyla (parent.child) iç içe state tanımı
ui-view ile ebeveyn şablona çocuk görünüm yerleştirme
views: { } ile isimlendirilmiş (named) birden çok görünüm
Paylaşılan düzen (layout) ve bileşen yeniden kullanımı
Çocuk durumun ebeveyn URL'ini miras alması
Görünüm hiyerarşisinin DOM'da doğrulanması

Modül 4

Abstract State'ler

abstract: true ile doğrudan erişilemeyen üst durum tanımı
Ortak veri ve düzeni abstract ebeveynde toplama
Abstract durumun resolve'unun çocuklara miras geçmesi
Modül bazlı (ör. admin, dashboard) gruplamanın kurulması
Abstract state ile kod tekrarının azaltılması
Çocuk durumlara geçişte ebeveyn şablonun korunması

Günün hedefiKatılımcı, state parametreleri ve resolve ile veri odaklı, güvenli geçişli yönlendirme kurar.

Modül 1

Durum Parametreleri

url: '/user/:id' ile URL parametre tanımı
$stateParams ile parametre değerinin okunması
params: { } ile URL'de görünmeyen durum verisi taşıma
Opsiyonel ve tip belirtimli (int/string) parametreler
squash ile varsayılan parametrelerin URL'den gizlenmesi
Parametre değişiminde durumun yeniden yüklenmesi davranışı

Modül 2

Resolve ile Veri Ön Yükleme

resolve: { } ile görünümden önce veri hazırlama
Promise döndüren servislerin resolve'da kullanımı
Resolve edilen verinin controller'a enjekte edilmesi
Veri yüklenene kadar geçişin bekletilmesi (deferred)
Resolve başarısızlığında geçişin iptal edilmesi
Resolve ile tekrarlı AJAX çağrılarının önlenmesi

Modül 3

Geçiş Olayları ve Koruma

$stateChangeStart ile geçiş öncesi müdahale
event.preventDefault() ile yetkisiz geçişin engellenmesi
$stateChangeSuccess ve $stateChangeError dinleyicileri
Kimlik doğrulama tabanlı rota koruma (auth guard) kurulumu
Geçiş sırasında yükleniyor göstergesinin yönetimi
$stateNotFound olayının ele alınması

Modül 4

Organizasyon ve Performans

State ağacının modüler dosyalara bölünmesi
Büyük uygulamalarda rota tanımlarının gruplanması
Yeniden kullanılabilir görünüm bileşenleri tasarımı
reloadOnSearch davranışının performansa etkisi
URL tasarımının yer imi (bookmark) ve paylaşıma uygunluğu
Derin bağlantı (deep link) ile doğrudan duruma giriş

Günün hedefiKatılımcı, UI-Select ile zengin seçim bileşenleri kurar ve controllerAs/ngModelOptions ile temiz bağlama sağlar.

Modül 1

UI-Select Temelleri

ui.select modülünün bağımlılık olarak eklenmesi
ui-select ve ui-select-choices yapısının kurulması
ng-model ile seçilen değerin iki yönlü bağlanması
repeat sözdizimiyle seçenek listesinin doldurulması
Yer tutucu (placeholder) ve temizleme (allow-clear) ayarı
Bootstrap/Select2 teması ile görsel entegrasyon

Modül 2

Arama ve Çoklu Seçim

refresh ile yazarken AJAX'tan uzak veri çekme
refresh-delay ile arama isteklerinin debounce edilmesi
multiple ile çoklu seçim ve etiket (tag) gösterimi
filter: $select.search ile istemci tarafı filtreleme
tagging ile listede olmayan yeni değer ekleme
Seçilen öğelerin ng-model dizisinde yönetimi

Modül 3

Model Aliasing ve controllerAs

controllerAs sözdizimiyle $scope kirliliğinin azaltılması
vm (view model) takma adıyla şablon-controller netliği
İç içe scope'larda bağlama belirsizliğinin giderilmesi
'this' bağlamının controller içinde yönetimi
Takma ad ile iç içe görünümlerde isim çakışmasının önlenmesi
Bindable üyelerin controller başında toplanması deseni

Modül 4

ngModelOptions ile Bağlama Kontrolü

ng-model-options updateOn: 'blur' ile güncelleme anının kontrolü
debounce ile model güncellemesinin geciktirilmesi
getterSetter ile model erişiminin fonksiyonla yönetimi
allowInvalid ile geçersiz değerin modele yazılması davranışı
Form doğrulama ($valid/$dirty) ile birlikte kullanım
Performans için gereksiz digest döngülerinin azaltılması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

State Ağacı

$stateProvider ile iç içe ve abstract durumlardan oluşan temiz bir rota ağacı kurarsınız.

✅

İsimli Görünüm

ui-view ve named views ile paylaşılan düzende birden çok bölgeyi yönetirsiniz.

✅

Parametreli Rota

$stateParams ve params ile URL ve durum verisini güvenle taşırsınız.

✅

Resolve

resolve ile görünümden önce veri yükleyip geçişleri veri odaklı hale getirirsiniz.

✅

Rota Koruma

$stateChangeStart ile kimlik doğrulama tabanlı rota koruması uygularsınız.

✅

UI-Select

Arama, çoklu seçim ve AJAX kaynaklı doldurma özellikli seçim bileşenleri kurarsınız.

✅

Temiz Bağlama

controllerAs ile scope kirliliğini azaltıp okunur controller'lar yazarsınız.

✅

Bağlama Kontrolü

ngModelOptions debounce ve updateOn ile model güncelleme davranışını ayarlarsınız.

Kimler İçin Uygundur?

Temel AngularJS bilgisine sahip
tek sayfa uygulamalarda gelişmiş yönlendirme
form bileşenleri kurmak isteyen ön yüz (frontend) geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Temel AngularJS bilgisine sahip, SPA'larda gelişmiş yönlendirme ve form bileşenleri kurmak isteyen ön yüz geliştiricileri için uygundur.

UI-Router ile ngRoute farkı nedir?

ngRoute URL odaklı basit yönlendirme sunarken, UI-Router durum (state) tabanlıdır; iç içe görünümler, abstract state ve named views gibi karmaşık senaryoları mümkün kılar.

Resolve neden önemlidir?

Resolve, görünüm oluşturulmadan önce gerekli veriyi yükler; böylece controller veriye hazır başlar ve geçiş veri gelene kadar bekletilebilir.

Önceden JavaScript bilmek gerekir mi?

Evet; fonksiyonlar, promise ve modül yapısına temel düzeyde hâkimiyet eğitimden verim almanız için faydalıdır.

Eğitim sonunda sertifika veriliyor mu?

Katılım ve değerlendirme sonrası 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

ALIASING, SELECTION, & ROUTING WITH ANGULARUI EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

UI-Router'a Giriş

ui-sref ve Gezinme

İç İçe ve İsimli Görünümler

Abstract State'ler

Durum Parametreleri

Resolve ile Veri Ön Yükleme

Geçiş Olayları ve Koruma

Organizasyon ve Performans

UI-Select Temelleri

Arama ve Çoklu Seçim

Model Aliasing ve controllerAs

ngModelOptions ile Bağlama Kontrolü

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

5G Mobile Network Providers: 5G Mobile Networks & Providers Eğitimi

5G Mobile Network Providers: Diving Deeper into 5G's Layered Design Eğitimi

5G Mobile Network Providers: The 5G Protocol Stacks Eğitimi

5G Principles & Practices: Small Cell Networking Eğitimi

6G-İzleyici Altyapı ve Ağ Tasarımı Eğitimi