ANGULAR NEDİR?

Veri Akademi7 dk okuma
Üç boyutlu cilalı Angular kalkan amblemi, beyaz A harfi merkezde, Angular kırmızısı tonlarında

Bir geliştirici 2014 yılında yazdığı bir AngularJS uygulamasını 2016'da Angular 2'ye taşımaya çalıştığında acı bir gerçekle karşılaştı: bu iki framework birbirinin yeni versiyonu değildi, neredeyse farklı iki projeydi. Google'ın aldığı bu radikal karar Angular ekosistemine yıllarca süren bir kafa karışıklığı miras bıraktı. Bugün hala "Angular" denildiğinde hangisinden bahsedildiğini netleştirmek gerekiyor. Bu yazı modern Angular'ın ne olduğunu, neden var olduğunu ve hangi durumda doğru tercih olduğunu sıfırdan açıklıyor.

1. AngularJS ile Angular Arasındaki Kopuş

AngularJS (1.x sürümleri) 2010'da Google tarafından duyurulduğunda JavaScript dünyasında öncü bir yaklaşım sundu: iki yönlü veri bağlama, dependency injection ve declarative HTML şablonları. Birkaç yıl içinde popüler oldu, kurumsal yazılım dünyasına girdi. Ancak mobil web yükselişe geçtiğinde temel mimarisinin yavaş kaldığı ortaya çıktı. Digest döngüsü, scope yönetimi ve performans darboğazları aşılamayacak boyutta birikmişti.

Angular ekibi 2016'da radikal bir karar verdi: framework'ü sıfırdan yazmak. Modern Angular (2, 4, 5 ... bugün 17+) TypeScript üzerine kurulu, component tabanlı, RxJS ile reaktif programlama benimsemiş bambaşka bir araçtır. AngularJS koduyla doğrudan uyumlu değildir, geçiş genelde tam rewrite anlamına geldi. Güncel API referansı için framework'ün resmi belgeleri kapsamlı bir başlangıç noktasıdır.

2. Modern Angular'ın Temel Yapı Taşları

Bugünün Angular'ı dört temel kavram üzerine kuruludur:

  • Component: Arayüzün tekrar kullanılabilir, bağımsız parçası. Her bileşen kendi HTML şablonu, CSS stili ve TypeScript sınıfıyla birlikte gelir.
  • Module: İlişkili bileşenleri, servisleri ve direktifleri gruplayan organizasyon birimi. Lazy loading bu birimler üzerinden yapılır.
  • Service: İş mantığı, veri erişimi ve paylaşılan durum için singleton sınıflar. Dependency injection ile bileşenlere enjekte edilir.
  • Routing: URL ile component eşleştirmesini yapan navigasyon katmanı.

Bu yapı taşları birleştiğinde tek sayfa uygulamalar (SPA) için tam donanımlı bir framework oluşur. React'in yaptığı gibi yalnızca view katmanı değil, uçtan uca bir çözüm sunar.

Üç boyutlu component ağacı, bir ebeveyn düğüm ve dört çocuk component'a dallanan eğri hatlar

3. Component Tabanlı Mimari Ne Demek?

Klasik web geliştirmede sayfa tek bir HTML parçasıydı; JavaScript bu parçayı DOM manipülasyonuyla değiştirirdi. Component tabanlı yaklaşım bu modeli tersine çevirir: arayüz, iç içe geçmiş bağımsız bileşenlerin ağacıdır.

Bir e-ticaret sitesinde örneğin AppComponent kökünde HeaderComponent, ProductListComponent ve FooterComponent bulunur. ProductListComponent kendi içinde ProductCardComponent'leri çoğaltır. Her bileşen kendi state'ini, davranışını ve görünümünü kapsüller. Bir parçayı değiştirmek diğerlerini etkilemez. Bu kapsülleme büyük ekiplerde tutarlı kod tabanını mümkün kılan en önemli özelliktir.

4. TypeScript Neden Zorunlu?

Angular, JavaScript yerine TypeScript kullanır. Bu pek çok geliştirici için ilk başta engelleyici görünür; tür sistemi ek bir öğrenme yükü getirir. Ancak büyük ölçekli uygulamalarda TypeScript'in sağladığı erken hata yakalama, otomatik refactoring desteği ve IDE'nin daha akıllı önerileri ciddi avantaj sağlar.

Angular'ın decorator tabanlı yapısı (@Component, @Injectable, @NgModule) zaten TypeScript'in olmadan çalışamayacağı meta-veri sistemi üzerine kurulu. JavaScript-only bir alternatifle Angular kullanmak teknik olarak mümkün değildir.

5. Angular CLI ve Geliştirme Deneyimi

Angular CLI (Command Line Interface), framework'ün en büyük üstünlüklerinden biridir. Yeni bir proje başlatmak, component üretmek, servis eklemek, build almak, test koşmak — hepsi tek komutla yapılır:

  • ng new my-app — yeni proje iskeleti
  • ng generate component user-profile — yeni bileşen
  • ng serve — geliştirme sunucusu (hot reload ile)
  • ng build --configuration=production — optimizasyonlu üretim build'i
  • ng test — Karma ve Jasmine ile birim testler

Bu standardizasyon ekipler arası geçişi kolaylaştırır; her Angular projesi benzer dizin yapısına ve komut setine sahip olur. React ekosistemindeki "her takım kendi build sistemini kuruyor" sorunu burada yaşanmaz.

6. Angular, React ve Vue Karşılaştırması

Üç araç sık karıştırılır ama doğrudan kıyaslamak teknik olarak adil değildir:

  • React: Yalnızca view katmanı. Routing, state management, form yönetimi için ayrı kütüphane (React Router, Redux, Formik) seçilir. Kararı geliştiriciye bırakır, esneklik yüksek.
  • Vue: React'ten daha kapsamlı ama Angular'dan daha hafif. Yumuşak öğrenme eğrisi, küçük-orta ölçekli projelere uygun.
  • Angular: Tam donanımlı framework. Routing, HTTP, form, animation, test araçları hazır gelir. Kararları kendi verir, geliştiriciye daha az seçenek bırakır.

Doğru cevap projenin ölçeğine bağlıdır. Küçük bir landing page için Angular fazla ağırdır; orta-büyük ölçekli kurumsal uygulamada React'in eklenmesi gereken parçaları zaman alır. Pratik karşılaştırmayı uygulamalı projelerle deneyimlemek isteyenler için Angular eğitimi başlangıç noktası olabilir.

7. Angular Ne Zaman Tercih Edilir?

Şu koşullarda Angular doğal seçimdir:

  • Büyük geliştirici ekibi (10+ kişi) tek kod tabanında çalışıyor
  • Uygulamanın yaşam süresi uzun (5+ yıl) bekleniyor
  • Form ağırlıklı kurumsal iç sistem (CRM, ERP, admin paneli) geliştiriliyor
  • Tip güvenliği ve disiplinli mimari sözleşme öncelik
  • RxJS ile reaktif veri akışı projenin doğal ihtiyacı

Buna karşılık küçük ekiple hızlı MVP üretiliyorsa, sayfa ağırlıkla statik içerikse ya da SEO kritikse Next.js + React veya Nuxt + Vue daha hafif başlangıç noktası verebilir.

8. Öğrenmeye Nereden Başlanır?

Angular'a başlamadan önce iki ön bilgi büyük avantaj sağlar: TypeScript temelleri ve RxJS observable mantığı. Bunlar olmadan framework eğrisini tırmanmak hayli zorlaşır. Sonrasında resmi tutorial (Tour of Heroes) tipik başlangıç noktasıdır; küçük ama kapsamlı bir CRUD uygulaması üzerinden tüm temel kavramları sırasıyla gösterir.

Asıl ustalık component composition, change detection, RxJS pipeline ve performans optimizasyonu konularını gerçek proje üzerinde tecrübe ederek gelir. Tutorial bitirip de production uygulamaya geçince fark edilen ayrıntılar, framework'ü gerçekten öğrendiğinin işaretidir.

Sıkça Sorulan Sorular

AngularJS hala kullanılıyor mu?

Google 2022'de AngularJS için resmi long-term support'u sonlandırdı. Yeni projelerde tercih edilmez; mevcut AngularJS uygulamaları ya bakım modunda tutuluyor ya da modern Angular veya başka bir framework'e taşınıyor. Güvenlik güncellemesi almadığı için kurumsal projelerde risk olarak değerlendirilir.

Angular öğrenmek ne kadar sürer?

TypeScript ve JavaScript temel bilgisi olan biri için 2-3 ay yoğun çalışmayla orta seviye bir Angular geliştiricisi olunabilir. RxJS pipeline, change detection mekanizmaları ve performans optimizasyonu gibi ileri konular gerçek proje üzerinde yıllarca olgunlaşır. Hiç frontend geçmişi olmayan biri için süre 6-9 aya çıkar.

React mi Angular mı tercih etmeliyim?

Proje ölçeği ve ekip büyüklüğüne bağlı. Küçük ekip, hızlı MVP, esnek mimari isteniyorsa React. Büyük ekip, uzun ömürlü kurumsal uygulama, hazır gelen disiplinli yapı isteniyorsa Angular. Pazardaki iş ilanı dağılımı da seçimi etkileyebilir; Türkiye'de finans ve telekom sektörü Angular ağırlıklı, startup dünyası React ağırlıklı.

Standalone components ne işe yarar?

Angular 14 ile gelen yeni yaklaşım. Bileşenleri NgModule'e bağlamadan tek başına kullanılabilir hale getirir. Boilerplate kodu azaltır, lazy loading'i basitleştirir. Yeni projelerde standalone öncelikli olarak öneriliyor; ileride NgModule'ün opsiyonel hale gelmesi planlanıyor.

Angular Universal nedir?

Angular uygulamalarını sunucu tarafında render etmeyi (SSR — Server Side Rendering) sağlayan resmi modüldür. SEO ve ilk yükleme performansı için kritik. Tarayıcı yerine Node.js üzerinde ilk HTML üretilir, kullanıcıya hızlı içerik gelir; sonrasında JavaScript devreye girer ve uygulama SPA gibi çalışmaya devam eder.

Angular ile mobil uygulama yapılabilir mi?

Doğrudan native uygulama üretmez ama iki yol var: Ionic ile WebView tabanlı hibrit mobil uygulama ya da NativeScript-Angular ile gerçek native bileşenlerle çalışan mobil uygulama. PWA olarak da paketlenebilir, kullanıcının cihazına yüklenip native gibi davranır. Native performans gerekirse Flutter veya React Native daha güçlüdür.

Hangi büyük şirketler Angular kullanıyor?

Google'ın kendi ürünleri (Gmail, Google Cloud Console, Firebase Console), Microsoft Office Web, Forbes, Deutsche Bank, BMW, Samsung gibi büyük markalar Angular kullanıyor. Türkiye'de finans, telekom ve büyük perakende şirketlerinin iç sistemlerinde yaygın bir tercih. React'in startup ağırlığına karşılık Angular kurumsal segmentte güçlü.