Angular'a giriş

8. hatta bir web uygulamasının her parçasını elle yazdın: DOM'u querySelector ile bulup güncelledin, durumu değişkenlerde tutup ekranla senkron tutmaya çalıştın, 20. derste bunun büyüyünce nasıl karmaşıklaştığını gördün. 9. hatta ise TypeScript'i öğrendin. Angular ikisinin üstüne kurulur: durum değişince ekranı güncelleme işini senden devralan, TypeScript'le yazılan, pilleri dahil bir çerçevedir. Bu ders çerçevenin ne olduğunu, araç zincirini ve bir Angular projesinin anatomisini verir.

01Ne öğreneceksin

02SPA: sayfa değil uygulama

Şimdiye dek yaptığın siteler çok sayfalıydı (MPA): her bağlantı tıklamasında tarayıcı sunucudan yeni bir HTML belgesi ister, sayfa beyazlanır, her şey yeniden kurulur. Tek sayfa uygulamasında (SPA — single-page application) sunucudan bir kez HTML + JavaScript inersin; sonrası uygulamanın işidir: bağlantıya tıklayınca JavaScript adres çubuğunu günceller, sunucudan yalnız veri (JSON) çeker ve DOM'un ilgili bölümünü değiştirir. 8. hattın 17. dersinde fetch ile tam da bunu elle yapmıştın — SPA, o kalıbın uygulamanın tamamına genellenmesidir.

Karar ölçütü içeriğin mi etkileşimin mi baskın olduğudur. İlanlardaki iş — kurum içi başvuru/kayıt ekranları, yönetim panelleri — SPA'nın tam evidir: oturum boyunca açık kalan, form ve tablo yoğun, sunucuyla sürekli veri alışverişi yapan uygulamalar. Angular da zaten bu sınıf uygulama için tasarlanmıştır.

03Çerçeve nedir, Angular hangi boşluğu doldurur

8. hattın 20. dersindeki yeterlilik görevini hatırla: durum değişkenleri, onları DOM'a yansıtan ciz() fonksiyonları, olay dinleyicileri, elle senkron. Uygulama büyüdükçe iki dert büyür: "durum değişti, ekranın neresi eskidi?" sorusunun cevabı zorlaşır ve DOM güncelleme kodu iş mantığını boğar. Çerçevenin sattığı şey tam budur:

• Sen durumu değiştirirsin, ekranı çerçeve günceller. Şablonda "bu liste şu diziden çizilir" dersin; dizi değişince DOM'a dokunmazsın — çerçeve farkı bulur ve yalnız değişen düğümleri günceller.
• Uygulama, bileşen ağacından kurulur. Her parça (başvuru listesi, filtre çubuğu, detay paneli) kendi şablonu + durumu + davranışıyla bir bileşendir; sayfa bunların birleşimidir.

Kütüphane / çerçeve ayrımı ölçek meselesidir: kütüphaneyi sen çağırırsın (8. hatta fetch'i çağırdığın gibi), çerçeve seni çağırır — akışın sahibi odur, senin kodun onun belirlediği noktalara (bileşen sınıfları, yaşam döngüsü kancaları) yerleşir. React bir kütüphane çekirdeğidir; yönlendirme, form, HTTP için ekosistemden parça seçersin. Angular ise çerçevedir: yönlendirici, form altyapısı, HTTP istemcisi, test araçları tek pakette, tek sürümle gelir — "piller dahil" denir. İki yaklaşımı da öğreneceksin (11. hat React); ilanlar "en az biri" dediği için ikisini de tanımak mülakatta elini güçlendirir.

Sürüm politikası kurumsal ortamda sorulur: Angular her ~6 ayda bir major sürüm çıkarır (17, 18, 19…), her major'a 18 ay destek verir ve ng update aracı kodu yeni sürüme otomatik dönüştürme betikleri (schematics) çalıştırır. "Sürüm atlamak proje yeniden yazdırır" korkusu AngularJS (1.x, 2016 öncesi, apayrı ve ölü bir çatı) döneminden kalmadır — adı benzediği için karıştırılır, mülakatta ayrımı bilmek beklenir.

04CLI: 8. hattaki zincirin hazır hâli

8. hattın 18. dersinde modern frontend zincirini görmüştün: npm paketleri, paketleyici, geliştirme sunucusu, üretim derlemesi. Angular CLI bu zinciri senin yerine kurar ve tek komut arayüzünün arkasına koyar. Node.js + npm kuruluyken:

npm install -g @angular/cli   # ng komutunu kurar
ng new basvuru-paneli         # proje iskeleti + git + npm install
cd basvuru-paneli
ng serve                      # geliştirme sunucusu: http://localhost:4200

ng serve çalışırken bir dosyayı kaydettiğin anda tarayıcı kendiliğinden güncellenir (canlı yenileme); TypeScript derlemesi ve paketleme arka planda sürer. Sık kullanacağın komutlar:

Perde arkası: güncel CLI, paketlemede esbuild/Vite tabanlı builder kullanır — 8. derste okuduğun araçların ta kendisi. CLI'ın değeri zinciri gizlemesi değil, standartlaştırmasıdır: her Angular projesi aynı komutlarla açılır, derlenir, test edilir; ekipten ekibe geçince yeniden öğrenme maliyeti yoktur. Bu sitenin "framework yok" kuralı site için geçerli — Angular pratiğini kendi makinende ya da alıştırmadaki gibi tarayıcı içi ortamda yapacaksın.

05Proje anatomisi: hangi dosya ne işe yarar

basvuru-paneli/
├── angular.json          # CLI yapılandırması: builder, bütçeler, stil dosyaları
├── package.json          # bağımlılıklar + npm betikleri (8. hat 18. ders)
├── tsconfig.json         # 9. hat 8. dersteki dosyanın Angular strict şablonu
└── src/
    ├── index.html        # tek HTML — gövdesinde yalnız <app-root></app-root>
    ├── main.ts           # giriş noktası: bootstrapApplication(...)
    ├── styles.css        # uygulama geneli stiller
    └── app/
        ├── app.config.ts # ApplicationConfig: uygulama düzeyi sağlayıcılar
        ├── app.routes.ts # rota tanımları (7. derste)
        ├── app.ts        # kök bileşen (App)
        └── app.html      # kök bileşenin şablonu

Üç dosyayı özellikle tanı:

• tsconfig.json — Angular'ın ürettiği şablon strict: true ile gelir ve strictTemplates ekler: tip denetimi HTML şablonların içine de girer; şablonda olmayan alana erişmek derleme hatasıdır. 9. hatta kurduğun disiplin burada meyvesini verir.
• angular.json — CLI'ın sözleşmesi: hangi builder, hangi stil dosyaları, üretim bütçeleri (aşağıda). Elle az dokunulur ama okuyabilmen gerekir.
• main.ts — uygulamanın gerçek başlangıcı:

import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { App } from "./app/app";

bootstrapApplication(App, appConfig);
// "App bileşenini index.html'deki <app-root>'a yerleştir,
//  appConfig'teki sağlayıcılarla (router, http…) başlat"

app.config.ts ise uygulama düzeyi hizmetlerin kaydıdır — 4. derste (servisler ve DI) bu dosyanın ne anlama geldiğini derinlemesine göreceksin:

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};

06Standalone bileşen: modern yapı taşı

9. hattın 7. dersinde dekoratörü "sınıfı üst veriyle çerçeveye kaydeden fonksiyon" diye tanımlamıştık. İşte gerçek kullanımı — bir Angular bileşeni:

import { Component } from "@angular/core";

@Component({
  selector: "app-merhaba",             // şablonlarda <app-merhaba> etiketi
  template: `<h1>Merhaba {{ ad }}</h1>`, // görünüm — Angular sözdizimli HTML
  imports: [],                          // bu şablonun kullandığı diğer bileşenler/pipe'lar
})
export class Merhaba {
  ad = "aday";                          // durum — şablon buna doğrudan erişir
}

Üç parçayı ayır: sınıf durum ve davranışı tutar (sıradan TypeScript), şablon görünümü tanımlar (2. ve 3. derslerin konusu), dekoratör üst verisi ikisini birbirine ve çerçeveye bağlar. imports dizisi bileşenin şablonda kullandığı yapı taşlarını açıkça bildirir — bileşen böylece kendine yeterli, tek başına (standalone) bir birimdir: nerede kullanılacaksa oraya import edilir, başka hiçbir kayda ihtiyacı yoktur.

Eski dünya — okuman gereken yazım: Angular yıllarca bileşenleri NgModule adlı kayıt sınıflarında topladı; sahadaki kodun büyük bölümü hâlâ böyledir. Yeni projelerde standalone varsayılandır ve NgModule'e ihtiyaç yoktur, ama tabloyu tanımadan eski koda giremezsin:

07Derleme: şablon koda çevrilir

Angular şablonu tarayıcının okuduğu bir şey değildir — derleme anında (AOT — ahead-of-time) her şablon, DOM'u kuran ve güncelleyen JavaScript talimatlarına çevrilir. Bundan üç pratik sonuç çıkar:

• Şablon hataları derlemede yakalanır. {{ addd }} yazarsan sayfa bozuk açılmaz; ng build "Property 'addd' does not exist" der — strictTemplates'in işi. Elle DOM dünyasında bu hata ancak çalışma anında, o satır koşunca görünürdü.
• Üretim çıktısı optimize edilir: kullanılmayan kod atılır (tree-shaking), dosya adlarına içerik hash'i eklenir (main-K5J2.js) — 8. hattaki önbellek sorunu böyle çözülür; sen ?v=N damgasını elle artırıyordun, burada zincir otomatik yapar.
• Bütçeler: angular.json'da "ilk paket 500 kB'ı aşarsa uyar, 1 MB'ı aşarsa derlemeyi kır" gibi sınırlar tanımlıdır. Paket boyutu SPA'nın ilk açılış maliyeti olduğundan bu, performansın derleme kapısında denetlenmesidir — üretim ekiplerinin gerçek pratiği.

"Durum değişince ekran nasıl güncelleniyor?" sorusunun makine dairesi — değişiklik algılama, zone.js, signals — bu hattın 9. dersinin konusu; şimdilik sözleşme yeter: sınıftaki alanı değiştir, gerisi Angular'ın işi.

08Üretim pratiği: çıktı ve dağıtım

ng build
# dist/basvuru-paneli/browser/
#   index.html          → script etiketleri hash'li dosyalara işaret eder
#   main-K5J2W9QX.js    → uygulaman (küçültülmüş)
#   polyfills-B6T4.js, styles-A1C8.css …

Çıktı statik dosyalardır — Node sunucusu gerekmez; herhangi bir web sunucusu (nginx, IIS, statik barındırma) servis eder. Tek kural: SPA yönlendirmesi için bilinmeyen her yol index.html'e düşmelidir (kullanıcı /basvurular/5 adresini doğrudan açarsa sunucu o dosyayı aramamalı, uygulamayı verip rotayı Angular'a bıraktırmalıdır). Bu ayar unutulursa klasik hata doğar: uygulama içinde gezinirken çalışan sayfa, yenilenince 404 verir. 7. derste (routing) sebebini tam olarak göreceksin; şimdiden ezberle, mülakat ve saha klasiğidir.

Ortamlar arası fark (geliştirmede yerel API, üretimde gerçek API adresi) environment dosyalarıyla yönetilir; 9. hattın 9. dersindeki "ortam değişkeni sınırda doğrulanır" ilkesinin frontend karşılığıdır — tarayıcıda process.env yoktur, değerler derleme anında gömülür. Buradan kritik güvenlik kuralı: frontend paketine giren her şey herkese açıktır — gizli anahtar, parola, imza sırrı frontend koduna asla yazılmaz (13. hatta derinleşecek).

09Mini alıştırma — İlk bileşenini tarayıcıda kur

10Kendini sına

SPA nedir? Çok sayfalı yaklaşımdan farkını ve hangi durumda hangisini seçeceğini anlat.

SPA'da tarayıcı sunucudan HTML + JavaScript'i bir kez indirir; sonrasında gezinme, ekran güncelleme ve durum yönetimi tarayıcıda çalışan uygulamanın işidir — sunucuyla yalnız veri (JSON) alışverişi yapılır. Çok sayfalı sitede her bağlantı yeni bir HTML belgesi ister; sayfa yeniden kurulur, durum her seferinde sıfırlanır. SPA'nın bedeli ilk açılışın daha ağır olması (paket inip çalışmalı) ve SEO/doğrudan bağlantı için ek çözüm gerektirmesidir (SSR); kazancı, oturum boyunca akıcı, durumun bellekte yaşadığı, masaüstü uygulama hissinde bir deneyimdir. Seçim içerik/etkileşim oranına göre yapılır: blog ve tanıtım sitesi gibi içerik baskın işlerde MPA doğaldır; panel, form yoğun iç uygulama, canlı veri ekranı gibi etkileşim baskın işlerde SPA doğru araçtır. Angular bu ikinci sınıf için tasarlanmış bir çerçevedir.

Çerçeve ile kütüphane arasındaki fark nedir? Angular'ı React'ten ayıran yaklaşım farkını anlat.

Kütüphaneyi kodun çağırır: akışın sahibi sensin, kütüphane araç kutusudur. Çerçeve ise akışın sahibidir ve senin kodunu o çağırır: bileşen sınıfların, yaşam döngüsü kancaların çerçevenin belirlediği noktalara yerleşir (tersine çevrilmiş denetim). Angular tam bir çerçevedir ve "piller dahil" gelir: yönlendirici, form altyapısı, HTTP istemcisi, test araçları tek pakette ve uyumlu sürümlerle sunulur; ayrıca TypeScript zorunludur ve şablonlar HTML dosyalarında Angular sözdizimiyle yazılır. React ise çekirdeği UI kütüphanesi olan bir yaklaşımdır: yönlendirme, veri çekme, form için ekosistemden parça seçersin; şablon yerine JSX, sınıf yerine fonksiyon + hook kullanılır. Pratik sonuç: Angular büyük ekiplerde tutarlılığı standartla sağlar (her proje aynı yapıdadır), React esneklik ve ekosistem genişliği sunar ama mimari kararlar ekibe kalır. İlan "üçünden en az biri" dediği için ikisinin de temel modelini bilmek gerekir.

Standalone bileşen nedir? NgModule dünyasından farkını ve neden NgModule'ü hâlâ okuman gerektiğini açıkla.

Standalone bileşen, şablonunda kullandığı diğer bileşen, yönerge ve pipe'ları kendi imports dizisinde açıkça bildiren, başka hiçbir kayda ihtiyaç duymayan bileşendir — modern Angular'da varsayılan budur ve uygulama bootstrapApplication(App, appConfig) ile başlar. NgModule dünyasında ise bileşenler tek tek değil, modül adlı kayıt sınıflarında toplanırdı: bileşen modülün declarations'ına yazılır, kullanacağı şeyler modülün imports'una gelir, uygulama bootstrapModule(AppModule) ile açılırdı. Standalone bunu bileşen düzeyine indirger: bağımlılık nerede kullanılıyorsa orada görünür, dosyayı okuyan kişi modül zinciri sürmeden bileşenin neye dayandığını görür ve tree-shaking netleşir. NgModule'ü yine de okuman gerekir çünkü sahadaki mevcut kod tabanlarının büyük bölümü ve eski eğitim malzemesi bu yazımladır; "bu bileşen neden şablonda tanınmıyor" sorusunun cevabı eski kodda modül listelerinde aranır. Yeni kodda tercih net: standalone.

Angular CLI ne sağlar? ng serve ile ng build arasındaki farkı ve üretim bütçesini anlat.

CLI, 8. hatta parça parça gördüğün araç zincirini — paket yönetimi, TypeScript derlemesi, paketleyici, geliştirme sunucusu, test koşucusu — hazır kurulmuş ve standartlaştırılmış biçimde sunar: ng new iskeleti kurar, ng generate bileşen/servis şablonu üretir, ng update sürüm yükseltirken kodu dönüştüren betikler çalıştırır. ng serve geliştirme içindir: çıktıyı diske yazmadan bellekten servis eder, dosya kaydedilince tarayıcıyı günceller, hata mesajlarını geliştirici dostu verir. ng build üretim içindir: AOT derleme, küçültme, tree-shaking yapar ve dist/ klasörüne, adlarına içerik hash'i eklenmiş statik dosyalar yazar — hash sayesinde önbellek sorunu yaşanmadan yeni sürüm dağıtılır. Bütçe, angular.json'da tanımlı boyut sınırıdır: ilk paket belirlenen eşiği aşarsa derleme uyarır ya da kırılır. Paket boyutu SPA'nın ilk açılış süresini doğrudan belirlediğinden bütçe, performans disiplinini derleme kapısında zorlar.

11Sınav köşesi