Angular ile SPA Geliştirme: Adım Adım Kılavuz

Bir web uygulaması oluşturmak istediğinizde, günümüzde tek sayfa uygulama (SPA) yaklaşımını duymamak neredeyse imkansız. Bu modern yapı, kullanıcı deneyimini geliştirmek, hızlı yükleme süreleri sağlamak ve geliştiricilere daha verimli bir çalışma ortamı sunmak için mükemmel bir tercih. Eğer siz de SPA uygulamaları geliştirmeyi öğrenmek istiyorsanız, Angular doğru adrestesiniz. Peki, Angular ile SPA geliştirmek nasıl olur? Gelin, sıfırdan başlayarak bu süreci adım adım keşfedelim!

1. Angular ile Tanışma

Başlamadan önce Angular hakkında kısa bir bilgi verelim. Angular, Google tarafından geliştirilen açık kaynaklı bir web uygulama çerçevesidir. Modern web uygulamaları için kapsamlı bir platform sunar ve özellikle SPA geliştirmek için oldukça uygundur. İçinde birçok yerleşik özellik barındırır: yönlendirme, form işleme, HTTP istemcisi, test araçları ve daha fazlası.

Angular ile SPA geliştirmek istediğinizde, öncelikle bu framework’ün sunduğu araçları iyi öğrenmeniz gerekiyor. Şimdi gelin, Angular ile nasıl proje başlatılır, ona bakalım.

2. Angular CLI ile Proje Başlatma

Angular’ın sunduğu en kullanışlı araçlardan biri de Angular CLI'dir (Command Line Interface). CLI sayesinde projelerinizi hızlıca başlatabilir, geliştirme sürecini kolaylaştırabilirsiniz.

Proje başlatmak için terminal veya komut satırını açarak şu komutu çalıştırıyoruz:

ng new my-angular-spa

Bu komutla, yeni bir Angular projesi oluşturmuş olursunuz. Karşınıza bir dizi yapılandırma sorusu çıkacaktır, bunları varsayılan olarak bırakabilirsiniz. Projenin oluşturulmasının ardından, Angular uygulamanızı çalıştırmak için şu komutu kullanabilirsiniz:

cd my-angular-spa
ng serve

Şimdi, http://localhost:4200 adresinden uygulamanızın çalıştığını görebilirsiniz.

3. SPA Yapısına Giriş

Şimdi asıl önemli kısmı keşfetmeye başlayalım: Tek Sayfa Uygulama (SPA) yapısı. SPA, kullanıcıların sayfalar arasında geçiş yaparken tüm sayfanın yeniden yüklenmesine gerek kalmadan yalnızca gerekli verilerin değişmesini sağlar. Bu da uygulamanın çok hızlı olmasını ve kullanıcının sayfa yenileme hissini yaşamamasını sağlar.

Angular, SPA yapısını oluşturmak için yönlendirme (routing) özelliğini sunar. Birden fazla sayfa veya bileşen arasında geçiş yapabilmek için yönlendirme yapılandırması yapmanız gerekir. Bunu yapmak için, öncelikle Angular Router'ı uygulamanıza dahil etmelisiniz.

4. Angular Router ile Yönlendirme Yapılandırması

Yönlendirme işlemini gerçekleştirmek için `app-routing.module.ts` dosyasını oluşturmanız gerekecek. Bu dosya, sayfalar arasındaki geçişi yönlendirecek.

Aşağıdaki gibi bir yapı oluşturabilirsiniz:

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 yapılandırma, `/` adresine gittiğinizde `HomeComponent`, `/about` adresine gittiğinizde ise `AboutComponent`’i gösterir. Angular Router, sayfa geçişleri sırasında sadece ilgili bileşenleri yükler, tüm sayfayı yeniden yüklemez.

5. Bileşenler (Components) ile SPA Tasarımı

Angular'da her şey bileşenlerden oluşur. Bu bileşenler, HTML, CSS ve TypeScript dosyalarından oluşarak uygulamanızın her bir parçasını temsil eder. SPA'da her sayfa bir bileşen olarak düşünülebilir.

Örneğin, bir `HomeComponent` ve `AboutComponent` oluşturalım. Bileşenler, Angular CLI komutlarıyla hızlıca oluşturulabilir:

ng generate component home

ng generate component about

Her iki bileşeni de oluşturduktan sonra, `home.component.html` ve `about.component.html` dosyalarına içeriğinizi ekleyebilirsiniz. Örneğin:

Welcome to the Home Page
This is the home page of our Angular SPA.

About Us
Learn more about our SPA application here.

6. SPA'da Veri İletişimi

SPA'lar genellikle verileri dinamik olarak yükler. Angular'da veri iletişimi, servisler (services) aracılığıyla yapılır. Servisler, veri işleme ve HTTP isteklerini yönetmek için kullanılır.

Örnek olarak, bir `DataService` servisi oluşturalım:

ng generate service data

Servis içerisinde HTTP isteklerini yaparak veri alabilirsiniz:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Observable {
    return this.http.get('https://api.example.com/data');
  }
}

Ve bu veriyi, bileşenlerde şu şekilde kullanabilirsiniz:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  data: any;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

Bu basit yapı ile dış bir API'den veri çekebilir ve bunu dinamik olarak gösterebilirsiniz.

7. Uygulamayı Yayına Alma

Uygulamanızı geliştirdikten sonra, son adım olarak uygulamanızı yayına alabilirsiniz. Angular, uygulamanızın production (üretim) sürümünü oluşturmak için şu komutu sunar:

ng build --prod

Bu komut, uygulamanızı optimize eder ve minimum boyutta derler. Artık dosyalarınız, herhangi bir web sunucusunda barındırılmaya hazır.