Neden Angular ile SPA?
SPA'lar, tüm web uygulamanızın tek bir sayfada çalıştığı uygulamalardır. Geleneksel çok sayfalı web uygulamalarının aksine, sayfa geçişleri sırasında sayfanın yeniden yüklenmesine gerek yoktur. Bu sayede kullanıcı deneyimi büyük ölçüde iyileşir, çünkü her seferinde sayfanın yeniden yüklenmesi yerine sadece gerekli olan içerikler güncellenir. Angular, modern SPA'lar için mükemmel bir araçtır, çünkü güçlü bir yapıya ve bir dizi hazır özelliğe sahiptir.
Angular, Google tarafından geliştirilen ve kullanılan açık kaynaklı bir web uygulama framework'üdür. JavaScript yerine TypeScript kullanarak geliştirilen Angular, özellikle büyük ve ölçeklenebilir uygulamalar için mükemmel bir seçimdir. Modüler yapısı, yönlendirme desteği ve zengin ekosistemi sayesinde SPA'lar geliştirmede oldukça etkilidir.
Angular ile SPA Geliştirmeye Başlayalım
Angular ile SPA geliştirmeye başlamak için birkaç temel adımdan geçmeniz gerekiyor. Adım adım bu süreci keşfedeceğiz.
İlk adım, bir Angular projesi oluşturmaktır. Bunun için terminal veya komut satırını açarak şu komutu çalıştırabilirsiniz:
```bash
ng new angular-spa
```
Bu komut, `angular-spa` adında yeni bir Angular projesi oluşturur. Projenin yapılandırması sırasında size bazı seçenekler sunulacaktır, ancak şimdilik varsayılan seçeneklerle devam edebiliriz.
# Adım 2: Angular Yönlendirme (Routing) Kurulumu
SPA'ların temel özelliklerinden biri, kullanıcıların farklı sayfalara geçiş yapabilmesidir. Bunun için Angular'da yönlendirme (routing) kullanırız. Proje oluşturulduktan sonra, `app-routing.module.ts` dosyasını açarak uygulamanın yönlendirmelerini belirleyebiliriz.
```bash
ng generate module app-routing --flat --module=app
```
Sonrasında `app-routing.module.ts` dosyasını şu şekilde güncelleyebiliriz:
```typescript
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, `HomeComponent` ve `AboutComponent` gibi iki farklı bileşene yönlendirme yapılmaktadır. Yönlendirmeleri Angular'a tanıttık, şimdi bu bileşenleri oluşturalım.
# Adım 3: Bileşenler (Components) Oluşturma
Uygulamanın temel yapı taşları bileşenlerdir. Angular, her bileşeni bir HTML şablonu, CSS ve TypeScript dosyasıyla birlikte yönetir. Şimdi birkaç bileşen oluşturalım.
ng generate component home
ng generate component about
```
Bu komutlar, `home` ve `about` adlı bileşenleri oluşturur. Ardından her bileşenin HTML dosyasına şu şekilde içerik ekleyebiliriz:
- home.component.html:
```html
Hoş Geldiniz!
Angular ile SPA geliştirmeye başladınız.
```
- about.component.html:
```html
Hakkında
Bu sayfada uygulamamız hakkında bilgiler bulabilirsiniz.
```
# Adım 4: Navigasyon (Navigation) Ekleme
Artık yönlendirme işlemlerimiz tamamlandığına göre, kullanıcıların farklı sayfalara geçiş yapabilmesi için menü ekleyebiliriz. Bu menüyü `app.component.html` dosyasına şu şekilde ekleyebiliriz:
```
Buradaki `routerLink` etiketleri, kullanıcıyı ilgili sayfalara yönlendirecektir. `
# Adım 5: Uygulamanızı Çalıştırma
Son olarak, Angular uygulamanızı çalıştırarak tarayıcıda test edebilirsiniz. Bunun için terminalden şu komutu kullanarak uygulamayı başlatabilirsiniz:
ng serve
```
Bu komut, uygulamanızı localhost:4200 adresinde çalıştıracaktır. Tarayıcınızda bu URL'yi ziyaret ederek, oluşturduğunuz SPA'yı görebilirsiniz.
