Angular’a Başlamadan Önce Bilmeniz Gereken 12 Temel Kavram

Angular’a Giriş: Temel Kavramlar

Angular, modern ve dinamik web uygulamaları geliştirmek için kullanılan güçlü bir framework. Angular’a başlamadan önce temel kavramlara hakim olmak, öğrenme sürecinizi hızlandıracaktır. Özellikle HTML, CSS, JavaScript bilgisi ve TypeScript temel bilgisi ile Angular’ın modüler yapısını anlamak büyük bir avantaj sağlar. Angular’ın component tabanlı yapısı, modüller, servisler ve routing gibi kavramlar, framework’ü etkin ve verimli bir şekilde kullanmanızı sağlar. Bu temel kavramları öğrendiğinizde, Angular ile karmaşık ve modern web uygulamaları geliştirme sürecine hızlıca başlayabilirsiniz.

1. HTML, CSS ve JavaScript

Angular, web uygulamaları geliştirmek için kullanılan bir framework olduğundan, öncelikle HTML, CSS ve JavaScript‘i iyi bir şekilde anlamanız gerekir.

HTML (HyperText Markup Language): Web sayfalarının iskeletini oluşturur. Angular’da component’lerin HTML temelleri kullanılarak oluşturulacağını bilmelisiniz.
CSS (Cascading Style Sheets): Web sayfasının stilini yani görünümünü belirler. Angular’da her component’e özel CSS stilleri kullanılabilir.
JavaScript: Angular, JavaScript’in üstüne kuruludur. JavaScript dilinin temellerini ve olay yönetimini anlamak, Angular’ın TypeScript ile birlikte nasıl çalıştığını kavramak için gereklidir.

2. TypeScript

Angular, TypeScript kullanılarak yazılır. TypeScript, JavaScript’in geliştirilmiş ve tip kontrollü bir versiyonudur. TypeScript, özellikle büyük ve karmaşık projelerde kodun daha düzenli ve güvenilir olmasını sağlar.

Tip Kontrolü: TypeScript, veri tiplerini belirleyerek, hataların önceden tespit edilmesine yardımcı olur. Örneğin, bir değişkenin number, string veya boolean olup olmadığını önceden belirleyebilirsiniz.
ES6+ Desteği: TypeScript, modern JavaScript (ES6 ve sonrası) özelliklerini de içerir. Bu, sınıf (class), modül (module) ve ok fonksiyonları (arrow functions) gibi yapıları kullanabilmenizi sağlar.

TypeScript ile ilgili temel bilgilere sahip olmak Angular’ı daha rahat öğrenmenizi sağlar, çünkü Angular’da yazılan her kod TypeScript ile yazılır.

3. Componentler

Angular’ın yapı taşı olan componentler, kullanıcı arayüzündeki her bir bölümü temsil eder. Component’ler, HTML, CSS ve TypeScript kodlarının bir araya geldiği küçük ve bağımsız yapılardır.

Component Yapısı: Her component bir HTML template, bir CSS stil dosyası ve bir TypeScript sınıfından oluşur. Bu üç yapı bir araya gelerek web sayfasının belli bir bölümünü oluşturur.
Reusable (Tekrar Kullanılabilir): Component’ler modülerdir, bu nedenle tekrar tekrar kullanılabilirler.

Component kavramını anlamak, Angular uygulamalarını daha verimli bir şekilde oluşturmanıza yardımcı olur.

4. Modüller (Modules)

Angular uygulamaları modüler bir yapıdadır ve bu modüller NgModules adı verilen yapılarla organize edilir. Modüller, component’leri, servisleri ve diğer Angular özelliklerini bir araya getirir.

AppModule: Tüm Angular uygulamalarında başlangıç noktasıdır. Uygulamanızdaki tüm component’leri ve diğer yapı taşlarını bu modülde toplarsınız.
Lazy Loading: Büyük uygulamalarda modüllerin sadece ihtiyaç olduğunda yüklenmesini sağlar. Bu da uygulamanın performansını artırır.

Modüller, uygulamanızı daha yönetilebilir ve organize bir hale getirir.

5. Data Binding (Veri Bağlama)

Angular, data binding yöntemiyle veriyi kolayca component’ten HTML’e aktarır. İki ana tür veri bağlama yöntemi vardır:

Interpolation (Araştırma): {{}} işaretleri kullanılarak TypeScript’teki veriler HTML’e yansıtılır.
Two-way Data Binding: Kullanıcı arayüzü ile arka plandaki verilerin senkronize olmasını sağlar. Yani, kullanıcının yaptığı değişiklikler anında component’te görülebilir, component’teki değişiklikler de kullanıcı arayüzüne yansır.

Data binding, Angular’ın en önemli özelliklerinden biridir ve dinamik kullanıcı arayüzleri oluşturmayı kolaylaştırır.

6. Directives (Yönergeler)

Directives, Angular’da HTML etiketlerine ekstra davranışlar eklemek için kullanılır. İki temel türü vardır:

Structural Directives: HTML yapısını değiştirmek için kullanılır. Örneğin, *ngIf, *ngFor gibi yapılar sayesinde şartlı işlemler veya döngüler oluşturabilirsiniz.
Attribute Directives: HTML etiketlerine ek özellikler veya stiller eklemek için kullanılır. Örneğin, [ngClass] ve [ngStyle] ile elementlerin stillerini dinamik olarak değiştirebilirsiniz.

Directives, HTML içindeki davranışları kontrol etmenin ve onları dinamik hale getirmenin etkili yollarından biridir.

7. Services ve Dependency Injection

Angular’da services (servisler), component’ler arasında veri paylaşımını sağlar ve iş mantığını component’lerin dışına taşıyarak uygulamanın düzenli olmasına katkıda bulunur. Service’ler genellikle veritabanına erişim veya dış API’lere istek gönderme gibi görevleri üstlenir.

Dependency Injection (Bağımlılık Enjeksiyonu): Angular, component’lere ihtiyaç duyduğu servisleri otomatik olarak enjekte eder. Bu, kodun tekrar kullanılabilirliğini ve test edilebilirliğini artırır. Servisleri component’lerde elle oluşturmak yerine, Angular’ın Dependency Injection sistemine bırakabilirsiniz.

8. Routing (Yönlendirme)

Routing, Angular’da birden fazla sayfa veya view yapısı olan uygulamalarda, kullanıcıların sayfalar arasında geçiş yapabilmesini sağlar.

RouterModule: Angular’da sayfa yönlendirmesi yapmak için kullanılan modüldür. Her URL, belirli bir component’i yüklemek için kullanılır.
Route Guards: Uygulamanızda belirli bir sayfaya erişimi kontrol etmek isterseniz, route guards ile kullanıcıları yönlendirme sırasında koruma katmanları ekleyebilirsiniz.

Routing, Angular uygulamalarını tek sayfa uygulamalarına (SPA) dönüştüren önemli bir kavramdır.

9. Lifecycle Hooks (Yaşam Döngüsü Kancaları)

Angular’da her component belirli bir yaşam döngüsüne sahiptir. Bu yaşam döngüsünün belirli aşamalarında, Angular size bazı lifecycle hooks (yaşam döngüsü kancaları) sunar. Bu kancalar, component’in belli aşamalarda ne yapması gerektiğini kontrol etmenizi sağlar.

ngOnInit(): Component’in başlatıldığında çalışan bir kancadır.
ngOnDestroy(): Component’in yok edilmeden önce çalışan kancasıdır.

Bu lifecycle hooks’lar, component’lerin ne zaman yüklendiğini ve ne zaman yok edildiğini kontrol etmek için kullanılır. Diğer kancaları sonra daha detaylı inceleceğiz.

10. Forms (Formlar)

Angular’da formlar, veri toplama ve kullanıcının uygulama ile etkileşime geçmesi açısından önemli bir parçadır. Angular, form yönetimi için iki ana yol sunar:

Template-Driven Forms: HTML temelli form yapısıdır. Basit formlar için uygundur.
Reactive Forms: Daha karmaşık form işlemleri için kullanılır ve programatik olarak formun kontrolünü sağlar.

Form yönetimini iyi anlamak, Angular ile kullanıcıdan veri toplama sürecini kolaylaştırır.

11. Observables ve RxJS

Angular, reaktif programlamayı destekleyen RxJS kütüphanesini kullanır. Bu kütüphanenin sunduğu observables yapısı, asenkron işlemleri yönetmenin etkili bir yoludur.

Observable: Veriyi zaman içinde izleyebileceğiniz bir yapı sağlar. Örneğin, bir HTTP isteği yapıldığında sonuç hemen gelmez, ancak observable sayesinde bu sonuca abone olabilir ve geldiğinde işlemi gerçekleştirebilirsiniz.

Observables, Angular’da özellikle HTTP istekleri ve veri akışlarını yönetmede büyük kolaylık sağlar.

12. HTTPClient

Angular’da API’lere ve dış veri kaynaklarına erişim yapmak için HTTPClient servisi kullanılır. Bu servis, HTTP isteklerini kolayca yapmanızı sağlar.

GET, POST, PUT, DELETE: HTTPClient ile bu istek türlerini kullanarak dış veri kaynaklarına erişebilir veya veri gönderebilirsiniz.
Observables ile HTTP İstekleri: HTTPClient, Observable yapısıyla birlikte çalışır. Bu sayede gelen veriyi işlemek için subscribe metodunu kullanabilirsiniz.