Angular ile SPA (Single Page Application) Geliştirme

Single Page Application (SPA), tüm uygulamanın tek bir sayfada çalıştığı ve kullanıcı ile etkileşimin sadece o sayfa içinde gerçekleştiği bir web uygulama türüdür. Geleneksel çok sayfalı uygulamalarda her yeni sayfa yüklemesi için sunucuya yeni bir istek yapılırken, SPA’larda sayfa değişiklikleri sadece belirli alanları günceller, böylece uygulama daha hızlı ve akıcı hale gelir. Angular, SPA geliştirmek için güçlü ve popüler bir framework’tür.

Bu blogda, Angular ile SPA geliştirmeyi adım adım inceleyecek, örnekler ve görsellerle SPA’ların nasıl oluşturulduğunu açıklayacağız. Başlangıçtan ileri seviyeye kadar Angular’da SPA geliştirme sürecini ele alacağız.

1. Angular’a Giriş

Angular, Google tarafından geliştirilen açık kaynaklı bir web framework’üdür. TypeScript tabanlıdır ve web uygulamalarını oluşturmak için kullanılır. Angular, bileşen tabanlı yapısı, yönlendirme, form yönetimi, veri bağlama gibi bir dizi yerleşik özellik sunar.

SPA'lar genellikle Angular gibi framework'ler kullanılarak daha verimli bir şekilde geliştirilir çünkü Angular, verimli veri bağlama ve bileşen tabanlı mimari ile geliştirmeyi kolaylaştırır.

2. SPA Nedir ve Neden Kullanılır?

Bir SPA, kullanıcının uygulama ile etkileşime girmesi için sayfa yenilemeye gerek duymaz. Tüm sayfa içeriği, JavaScript tarafından dinamik olarak güncellenir. SPA’lar, kullanıcı deneyimini geliştirir ve performansı artırır.

SPA'nın Avantajları:

  • Hızlı Yüklenme: Sayfa içeriği yalnızca gerektiğinde güncellenir, bu da sayfanın hızlı yüklenmesini sağlar.
  • Daha İyi Kullanıcı Deneyimi: Sayfa yenilemesi olmadan kullanıcı etkileşimi gerçekleşir, bu da daha doğal bir deneyim sunar.
  • Daha Az Sunucu Yükü: Sayfalar arasında geçişlerde yalnızca gerekli veriler alınır ve yalnızca kısmi güncellemeler yapılır.

3. Angular ile SPA Geliştirmeye Başlamak

3.1. Angular Projesi Oluşturma

İlk adım, Angular CLI aracını kullanarak bir proje oluşturmaktır. Angular CLI, Angular projelerini hızlı bir şekilde başlatmanızı sağlar.

3.1.1. Angular CLI Kurulumu

Angular CLI'yi global olarak yüklemek için terminal veya komut satırında şu komutu çalıştırın:

npm install -g @angular/cli

3.1.2. Yeni Bir Angular Projesi Oluşturma

Yeni bir Angular projesi başlatmak için şu komutu kullanabilirsiniz:

ng new spa-angular-app

Komut, gerekli tüm Angular dosyalarını oluşturur. Projenizi oluşturduktan sonra şu komutla Angular uygulamanızı çalıştırabilirsiniz:

cd spa-angular-app
ng serve

Bu komutla projeyi başlatacak ve http://localhost:4200 adresinde çalıştıracaktır.

3.2. Angular SPA Yapısı

Bir Angular uygulamasında, uygulamanın tüm bileşenleri birbirinden bağımsızdır ve her bir bileşen, belirli bir işlevi yerine getirir. Angular, bileşen tabanlı bir mimariye sahip olduğu için her bileşen, belirli bir işlevi yerine getirir ve yalnızca gerektiğinde render edilir.

SPA geliştirme sürecinde, sayfalar arasında gezinmek için Angular’ın Router (Yönlendirme) modülünü kullanacağız.

4. Angular Router ile Sayfalar Arası Geçiş

4.1. Angular Router Kurulumu

Angular Router, SPA’larda sayfalar arası geçişi yönetir. Projenizde Angular Router'ı kullanabilmek için önce gerekli modülü projeye dahil etmelisiniz.

app.module.ts dosyasına şu şekilde Router modülünü ekleyin:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.2. Routing (Yönlendirme) Konfigürasyonu

Router’ı aktif hale getirdikten sonra, app-routing.module.ts dosyasını oluşturup yönlendirme ayarlarını yapmalıyız. Aşağıda, basit bir yönlendirme yapısının örneği bulunmaktadır:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Bu kod, iki sayfa için yönlendirme yapılandırmasını içeriyor: HomeComponent ve AboutComponent.

4.3. Sayfalar Arası Geçiş

Router ile sayfalar arası geçiş yapmak için, uygulamanızda linkler kullanabilirsiniz:

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

Yukarıdaki kod, sayfalar arasında geçiş yapabilmenizi sağlar. router-outlet Angular'ın sayfa içeriğini dinamik olarak yüklemesini sağlar.

5. Bileşen Kullanımı ve Veri Bağlama

Angular, bileşen tabanlı bir yapıya sahip olduğundan, her bir sayfa ya da işlevsel alan bir bileşen olarak ele alınır. Bu bileşenlerde, Veri Bağlama (Data Binding) kullanılarak UI ile arka planda veri senkronize edilir.

5.1. Veri Bağlama Örneği

Angular’da veri bağlama, HTML şablonları ve bileşenler arasında veri akışını sağlar. İşte temel bir örnek:

<!-- app.component.html -->
<div>
  <h1>{{ title }}</h1>
  <input [(ngModel)]="title" />
</div>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular SPA';
}

Burada, title değişkeni ile HTML input öğesi arasında iki yönlü veri bağlama (two-way data binding) kullanılmıştır.

6. Performans ve Optimizasyon

SPA’lar, sayfa yenilemesi olmadan çalıştığı için hızlıdır, ancak büyük uygulamalarda performans önemli bir konu olabilir. Angular ile SPA geliştirirken dikkat edilmesi gereken bazı performans optimizasyonları şunlardır:

  1. Lazy Loading: Uygulamanın yalnızca gerekli bileşenlerini yüklemek, başlangıç süresini azaltabilir. Angular, lazy loading ile sadece ihtiyacı olan modülleri yüklemenize olanak tanır.

  2. AOT (Ahead-of-Time) Derleme: Uygulamanızı AOT ile derlemek, daha hızlı başlatma süreleri sağlar çünkü Angular, bileşenleri ve şablonları derlerken zaman kazanır.

  3. Change Detection: Angular’ın change detection mekanizması, her değişiklikte tüm bileşenleri kontrol eder. Bu işlemi optimize etmek için ChangeDetectionStrategy.OnPush kullanabilirsiniz.

7. Sonuç

Angular ile SPA geliştirme süreci, özellikle modern web uygulamaları için verimli, hızlı ve kullanıcı dostu deneyimler yaratmanıza olanak tanır. Angular’ın bileşen tabanlı yapısı, router modülü ve veri bağlama özellikleri ile SPA'lar kolayca geliştirilebilir. Performans optimizasyonları yaparak uygulamanızı daha verimli hale getirebilirsiniz.

Bu yazıda, Angular ile SPA geliştirme temellerini öğrendiniz ve gerçek bir projede kullanabileceğiniz temel yönlendirme, bileşenler ve veri bağlama gibi özellikleri keşfettiniz. Bu bilgilerle, daha büyük ve karmaşık Angular projeleri geliştirmek için sağlam bir temel atmış oldunuz.