Angular Temel Kavramlar Eğitimi

Eğitim Hakkında

Bileşen ve veri bağlamadan servis, yönlendirme ve formlara Angular temellerini kuran giriş eğitimi

Angular Temel Kavramlar Eğitimi, web geliştirmeye aşina olanlara Angular çatısının temel yapı taşlarını sıfırdan ve sağlam biçimde öğretir. Katılımcılar bileşen yapısını, template sözdizimini, veri bağlama türlerini, yerleşik direktifleri, bağımlılık enjeksiyonu ile servisleri, HttpClient ile veri çekmeyi, yönlendirmeyi ve temel form işlemlerini öğrenir. Eğitim, öğrenilen kavramların bir araya geldiği küçük bir uygulama geliştirmeyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; küçük bir görev listesi uygulaması bileşenlerden servislere, yönlendirmeden formlara doğru adım adım kurulur.

Seviye

Temel Seviye — Web geliştirmeye aşina olanlara Angular'ın bileşen, bağlama ve servis temellerini öğretir

Öğrenme Metodu

Küçük bir uygulama baştan geliştirilir; her modülde yeni bir Angular kavramı canlı olarak örnek proje üzerinde uygulanır.

Neden Bu Eğitim?

🎯Sağlam temel

Bileşen, bağlama ve servis gibi çekirdek kavramları doğru öğrenerek ileri konulara geçebileceğiniz güçlü bir zemin kurarsınız.

🧩Bileşen düşüncesi

Arayüzü yeniden kullanılabilir bileşenlere ayırmayı öğrenir, karmaşık sayfaları küçük ve yönetilebilir parçalara bölersiniz.

🚀Hızlı başlangıç

Angular CLI ve hazır araçlarla proje kurup çalıştırarak kısa sürede ilk çalışan uygulamanızı üretirsiniz.

Anahtar Konular

angular eğitimiangular temelleri kursuangular başlangıç eğitimiangular bileşen eğitimiangular veri bağlamaangular servis ve diangular yönlendirmeangular form eğitimiön yüz geliştirme eğitimiangular öğrenme

“Sağlam bir temel, ileri Angular yolculuğunun anahtarıdır; bu eğitim çekirdek kavramları doğru ve uygulamalı biçimde kazandırır.”

Ön Koşullar

Eğitime başlamadan önce faydalı olacak bilgi ve geliştirme ortamı

1

HTML ve CSS

Temel HTML etiketleri ve CSS ile düzen kurma bilgisi template'leri anlamayı kolaylaştırır.

2

JavaScript temeli

Değişken, fonksiyon, dizi ve nesne gibi temel JavaScript kavramlarına aşinalık gereklidir.

3

Node.js ortamı

Node.js ve npm kurulu, Angular CLI ile proje oluşturabilen bir geliştirme ortamı yeterlidir.

4

Kod düzenleyici

VS Code gibi bir kod düzenleyici ve temel terminal kullanımı eğitimi takip etmeyi sağlar.

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 CLI ile proje kurar, bileşen yapısını ve template sözdizimini kavrar, dört veri bağlama türünü uygular ve basit etkileşimli bir arayüz oluşturmayı öğrenir.

Modül 1

Angular ve Proje Kurulumu

Angular CLI ile yeni proje oluşturma
Proje klasör yapısını yakından tanıma
ng serve ile uygulamayı çalıştırma
main.ts ve uygulama başlangıç akışı
Standalone bileşen ve bootstrap mantığı
Angular sürümü ve araç zinciri tanıtımı

Modül 2

Bileşen Anatomisi

@Component dekoratörü ve meta verisi
selector ile bileşeni sayfaya yerleştirme
template ve templateUrl ayrımı
Bileşen sınıfı ve özellik tanımlama
styleUrls ile bileşene özel stil
Bileşen yaşam döngüsüne kısa giriş

Modül 3

Template Sözdizimi

Süslü parantez ile ara değer gösterimi
Metin ve ifade yazımı kuralları
Yeni kontrol akışı @if ile koşul
@for ile liste üzerinde döngü kurma
@switch ile çoklu durum gösterimi
Güvenli gezinme operatörü kullanımı

Modül 4

Veri Bağlama Türleri

Özellik bağlama ile öğe değerini ayarlama
Olay bağlama ile kullanıcı etkileşimi
İki yönlü bağlama ve ngModel kullanımı
Sınıf ve stil bağlama ile görünüm değişimi
@Input ile ebeveynden veri alma
@Output ile çocuktan olay yayma

Günün hedefiKatılımcı yerleşik direktifleri ve pipe'ları kullanır, servis oluşturup bağımlılık enjeksiyonuyla bileşene bağlar ve HttpClient ile bir API'den veri çekmeyi öğrenir.

Modül 1

Yerleşik Direktifler

ngClass ile koşullu sınıf uygulama
ngStyle ile dinamik stil verme
Nitelik ve yapısal direktif ayrımı
Yeni akış sözdizimiyle eski direktif farkı
ng-container ile sarmalayıcısız gruplama
Direktifin DOM üzerindeki etkisi

Modül 2

Pipe'lar ile Veri Dönüştürme

date pipe ile tarih biçimlendirme
currency ve number ile sayı gösterimi
uppercase, lowercase ve titlecase
json pipe ile ayıklama ve inceleme
Pipe zincirleme ve parametre verme
Basit özel pipe yazımına giriş

Modül 3

Servisler ve Bağımlılık Enjeksiyonu

Servisin amacı ve iş mantığını ayırma
@Injectable ile servis tanımlama
providedIn root ile tekil örnek sağlama
inject ile servisi bileşene dahil etme
Servis ile bileşenler arası veri paylaşımı
Sorumlulukların servise taşınması

Modül 4

HttpClient ile Veri Çekme

provideHttpClient ile istemci kurulumu
get ile sunucudan veri okuma akışı
post, put ve delete ile veri gönderme
Observable sonucuna abone olma
async pipe ile veriyi template'e bağlama
Basit hata durumu yönetimi ve mesaj

Günün hedefiKatılımcı Router ile sayfalar arası geçiş kurar, parametre aktarır, template tabanlı formlarla kullanıcı girdisi alır ve öğrendiği kavramları birleştirerek küçük bir uygulamayı tamamlar.

Modül 1

Yönlendirme Temelleri

provideRouter ile rota tanımlama
routerLink ile sayfalar arası geçiş
router-outlet ile içerik yerleştirme
Rota parametresiyle detay sayfası açma
ActivatedRoute ile parametre okuma
Bulunamayan sayfa ve yönlendirme rotası

Modül 2

Template Tabanlı Formlar

FormsModule ile form desteği ekleme
ngModel ile alan değerini bağlama
name niteliği ile form alanı kaydı
required ve minlength ile doğrulama
Geçerlilik durumuna göre mesaj gösterme
Form gönderimi ve ngSubmit kullanımı

Modül 3

Bileşen İletişimi

Ebeveynden çocuğa @Input ile veri verme
Çocuktan ebeveyne @Output ile olay
Şablon referans değişkeni kullanımı
Servis üzerinden paylaşımlı durum
Bileşenleri anlamlı parçalara bölme
Veri akışı yönünü doğru biçimde kurma

Modül 4

Küçük Uygulama Geliştirme

Görev listesi uygulamasını planlama
Bileşen, servis ve rota yapısını kurma
Listeleme, ekleme ve silme akışı
Formla yeni kayıt oluşturma akışı
Servisten veriyi çekip gösterme
Uygulamayı derleyip çıktı alma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Proje kurulumu

Angular CLI ile proje oluşturur, klasör yapısını tanır ve standalone bootstrap akışını kavrayarak çalışan bir uygulama kurarsınız.

✅

Bileşen yapısı

Bileşen anatomisini, selector ve template kavramlarını öğrenir, arayüzü yeniden kullanılabilir bileşenlere ayırırsınız.

✅

Veri bağlama

Özellik, olay, iki yönlü ve sınıf bağlamayı uygular, @Input ve @Output ile bileşenler arası veri akışını kurarsınız.

✅

Direktif ve pipe

Yerleşik direktifler ve pipe'larla görünümü koşullandırır, listeler ve veriyi uygun biçimde dönüştürüp gösterirsiniz.

✅

Servis ve DI

Servis oluşturur, bağımlılık enjeksiyonuyla bileşene bağlar ve iş mantığını bileşenden ayırarak düzenli kod yazarsınız.

✅

Veri çekme

HttpClient ile bir API'den veri okur, gönderir ve async pipe ile sonucu template'e güvenle bağlarsınız.

✅

Yönlendirme

Router ile sayfalar arası geçiş kurar, parametre aktarır ve çok sayfalı bir uygulama yapısı oluşturursunuz.

✅

Form ve uygulama

Template tabanlı formlarla girdi alıp doğrular ve öğrendiğiniz kavramları küçük bir uygulamada birleştirirsiniz.

Kimler İçin Uygundur?

HTML
CSS ve temel JavaScript bilen
modern bir ön yüz çatısına geçmek isteyen geliştiriciler
Angular'a yeni başlayan yazılımcılar
kurumsal projelerde Angular öğrenmesi gereken ekip üyeleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML, CSS ve temel JavaScript bilen, modern bir ön yüz çatısına geçmek isteyen geliştiriciler, Angular'a yeni başlayan yazılımcılar ve kurumsal projelerde Angular öğrenmesi gereken ekip üyeleri için uygundur. Angular tecrübesi gerekmez; çatı sıfırdan ve adım adım tanıtılır.

Eğitime başlamak için neler bilmem gerekir?

Temel HTML ve CSS ile düzen kurabilmek, değişken, fonksiyon, dizi ve nesne gibi temel JavaScript kavramlarına aşina olmak yeterlidir. Node.js, npm ve Angular CLI kurulu bir ortam ve VS Code gibi bir kod düzenleyici gereklidir. TypeScript detayları eğitim içinde gerektiği kadar tanıtılır.

Bu eğitim güncel Angular sürümünü mü anlatıyor?

Evet. Eğitim standalone bileşenler, yeni kontrol akışı sözdizimi (@if, @for, @switch), inject fonksiyonu ve provideHttpClient gibi güncel Angular yaklaşımlarını temel alır. Böylece eski NgModule tabanlı kalıplar yerine bugünkü önerilen pratiklerle öğrenmeye başlarsınız.

Eğitim sonunda kendi uygulamamı yapabilir miyim?

Evet. Üç gün boyunca küçük bir görev listesi uygulaması bileşenlerden servislere, yönlendirmeden formlara doğru adım adım birlikte geliştirilir. Eğitim sonunda bileşen oluşturma, veri bağlama, servisle veri çekme ve yönlendirme kurma gibi temel becerilerle basit bir uygulamayı kendiniz kurabilecek düzeye gelirsiniz.

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 uygulamayı 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 TEMEL KAVRAMLAR EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Angular ve Proje Kurulumu

Bileşen Anatomisi

Template Sözdizimi

Veri Bağlama Türleri

Yerleşik Direktifler

Pipe'lar ile Veri Dönüştürme

Servisler ve Bağımlılık Enjeksiyonu

HttpClient ile Veri Çekme

Yönlendirme Temelleri

Template Tabanlı Formlar

Bileşen İletişimi

Küçük Uygulama Geliştirme

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Angular : Working With Nested Components Eğitimi

Angular and New Features Eğitimi

Angular Architecture Workshop Eğitimi

Angular CLI Eğitimi

Angular Development: Dependency Injection & ng-bootstrap Eğitimi

Angular Development: Libraries Eğitimi