Angular, gelişmiş web uygulamaları oluşturmanızı sağlayan güçlü ve modüler bir çerçevedir. Angular’ın başarısı, onun katı, bileşen tabanlı mimarisine dayanır. Bu yazıda, bu mimarinin temel yapı taşlarını ve bileşenlerini anlatacağım.
Modüller
Angular uygulamaları, bağımsız işlevsellik gruplarına ayrılmış modüller halinde organize edilir. Bu modüller, uygulamanın farklı özelliklerini tanımlar ve kodunuzu organize edip yönetilebilir tutmanıza yardımcı olur.
Bir Angular modülü, @NgModule dekoratörü ile tanımlanır ve bir dizi özellik ve değer içerir:
declarations: Modülün bileşenleri (component), direktifleri (directive) ve borularını (pipe) listeler.
imports: Bu modülün bağımlı olduğu diğer modülleri listeler.
exports: Diğer modüllerin kullanabileceği bileşenleri, direktifleri ve boruları listeler.
providers: Uygulamada kullanılan servislerin tanımlandığı kısım.
bootstrap: Uygulamanın başlatılmasıyla yüklenen ana bileşen.
Bileşenler (Components)
Bileşenler, Angular uygulamalarının kalbidir. Uygulamanızın kullanıcı arayüzünün (UI) her bir bölümü, bir bileşen tarafından temsil edilir. Bileşenler, HTML şablonlarına (view) sahip olan ve bu şablonları yöneten TypeScript kodlarıyla birleşir.
Bir bileşen, @Component dekoratörü ile tanımlanır ve bir dizi konfigürasyon seçeneği içerir:
selector: Bileşenin HTML’de nasıl çağrılacağını tanımlar. Örneğin: <my-component></my-component>
templateUrl: Bileşenin HTML şablonunun yolunu belirtir.
styleUrls: Bileşen için kullanılan CSS stil dosyalarının yollarını belirtir.
Direktifler (Directives)
Direktifler, Angular’ın HTML elemanlarının görünümünü ve davranışını nasıl değiştireceğini bilmek için kullandığı talimatlardır. İki ana tür direktif vardır:
Yapısal Direktifler: Elemanları ekler, kaldırır veya değiştirir. Örneğin: *ngIf, *ngFor.
Özellik Direktifleri: Bir elemanın görünümü, boyutu veya davranışını değiştirir. Örneğin: [ngStyle], [ngClass].
Servisler ve Enjeksiyon
Servisler, uygulama genelinde kullanılabilen fonksiyonlar veya değerler sunar. Veri almak, mesajları göndermek veya loglama gibi işlemler için kullanılırlar. Servisler, @Injectable dekoratörü ile tanımlanır ve bağımlılık enjeksiyonu ile bileşenlere enjekte edilir. Bu, kodun yeniden kullanılmasını ve test edilmesini kolaylaştırır.
Routing
Angular, SPA (Single Page Application) oluşturmak için kapsamlı bir yönlendirme mekanizması sunar. RouterModule ile, uygulamanız içindeki farklı görünümler arasında geçiş yapabilirsiniz, bu da sayfa yeniden yüklemesi olmadan pürüzsüz bir kullanıcı deneyimi sağlar.
Formlar
Angular ile çalışırken, kullanıcı girişi toplamak ve işlemek için form oluşturma ihtiyacı olacaktır. Angular bu konuda iki yaklaşım sunar:
Şablon Tabanlı Formlar: Bu yaklaşım, form ögelerini doğrudan HTML içinde tanımlamanıza ve FormsModule ile basit form kontrollerini otomatik olarak bağlamanıza izin verir.
Reaktif Formlar: Bu yaklaşımda, formunuzun yapısı ve kontrolleri TypeScript dosyanızda programatik olarak oluşturulur ve ReactiveFormsModule kullanılarak HTML şablonuyla eşlenir. Reaktif form yaklaşımı, dinamik form oluşturma, form doğrulama ve karmaşık form grupları için daha uygun olabilir.
HTTP İstemcisi ve API İletişimi
Modern web uygulamaları sıklıkla uzaktaki sunucularla veri alışverişinde bulunur. Angular, HttpClientModule ile kolay ve etkili bir şekilde HTTP isteklerini yapma ve yanıtları işleme yeteneği sunar. Bu modül, HTTP GET, POST, PUT, DELETE gibi metodları destekler ve Observable tabanlı bir API üzerinden çalışır, bu da asenkron operasyonları yönetmeyi kolaylaştırır.
Borular (Pipes)
Pipes, Angular’da veriyi dönüştürmek için kullanılır. Bu, tarihleri, para birimlerini veya metinleri belirli bir formata dönüştürmek gibi birçok kullanım senaryosunda uygundur. Angular, birçok yerleşik pipe sunar, ancak ihtiyacınıza göre özel pipeler de oluşturabilirsiniz.
Bileşenler Arası İletişim
Bir uygulama büyüdükçe, bileşenler arasında veri alışverişi yapma ihtiyacı doğar. Angular, bileşenler arasında veri iletmek için birkaç yöntem sunar:
@Input ve @Output Dekoratörleri: Ebeveyn ve çocuk bileşenleri arasında veri iletmek için kullanılır.
Servisler ve Observable: Uygulama genelinde veri akışını yönetmek ve bileşenler arasında asenkron veri iletmek için kullanılır.
ViewChild ve ContentChild: Bileşenler arasında doğrudan erişim için kullanılır.
Animasyonlar
Angular, web uygulamalarınızda sofistike animasyonlar oluşturmanızı sağlar. @angular/animations modülü ile kolaylıkla bileşenlere animasyon ekleyebilirsiniz. Bu, kullanıcı deneyimini daha etkileyici ve dinamik hale getirmek için harika bir yoldur.
NgRx ve Durum Yönetimi
Büyük uygulamaların karmaşıklığını yönetmek için durum yönetimi araçlarına ihtiyaç duyulabilir. NgRx, Angular için bir durum yönetimi kütüphanesidir ve Redux mimarisinden ilham almıştır. Uygulamanızın durumunu merkezi bir depoda saklar ve bu durumu güncellemek için aksiyonları ve redüktörleri kullanır.
Lazy Loading
Büyük Angular uygulamaları için performans, önemli bir endişe kaynağı olabilir. Lazy loading, uygulamanızın yalnızca gerektiğinde belirli modülleri yüklemesine olanak tanır. Bu, başlangıç yüklemesi süresini hızlandırabilir ve kullanıcılara daha hızlı bir deneyim sunar.
Test ve Debug
Angular, karmaşık web uygulamalarınızı test etmek ve hataları ayıklamak için kapsamlı araçlar sunar. Jasmine ve Karma gibi test çerçeveleri, bileşenlerinizi, servislerinizi ve diğer kod parçalarınızı izole bir şekilde test etmenize olanak tanır. Ayrıca, Angular CLI, Protractor ile birlikte end-to-end testlerini otomatik olarak çalıştırmanızı sağlar.
AOT (Ahead-of-Time) Derleme
Angular, uygulamanızı çalıştırmadan önce tüm TypeScript kodunuzu JavaScript’e dönüştüren AOT derlemeyi destekler. Bu, uygulamanızın yüklenme süresini hızlandırabilir ve runtime hatalarını azaltabilir.
Server Side Rendering (SSR) – Angular Universal
Angular Universal, Angular uygulamalarınızın sunucu tarafında önceden oluşturulmasına olanak tanır. Bu, ilk sayfa yükleme süresini hızlandırabilir, SEO’yu (Arama Motoru Optimizasyonu) iyileştirebilir ve düşük güçlü cihazlarda veya yavaş ağ bağlantılarında performansı artırabilir.
Sonuç olarak Angular, modern web uygulama geliştirmek için kapsamlı bir araç seti sunar. Modüler yapısı, bileşen tabanlı mimarisi ve kapsamlı özellikleriyle, karmaşık web uygulamalarını yönetilebilir ve ölçeklenebilir bir şekilde oluşturmanıza olanak tanır. Bu temel bileşenler, Angular ile geliştirme yolculuğunuza başlarken anlamanız gereken en önemli kavramlardır.
Umarım “Angular’ın Temel Yapısı ve Bileşenleri” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
