İlk Angular Uygulamanızı Adım Adım Oluşturun

FrontEndLatest Software Developers 07/12/2025

Angular öğrenmeye başlamak ilk etapta zor görünebilir. Ancak doğru adımlarla ilerlediğinizde kısa sürede ilk Angular uygulamanızı ayağa kaldırabilirsiniz. Bu yazıda Angular nedir, Angular kurulumu, Angular CLI kullanımı ve temel mimari sade bir dille anlatılmaktadır.

Angular Nedir?

Angular, Google tarafından geliştirilen TypeScript tabanlı, component odaklı modern bir web framework’üdür. Büyük ve ölçeklenebilir web uygulamaları geliştirmek için tercih edilir.

Component tabanlı mimari
Güçlü Angular CLI desteği
Two-way data binding
Kurumsal projeler için ideal yapı

Angular Geliştirme Ortamı Nasıl Kurulur?

1. Node.js Kurulumu

Angular, Node.js üzerinde çalışır. Bu nedenle ilk adım Node.js kurulumudur. LTS (Long Term Support) sürümü önerilir.

node -v
npm -v

2. Angular CLI Kurulumu

Angular CLI, proje oluşturma ve geliştirme sürecini büyük ölçüde kolaylaştırır.

npm install -g @angular/cli

Kurulumu kontrol etmek için:

ng version

3. Kod Editörü

Angular geliştirme için en çok tercih edilen editör: Visual Studio Code.

İlk Angular Projesi Nasıl Oluşturulur?

Angular CLI ile ilk projemizi oluşturalım:

ng new todo-app

Proje oluşturulduktan sonra:

cd todo-app
ng serve

Tarayıcıdan aşağıdaki adrese gidin:

http://localhost:4200

🎉 Angular uygulamanız artık çalışıyor.

Angular Proje Yapısı

Angular projelerinde en sık kullanılan klasör:

src/app

Bu klasör içinde:

Component dosyaları
HTML template
CSS dosyaları
TypeScript kodları

Angular’ın temel yapı taşları: Component, Template ve Data Model.

Angular Component Mantığı

Angular uygulamaları component’lardan oluşur. Bir component, hem görünümü hem de iş mantığını yönetir.

<h3>{{ title }}</h3>

Bu yapı Angular’ın data binding mekanizmasını kullanır.

Angular’da Data Binding Nedir?

Data binding, component ile HTML arasında veri alışverişini sağlar.

One-way binding: {{ value }}
Two-way binding: [(ngModel)]

Bu sayede kullanıcı arayüzü otomatik olarak güncellenir.

Angular ile Basit Bir To-Do Uygulaması Mantığı

Angular öğrenirken en iyi yöntem küçük uygulamalar geliştirmektir. Basit bir To-Do uygulamasında:

Liste görüntülenir
Yeni görev eklenir
Görev tamamlanır

Bu süreçte component, template ve model birlikte çalışır.

Angular Material ile Modern Arayüzler

Angular Material, Angular için resmi UI component kütüphanesidir.

ng add @angular/material

Hazır butonlar, tablolar ve input bileşenleri ile modern arayüzler oluşturabilirsiniz.

Sık Sorulan Sorular

Angular öğrenmek zor mu?

Başlangıçta öğrenme eğrisi vardır, ancak mantığı oturduğunda oldukça güçlüdür.

Angular mı React mı?

Büyük ve kurumsal projelerde Angular, daha esnek yapılarda React tercih edilir.

Sonuç

Bu yazıda Angular’a hızlı başlangıç, ilk Angular projesi ve temel mimariyi ele aldık. Angular öğrenirken en önemli şey bol bol pratik yapmaktır.

Bir sonraki adımda routing, service yapısı ve Angular SEO konularına geçebilirsiniz.