Angular Öğrenmeye Başlamadan Önce: HTML, DOM, CSS ve TypeScript Rehberi

1) Proje Kurulumu ve Geliştirme Ortamının Hazırlanması

Angular öğrenirken en pratik başlangıç, Angular CLI kullanmaktır. Çünkü Angular CLI sadece proje oluşturmaz; aynı zamanda build ayarları, dev server ve yapılandırmayı standart hale getirir.

Angular CLI ile proje oluşturma

ng new Primer --routing false --style css --skip-git --skip-tests

Bu komutla oluşturulan proje, Angular geliştirmeye hızlı başlangıç için idealdir. Daha sonra routing veya test ayarlarını ihtiyaçlarınıza göre ekleyebilirsiniz.

Bootstrap kurulumu (hızlı arayüz için)

npm install bootstrap@5.1.3

Uygulamayı çalıştırma

ng serve --open

Bu komut, Angular dev server’ı başlatır ve uygulamanızı otomatik tarayıcıda açar. Yeni başlayanlar için en hızlı test yöntemidir.

2) HTML Temelleri: Elementler ve Attribute’lar

Angular template yazımı aslında HTML yazmaktır. Bu yüzden HTML’in element mantığını bilmek Angular’ı daha hızlı anlamanızı sağlar.

HTML element yapısı

Bir element çoğunlukla üç parçadan oluşur:

<td>Buy Flowers</td>

Angular’da component template’leri yazarken sürekli bu yapı ile karşılaşacaksınız. En basit bağlamda Angular’ın yaptığı iş, bu HTML yapılarını veri ile doldurmaktır.

Void (self-closing) elementler

Bazı elementler içerik almaz ve kapanış etiketi yoktur:

<input />

Form tarafında Angular projelerinin çoğu input elementleri üzerinden ilerlediği için, “void element” konusu pratikte sıkça karşınıza çıkar.

Attribute (öznitelik) kavramı

Elementlere ekstra bilgi vermek için attribute kullanılır:

<meta charset="utf-8" />

Değer almadan da kullanılabilen attribute’lar vardır:

<input required />

3) Angular’da Literal String Yazma (Tırnak Kuralı)

Angular template’te köşeli parantez [] gördüğünüzde, içeride yazan şey bir JavaScript/TypeScript ifadesi olarak değerlendirilir. Ancak bazen sabit bir metin (literal) vermek istersiniz.

Bu durumda doğru kullanım şudur:

<td [ngSwitch]="'Apples'">

Bu detay özellikle yeni başlayanların en çok takıldığı yerlerden biridir. Bu yüzden blog için de iyi bir SEO konusudur: “Angular literal string binding” gibi aramalardan trafik alabilir.

4) DOM Nedir? Angular DOM’u Nasıl Yönetir?

Tarayıcı HTML’i okuduğunda, onu hiyerarşik bir ağaç yapısına dönüştürür: DOM (Document Object Model).

Angular genelde DOM’a doğrudan müdahale etmenizi istemez. Onun yerine siz veriyi değiştirirsiniz ve Angular bu değişime göre DOM’u günceller.

Kısacası Angular yaklaşımı şudur: Sen veriyi değiştirirsin, Angular arka planda DOM’u günceller. Buna data binding mantığı diyebilirsiniz.

5) CSS ve Bootstrap ile Stil Yönetimi

HTML iskelet, CSS görseldir. Bootstrap gibi framework’ler ise hızlı, tutarlı ve responsive UI üretmenizi sağlar.

Örnek Bootstrap sınıf kullanımı:

<h3 class="bg-primary text-white p-3">Başlık</h3>

• bg-primary: arka plan rengi
• text-white: yazı rengi
• p-3: padding (iç boşluk)

Bootstrap sayesinde çoğu UI işini tek tek CSS yazmadan çözebilirsiniz. Bu da Angular öğrenirken sizi hızlandırır.

6) TypeScript: Angular’ın Motoru

Angular, TypeScript ile yazılır. TypeScript; JavaScript’e statik tip desteği ekleyerek hataları daha erken yakalamanızı sağlar.

Fonksiyonlar ve tip anotasyonu

const add = (a: number, b: number) => a + b;

Union Types (API verisi için hayat kurtarır)

let value: string | number;

Optional Chaining (?.)

user?.name

Nullish Coalescing (??)

title ?? "Varsayılan Başlık"