Angular Kurulum Rehberi (Node.js + CLI + İlk Proje)

Angular öğrenmeye başlamak ilk etapta karmaşık görünebilir. Ancak doğru kurulum ve temel mimariyi anladığınızda, kısa sürede ölçeklenebilir ve profesyonel web uygulamaları geliştirebilirsiniz. Bu rehberde Angular nedir, Angular kurulumu, Angular CLI kullanımı ve modern UI kütüphaneleri detaylı şekilde ele alınmaktadır.

Angular Nedir?

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

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

Angular Geliştirme Ortamı Kurulumu

1️⃣ Node.js Kurulumu

Angular, Node.js üzerinde çalışır. LTS sürümü önerilir.

node -v
npm -v

2️⃣ Angular CLI Kurulumu

Angular CLI, proje oluşturma ve yönetim sürecini otomatikleştirir.

npm install -g @angular/cli
ng version

3️⃣ İlk Angular Projesi Oluşturma

ng new todo-app
cd todo-app
ng serve

Tarayıcıdan: http://localhost:4200

Angular Proje Yapısı

Angular projelerinde en önemli klasör:

src/app

• Component dosyaları (.ts)
• HTML Template
• CSS/SCSS dosyaları
• Service yapıları

Angular Data Binding Nedir?

{{ title }}

Angular’da data binding, component ile template arasında veri akışını sağlar.

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

Angular ile Modern UI Kütüphaneleri

1️ Angular Material

Angular’ın resmi UI kütüphanesidir. Google Material Design prensiplerini uygular.

ng add @angular/material

2 PrimeNG

PrimeNG, zengin ve profesyonel enterprise bileşenleri sunar. DataTable, grafikler, form bileşenleri gibi gelişmiş yapılar içerir.

3 ng-bootstrap

Bootstrap bileşenlerini Angular ile native uyumlu kullanmanızı sağlar. jQuery gerektirmez.

Angular SEO ve Performans İpuçları

• Angular Universal ile SSR kullanın
• Lazy loading ile modül bazlı yükleme yapın
• Meta tag’leri dinamik yönetin
• Sitemap.xml oluşturun

• DOM Nedir? Angular DOM Rehberi
• Angular Proje Yapısı ve Modüller
• En Verimli Angular Editörleri

Sık Sorulan Sorular

Angular öğrenmek zor mu?

Başlangıçta öğrenme eğrisi vardır ancak mimari oturduğunda oldukça sistematik ilerler.

Angular mı React mı?

Büyük kurumsal projelerde Angular daha yapılandırılmıştır. Daha esnek projelerde React tercih edilir.

Angular Material mı PrimeNG mi?

Material daha sade ve resmi bir tasarım sunarken, PrimeNG daha zengin enterprise bileşenler sunar.

Sonuç

Bu yazıda Angular nedir, Angular kurulumu, Angular CLI kullanımı ve Angular Material, PrimeNG, ng-bootstrap gibi modern UI kütüphanelerini detaylı şekilde ele aldık.

Angular öğrenirken en önemli şey: küçük projeler yaparak pratik yapmak.