Angular, özellikle tek sayfalı uygulamalar (Single Page Applications, SPA) için popüler bir web uygulama çerçevesidir. SPA’lar, tüm içeriği bir kerede yükleyip, kullanıcının etkileşimine bağlı olarak belirli bölümleri değiştirerek çalışır. Bu değişikliklerin düzenli ve optimize edilmiş bir şekilde yapılabilmesi için Angular’da routing mekanizması bulunur.
Angular routing, uygulamanızdaki farklı görünüm ve navigasyon setlerini yönetmenizi sağlar. URL’deki değişikliklere tepki olarak belirli bileşenleri (components) görüntülemenize olanak tanır.
Örnek: /home URL’sini ziyaret edildiğinde HomeComponent’i, /profile URL’sini ziyaret edildiğinde ise ProfileComponent’i göstermek istiyorsanız, Angular routing ile bu yönlendirmeyi kolayca yapabilirsiniz.
Neden Kullanılır?
SPA Desteği: Routing, SPA’ların hızlı ve etkili bir şekilde çalışmasını sağlar. Sayfa yenilenmesi olmadan farklı içerikleri ve bileşenleri gösterir.
Navigasyon Kontrolü: Uygulamanızdaki navigasyonu merkezi bir yerden yönetebilirsiniz. Bu, büyük projelerde organizasyonu ve bakımı kolaylaştırır.
Lazy Loading: Büyük uygulamalar için, tüm bileşenleri ve modülleri başlangıçta yüklemek yerine, ihtiyaç oldukça yüklemek için “tembel yükleme” (lazy loading) özelliğini kullanabilirsiniz. Bu, uygulamanın başlangıç yükleme süresini hızlandırır.
Gelişmiş Kullanıcı Deneyimi: Sayfalar arasında geçişlerde sayfanın yeniden yüklenmesine gerek kalmaz, bu da kullanıcının daha akıcı bir deneyim yaşamasını sağlar.
Angular Routing Uygulamaları – 1
Ilk olarak Angular’da routing işlemleri nasıl yapılır onu adım adım açıklayalım. Öncelikle Home, About ve Contact sayfalarının her biri için ayrı componentler oluşturacağız. Sonrasında bu componentleri bir navbar ile birleştirip, tıklanıldığında ilgili sayfaya yönlendirme yapacağız.
Adım 1: Angular Projesi Oluşturma
Eğer yeni bir proje başlatmak istiyorsanız şu komutla başlayabilirsiniz:
|
1 2 3 |
ng new angular-routing-project |
Adım 2: Component Oluşturma
3 farklı component oluşturalım: Home, About, Contact.
|
1 2 3 4 5 |
ng generate component home ng generate component about ng generate component contact |
Adım 3: Routing İçin Ayarlamalar
AppRoutingModule Oluşturma
Eğer angular-routing-module dosyası yoksa şu komut ile oluşturabilirsiniz:
|
1 2 3 |
ng generate module app-routing --flat --module=app |
Yönlendirmeleri Ayarlamak
app-routing.module.ts dosyasını açın ve şu kodları ekleyin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Navbar Oluşturma
app.component.html dosyasını açın ve şunları ekleyin:
|
1 2 3 4 5 6 7 8 9 10 |
<nav> <ul> <li><a routerLink="/home">Home</a></li> <li><a routerLink="/about">About</a></li> <li><a routerLink="/contact">Contact</a></li> </ul> </nav> <router-outlet></router-outlet> |
Adım 4: Uygulamayı Çalıştırma
|
1 2 3 |
ng serve |
Bu komutla uygulamanızı çalıştırdığınızda, bir navbar göreceksiniz ve bu navbar üzerindeki her link, sizi ilgili sayfaya yönlendirecektir.
Angular Routing Uygulamaları – 2
İkinci örnek için bir API’den ürün listesi alacağız, sonra bu listeyi ana sayfada göstereceğiz. Bir ürüne tıklanırsa, bu bizi detay sayfasına yönlendirecek ve ilgili ürünün detaylarını gösterecek.
Adım 1: Product ve ProductDetail Componentleri Oluşturma
İlk olarak iki component oluşturalım:
|
1 2 3 4 |
ng generate component product ng generate component product-detail |
Adım 2: ProductService Oluşturma
|
1 2 3 |
ng generate service product |
Adım 3: ProductService’de API İstekleri
product.service.ts içerisine HTTP isteği yapabilmek için HTTPClient modülünü ekleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ProductService { private apiUrl = 'http://localhost:3001/api/products'; // Burada gerçek API adresinizi kullanacaksınız. constructor(private http: HttpClient) { } getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.apiUrl); } getProduct(id: number): Observable<Product> { return this.http.get<Product>(`${this.apiUrl}/${id}`); } } |
Adım 4: Routing Ayarlamaları
app-routing.module.ts dosyasını güncelleyelim:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { ProductComponent } from './product/product.component'; import { ProductDetailComponent } from './product-detail/product-detail.component'; const routes: Routes = [ ... { path: 'products', component: ProductComponent }, { path: 'product/:id', component: ProductDetailComponent }, ]; ... |
Adım 5: Ürün Listesini Gösterme
product.component.ts ve product.component.html dosyalarını şu şekilde güncelleyelim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component, OnInit } from '@angular/core'; import { ProductService } from '../product.service'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit { products: Product[] = []; constructor(private productService: ProductService) { } ngOnInit(): void { this.productService.getProducts().subscribe(data => { this.products = data; }); } } |
|
1 2 3 4 5 6 7 |
<ul> <li *ngFor="let product of products"> <a [routerLink]="['/product', product.id]">{{ product.name }}</a> </li> </ul> |
Adım 6: Ürün Detayını Gösterme
product-detail.component.ts ve product-detail.component.html dosyalarını şu şekilde güncelleyelim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ProductService } from '../product.service'; @Component({ selector: 'app-product-detail', templateUrl: './product-detail.component.html', styleUrls: ['./product-detail.component.css'] }) export class ProductDetailComponent implements OnInit { product: Product | undefined; constructor(private route: ActivatedRoute, private productService: ProductService) { } // Yontem 1 ngOnInit(): void { const id = +this.route.snapshot.paramMap.get('id')!; this.productService.getProduct(id).subscribe(data => { this.product = data; }); } // Yontem 2 ngOnInit(): void { this.route.paramMap.subscribe(params => { const id = +params.get('id'); this.productService.getProduct(id).subscribe(data => { this.product = data; }); }); } } |
Yukarıda 2 farklı ngOnInit metodu yazdım. Farkını şu şekilde açıklayabilirim:
Snapshot Kullanımı:
this.route.snapshot.paramMap.get(‘id’): Bu yöntem, bileşen başlatıldığında URL’deki parametreyi anlık olarak (snapshot) alır.
Eğer bileşen yaşam döngüsünde iken URL’deki id parametresi değişirse (örneğin, kullanıcı /product/1’den /product/2’ye geçerse) bu değişiklik yakalanmaz ve ürün bilgisi güncellenmez.
Genellikle kullanıcının aynı bileşen içerisinde farklı parametrelerle gezinme ihtimali düşükse kullanılır.
paramMap Akışını Dinlemek:
this.route.paramMap.subscribe(…): Bu yöntemde, paramMap bir Observable’dır ve bu Observable’ı subscribe ederek URL’deki parametre değişikliklerini dinleyebiliriz.
Böylece, bileşen yaşam döngüsü boyunca URL’deki id parametresi değiştiğinde bu değişiklik otomatik olarak yakalanır ve ürün bilgisi güncellenir.
Özellikle kullanıcının aynı bileşen içerisinde farklı parametrelerle gezinme ihtimali yüksekse bu yöntem tercih edilir.
Hangi yöntemin kullanılacağı, uygulamanızın ihtiyaçlarına ve kullanıcının nasıl bir interaksiyon içerisinde olacağına bağlıdır. Eğer bir bileşende farklı parametrelerle (örneğin farklı ürün ID’leri ile) gezinme ihtimali yüksekse, paramMap’i dinlemek daha iyi bir seçenektir.
|
1 2 3 4 5 6 7 |
<div *ngIf="product"> <h2>{{ product.name }}</h2> <p>{{ product.description }}</p> <p>Price: {{ product.price }}</p> </div> |
Bu adımlarla, ürün listesi ana sayfada gösterilecek ve bir ürüne tıklandığında detay sayfasına gidilip ilgili ürünün detayları gösterilecek.
Umarım “Angular Routing ve Navigation” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Form İşlemleri: Template-driven ve Reactive Formlar
Yeni bir yazımda görüşmek üzere.
Happy coding!
