Angular’a Hızlı Başlangıç: Kurulumdan İlk Uygulamaya (Adım Adım)

1) Node.js Kurulumu

Angular geliştirme araçları Node.js üzerinde çalışır. Bu nedenle ilk adım Node.js kurmaktır. Kurulumdan sonra terminal/komut satırında sürüm kontrolü yap:

node -v
npm -v

İpucu: Kurulumdan sonra komutların çalışması için yeni bir terminal açman gerekebilir.

2) Editör Seçimi

Angular geliştirmeyi farklı editörlerle yapabilirsin ancak proje dosyaları çok olacağı için, dosyaları filtreleme ve hızlı arama özellikleri güçlü bir editör işini kolaylaştırır. Popüler seçeneklerin başında Visual Studio Code gelir.

3) Angular CLI Kurulumu

Angular CLI, proje oluşturma, geliştirme sunucusunu çalıştırma ve build alma gibi işleri komutla yönetmeni sağlar. Global kurulum için:

npm install --global @angular/cli

Linux/macOS’ta yetki sorunu yaşarsan sudo gerekebilir.

4) İlk Angular Projesini Oluşturma

Yeni bir proje oluşturmak için komut satırında uygun bir klasöre gidip aşağıdaki komutu çalıştır:

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

Bu komut ne yapar?

• ng new: Yeni Angular projesi üretir
• --routing false: Routing eklemez (başlangıç için sade)
• --style css: CSS kullanır
• --skip-git: Git init yapmaz
• --skip-tests: Test dosyalarını oluşturmaz

5) Projeyi Çalıştırma (ng serve)

Proje klasörüne girip geliştirme sunucusunu başlat:

cd todo
ng serve

Ardından tarayıcıda genellikle şu adrese giderek uygulamayı görürsün: http://localhost:4200

6) Angular Mantığı: Component + Template + Veri Bağlama

Angular’da ekranda gördüğün her şeyin arkasında iki temel parça vardır: Component (mantık/veri) ve Template (HTML görünüm).

Template’te veri gösterme (Interpolation)

Template içinde {{ ... }} kullanımıyla component’teki bir değeri ekrana basarsın:

<h3>{{ username }}</h3>

Basit bir “To-Do” mantığı

Öğrenmeyi kolaylaştırmak için genelde küçük bir “to-do list” örneğiyle başlanır: Listeyi göster, tamamlandı işaretle, yeni madde ekle… Angular’ın temel veri akışı bu örnekle netleşir.

İki yönlü veri bağlama (Two-way binding)

Form elemanlarında hem görüntüleme hem güncelleme için iki yönlü bağlama kullanılır. Bu yaklaşım sayesinde model değiştiğinde arayüz otomatik güncellenir.

Sık Sorulan Sorular

Angular için hangi Node.js sürümü gerekli?

Angular sürümüne göre değişebilir. Projende kullandığın Angular sürümünün dokümantasyonundaki önerilen Node.js aralığına bak.

ng serve ile prod ortam aynı mı?

Hayır. ng serve geliştirme içindir. Prod için genelde ng build ve uygun deploy adımları kullanılır.