Herkesin dinamik ve hızlı web uygulamaları beklediği bir dünyada, Single Page Application (SPA) geliştirmek, modern web geliştirmede oldukça popüler bir tercih haline geldi. Peki, Angular ile SPA nasıl geliştirilir? İşte adım adım süreci sizinle paylaşacağım!

SPA, tek bir HTML sayfası üzerinde tüm içeriklerin yüklenmesiyle çalışan uygulamalardır. Yani, kullanıcı sayfalar arasında geçiş yaparken her defasında sayfa yenilenmez. Bu, kullanıcı deneyimini inanılmaz derecede hızlandırır ve web uygulamalarını çok daha akıcı hale getirir.

Angular, Google tarafından geliştirilen güçlü bir framework'tür ve SPA geliştirme konusunda mükemmel bir seçenektir. TypeScript ile yazılan Angular, modüler yapısı, güçlü yönlendirme özellikleri ve geniş ekosistemi sayesinde SPA projeleriniz için harika bir temel sunar.

#### 1. Angular CLI Kurulumu

İlk adım olarak Angular CLI’yi (Command Line Interface) bilgisayarınıza kurmanız gerekiyor. Bunun için terminal veya komut satırını açarak şu komutu girin:

npm install -g @angular/cli

Bu komut, Angular CLI'yi global olarak yükler. Şimdi, yeni bir Angular projesi oluşturmak için şu komutu kullanabilirsiniz:

ng new my-spa-project

"my-spa-project" yerine istediğiniz proje adını yazabilirsiniz. Komut çalıştıktan sonra, size bazı seçenekler sunulacak; projenizde hangi özelliklerin olacağını seçebilirsiniz.

Projeyi oluşturduktan sonra, proje klasörüne gidin:

cd my-spa-project

Ve projeyi başlatın:

ng serve

Bu komut, projeyi yerel sunucuda çalıştıracak ve genellikle `http://localhost:4200` adresinde erişilebilir hale getirecektir.

SPA'nin temel özelliklerinden biri, sayfa yenilemeden içerik değiştirmektir. Bunun için Angular'ın yönlendirme (routing) modülünü kullanırız. Yönlendirme, kullanıcıların belirli URL'lere gittiğinde farklı bileşenlerin (components) yüklenmesini sağlar.

Öncelikle, projenize yönlendirme modülünü eklemeniz gerekiyor. Bunu yapmak için `app-routing.module.ts` dosyasını oluşturun ve içerisine şu kodu ekleyin:

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 { }

Burada iki rota belirledik: birincisi ana sayfa (`HomeComponent`), ikincisi ise hakkında sayfası (`AboutComponent`). Bu dosyayı oluşturduktan sonra, `app.module.ts` dosyanızda AppRoutingModule'i içeri aktarın:

import { AppRoutingModule } from './app-routing.module';

Ve `imports` array'ine ekleyin:

imports: [
  BrowserModule,
  AppRoutingModule
]

Angular, her sayfanın bir bileşen (component) olarak ele alındığı bir yapı sunar. Bu sayede her bileşen, belirli bir işlevi yerine getirebilir. Örneğin, `HomeComponent` ana sayfa için, `AboutComponent` ise hakkında sayfası için kullanılacaktır.

Her bileşen için bir HTML dosyası, bir CSS dosyası ve bir TypeScript dosyası olacaktır. Örnek olarak, `HomeComponent`’in TypeScript dosyasına şu kodu ekleyelim:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title = 'Ana Sayfa';
}

Bileşenin HTML dosyasına ise basit bir yapı ekleyebiliriz:

{{ title }}
Angular SPA ile geliştirilen uygulamanıza hoş geldiniz!

Son olarak, yönlendirmeleri sağlamak için, kullanıcıların sayfalar arasında geçiş yapabilmesi için HTML dosyalarımıza navigasyon linklerini eklememiz gerekiyor. Bunun için Angular'ın `routerLink` direktifini kullanacağız.

`app.component.html` dosyasına şu satırları ekleyin:

`router-outlet` tag'i, Angular'ın yönlendirme sisteminin hangi bileşenin görüntüleneceğini belirlediği yerdir. Bu sayede, hangi rotaya gidildiğinde, o rota ile ilişkilendirilmiş bileşen ekrana gelir.

Tüm yapılandırmalarınız tamamlandığında, terminalden `ng serve` komutunu tekrar çalıştırın ve projenizi tarayıcınızda `http://localhost:4200` adresinde görüntüleyin. Artık, dinamik bir Angular SPA uygulamanız var!

Angular ile SPA geliştirmek, kullanıcı deneyimini bir üst seviyeye taşır. Uygulamanız, sayfa yenilemesi olmadan hızlı ve akıcı şekilde çalışır. Bu yazıda, Angular ile SPA yapımının temellerini adım adım öğrendiniz. Geriye sadece uygulamanızı özelleştirip, daha karmaşık bileşenler eklemek kaldı!