Angular Material & Elements Eğitimi

Eğitim Hakkında

Material bileşenlerinden tema sistemine ve Angular Elements ile web bileşeni üretimine uzanan eğitim

Angular Development: Material & Elements Eğitimi, Angular bilen geliştiricilere Material Design bileşen kütüphanesiyle tutarlı arayüzler kurmayı ve Angular Elements ile uygulamayı taşınabilir web bileşenine dönüştürmeyi öğretir. Katılımcılar Material bileşenlerini, CDK yapı taşlarını, SCSS tema sistemiyle markalaştırmayı, veri tablosu ve erişilebilirliği öğrenir. Eğitim, bileşenleri custom element olarak derleyip Angular dışında kullanmayla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; örnek bir yönetim paneli Material bileşenleriyle kurulur, markaya göre temalandırılır ve son gün web bileşeni olarak paketlenir.

Seviye

Orta Seviye — Angular bilen geliştiricilere Angular Material bileşen kütüphanesini ve Angular Elements ile web bileşeni üretmeyi öğretir

Öğrenme Metodu

Gerçek bir yönetim paneli canlı geliştirilir; her modülde yeni bir Material bileşeni eklenir, son gün Elements ile dışa aktarılır.

Neden Bu Eğitim?

🎯Hazır Material bileşenleri

Google Material Design ilkelerine uygun, erişilebilir ve test edilmiş bileşenlerle arayüzü sıfırdan yazmadan hızla üretirsiniz.

🎨Markaya özel tema

SCSS tema API'si ve tasarım token'larıyla renk, tipografi ve yoğunluğu kurumsal kimliğinize uyarlar, karanlık tema eklersiniz.

🔧Taşınabilir bileşen

Angular Elements ile bileşenleri standart web bileşenine çevirir, React, Vue veya düz HTML sayfalarda yeniden kullanırsınız.

Anahtar Konular

angular material eğitimiangular elements eğitimiangular bileşen kütüphanesimaterial design angularangular cdk eğitimiangular tema özelleştirmeweb bileşeni üretimicustom element angularangular veri tablosuangular arayüz geliştirme

“Material ile tutarlı arayüz, Elements ile taşınabilir bileşen; bu eğitim ikisini birleştirerek her yerde çalışan bir tasarım sistemi kurdurur.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı bilgi ve hazır geliştirme ortamı

1

Angular temelleri

Bileşen, template, binding ve servis kavramlarına aşinalık Material bileşenlerini kullanmayı kolaylaştırır.

2

TypeScript bilgisi

Sınıf, arayüz ve dekoratör kavramlarını bilmek bileşen yapılandırmasını ve girdi tanımlarını hızlandırır.

3

HTML ve SCSS

Temel HTML yapısı ve SCSS değişken, iç içe kural mantığı tema özelleştirmede doğrudan kullanılır.

4

Node.js ve Angular CLI

Node.js, npm ve Angular CLI kurulu, proje oluşturup çalıştırabilen bir geliştirme ortamı gereklidir.

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ı Angular Material'i projeye kurar, temel düzen ve gezinme bileşenlerini yerleştirir, form alanlarını ve girdi denetimlerini kullanarak tutarlı bir arayüz iskeleti oluşturur.

Modül 1

Material Kurulumu ve Yapılandırma

ng add ile Angular Material paketini kurma
Hazır tema ve tipografi seçeneğini ayarlama
BrowserAnimationsModule ve animasyon desteği
Material Symbols ikon setini projeye bağlama
Standalone bileşenle Material modül içe aktarımı
Material şema ve sürüm uyumluluğunu kontrol etme

Modül 2

Düzen ve Gezinme Bileşenleri

Toolbar ile üst çubuk ve başlık yerleşimi
Sidenav ile açılır yan menü kurulumu
mat-card ile içerik kartı düzenleme
mat-tabs ile sekmeli içerik gösterimi
mat-menu ile açılır eylem menüsü
Grid list ile duyarlı ızgara yerleşimi

Modül 3

Form Alanları ve Girdi Denetimleri

mat-form-field ile etiket ve ipucu yapısı
matInput ile metin ve sayı girdisi alma
mat-select ile açılır seçim listesi
mat-checkbox, mat-radio ve slide toggle
mat-datepicker ile tarih seçimi kurma
mat-error ile doğrulama mesajı gösterimi

Modül 4

Geri Bildirim ve Etkileşim

mat-dialog ile modal pencere açma akışı
MatSnackBar ile anlık bildirim gösterme
mat-tooltip ile açıklama ipucu ekleme
mat-progress-spinner ile yükleniyor durumu
mat-button varyantları ve ripple etkisi
mat-badge ile sayaç ve durum rozeti

Günün hedefiKatılımcı mat-table ile sıralanabilir ve sayfalanabilir tablolar kurar, SCSS tema API'siyle markaya özel renk ve tipografi tanımlar, CDK araçlarını kullanır ve erişilebilirlik desteğini güçlendirir.

Modül 1

mat-table ile Veri Tablosu

MatTableDataSource ile veri kaynağı bağlama
Sütun tanımı ve matColumnDef kullanımı
MatSort ile sütun başlığından sıralama
MatPaginator ile sayfalı veri gösterimi
Filtre alanı ile tablo içinde arama
Satır seçimi ve genişleyen satır detayı

Modül 2

SCSS Tema Sistemi

define-theme ile renk paleti oluşturma
Primary, accent ve warn renk tanımları
Tipografi düzeyi ve yazı tipi ayarlama
Yoğunluk (density) ile bileşen sıkılığı
Karanlık ve açık tema arasında geçiş
Bileşene özel tema karışımını uygulama

Modül 3

Angular CDK Yapı Taşları

Overlay ile konumlanmış katman oluşturma
Portal ile dinamik içerik yerleştirme
cdk-virtual-scroll ile büyük liste gösterimi
DragDrop ile sürükle bırak sıralama
Clipboard ile panoya kopyalama desteği
Layout BreakpointObserver ile duyarlı mantık

Modül 4

Erişilebilirlik (a11y)

ARIA rolleri ve etiketlerinin doğru kullanımı
FocusTrap ile modal içinde odak yönetimi
LiveAnnouncer ile ekran okuyucu bildirimi
Klavye ile gezinme ve odak sırası
Renk kontrastı ve okunabilirlik denetimi
cdk-a11y yardımcılarıyla erişilebilir bileşen

Günün hedefiKatılımcı Angular bileşenini custom element olarak derler, girdi ve olayları dış sayfaya bağlar, Shadow DOM ile stili yalıtır ve bileşeni Angular dışı projelerde kullanmak üzere paketleyip dağıtır.

Modül 1

Angular Elements Temelleri

createCustomElement ile bileşeni dönüştürme
customElements.define ile etikete bağlama
@angular/elements paketini projeye kurma
Standalone bileşeni element olarak hazırlama
Bootstrap akışı ve platform başlatma mantığı
Web bileşeni ile Angular bileşeni farkı

Modül 2

Girdi, Olay ve Stil Köprüsü

@Input özelliklerini HTML niteliğine bağlama
@Output olaylarını CustomEvent ile yayma
Nitelik değişimini bileşene yansıtma
Shadow DOM ile stil yalıtımı sağlama
ViewEncapsulation seçeneklerinin etkisi
Dışarıdan CSS değişkeniyle stil geçişi

Modül 3

Paketleme ve Derleme

Tek dosya bundle için derleme yapılandırması
Polyfill ve çalışma zamanı bağımlılıkları
Üretim derlemesinde boyut küçültme
Birden çok bileşeni tek pakette toplama
Sürümleme ve npm paketi olarak yayınlama
CDN üzerinden script ile dağıtım

Modül 4

Dış Projede Kullanım

Düz HTML sayfasında web bileşeni yerleştirme
React projesinde custom element kullanımı
Vue içinde olay ve veri bağlama yaklaşımı
WordPress veya CMS sayfasına gömme
Birden çok bileşenin aynı sayfada çalışması
Sürüm çakışması ve yalıtım stratejisi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Material kurulumu

Angular Material'i projeye kurar, animasyon ve ikon desteğini yapılandırır, standalone yapıda bileşenleri içe aktarırsınız.

✅

Çekirdek bileşenler

Toolbar, sidenav, kart, sekme, menü ve form alanlarıyla tutarlı ve erişilebilir bir arayüz iskeleti kurarsınız.

✅

Veri tablosu

mat-table ile sıralanabilir, sayfalanabilir ve filtrelenebilir veri tabloları kurar, satır seçimi ve detayını uygularsınız.

✅

Tema sistemi

SCSS tema API'siyle markaya özel renk, tipografi ve yoğunluk tanımlar, açık ve karanlık tema geçişini kurarsınız.

✅

CDK araçları

Overlay, portal, sanal kaydırma ve sürükle bırak gibi CDK yapı taşlarıyla gelişmiş etkileşimler geliştirirsiniz.

✅

Erişilebilirlik

ARIA, odak yönetimi ve ekran okuyucu bildirimleriyle erişilebilirlik ilkelerine uygun bileşenler üretirsiniz.

✅

Web bileşeni üretimi

Angular Elements ile bileşenleri custom element olarak derler, girdi ve olayları dış sayfalara güvenle bağlarsınız.

✅

Paketleme ve dağıtım

Bileşenleri tek pakette toplar, üretim için derler ve Angular dışı projelerde kullanmak üzere dağıtırsınız.

Kimler İçin Uygundur?

Angular temellerine hakim olup kurumsal arayüzlerde tutarlı bir tasarım sistemi kurmak isteyen geliştiriciler
Material bileşenlerini markaya uyarlayan ekipler
bileşenleri Angular dışına taşımak isteyen yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Angular temellerine hakim olup kurumsal arayüzlerde tutarlı bir tasarım sistemi kurmak isteyen geliştiriciler, Material bileşenlerini markaya uyarlamak isteyen ekipler ve ürettiği bileşenleri Angular dışı sayfalara taşımak isteyen yazılımcılar için uygundur. Angular temelleri eğitim içinde kısaca hatırlatılır.

Angular Material ile Angular Elements farkı nedir?

Angular Material, Material Design ilkelerine uygun hazır arayüz bileşenlerinin kütüphanesidir; buton, tablo ve form alanı gibi öğeler sunar. Angular Elements ise bir Angular bileşenini standart web bileşenine çeviren araçtır. Eğitim önce Material ile arayüz kurmayı, sonra o bileşenleri Elements ile taşınabilir hale getirmeyi öğretir.

Material teması markamıza göre özelleştirilebilir mi?

Evet. Eğitim SCSS tema API'sini kullanarak primary, accent ve warn renklerini, tipografi düzeylerini ve bileşen yoğunluğunu kurumsal kimliğinize göre ayarlamayı kapsar. Açık ve karanlık tema geçişi, bileşene özel tema karışımı ve tasarım token mantığı uygulamalı olarak işlenir.

Ürettiğim bileşenleri React veya düz HTML'de kullanabilir miyim?

Evet. Angular Elements ile derlenen custom element, standart bir web bileşeni olduğu için React, Vue, WordPress veya düz HTML sayfalarında kullanılabilir. Eğitim girdi ve olayların dış sayfaya nasıl bağlanacağını, Shadow DOM ile stil yalıtımını ve paketleyip dağıtma adımlarını örneklerle gösterir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve üç gün boyunca geliştirilen örnek yönetim panelini belgeler; eğitim yüz yüze veya online verilebilir ve kurumsal gruplara özel olarak uyarlanabilir.

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

ANGULAR DEVELOPMENT: MATERIAL & ELEMENTS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Material Kurulumu ve Yapılandırma

Düzen ve Gezinme Bileşenleri

Form Alanları ve Girdi Denetimleri

Geri Bildirim ve Etkileşim

mat-table ile Veri Tablosu

SCSS Tema Sistemi

Angular CDK Yapı Taşları

Erişilebilirlik (a11y)

Angular Elements Temelleri

Girdi, Olay ve Stil Köprüsü

Paketleme ve Derleme

Dış Projede Kullanım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Angular Architectures for Enterprise Application Eğitimi

Angular Eğitimi

Angular Giriş Eğitimi

Angular ve Firebase ile Web Uygulamaları Eğitimi

Angular ve RxJS ile Reaktif Programlama Eğitimi

Angular ve Web API ile Full-Stack Applications Bootcamp Eğitimi