Giriş
Angular uygulamaları bugünlerde oldukça yaygındır. Bu uygulamalar, Tek Sayfalı Uygulamalar (SPA) konseptiyle oluşturulur. Bu tür uygulamalarda, bileşenler kullanıldığı için web sayfaları arasında yönlendirme geleneksel web sitelerinden farklıdır. Angular'da, uygulama genelinde yönlendirme yapmak için RouterLink kullanmanız gerekir. RouterLink bir direktiftir ve bileşen sınıfları arasında gezinmek için Router.navigate ve Router.navigateByURL yöntemlerini sunar.
Bu eğitimde, şunları inceleyeceğiz: RouterLink, Router.navigate, ve Router.navigateByURL kod örnekleriyle birlikte.
RouterLink
HTML'de bir bağlantı normalde aşağıdaki gibi bir çapa (anchor) etiketi kullanılarak eklenir: <a> :
|
1 2 3 |
<a href="/sample"> Örnek HTML bağlantısı. </a> |
Bu örnek bağlantı, kullanıcıyı /sample sayfasına yönlendirecektir. Ancak yukarıda belirtildiği gibi, Tek Sayfalı bir uygulamanın (SPA) bağlantı verilecek farklı sayfaları yoktur. Bunun yerine, kullanıcıya gösterilecek farklı görünümleri veya bileşenleri vardır.
Bir kullanıcının gezinmesine ve görünümü değiştirmesine izin vermeniz gerekiyorsa, RouterLink direktifini kullanmanız gerekir: href:
|
1 2 3 |
<a routerLink="/users/example"> Dize kullanan bağlantı. </a> |
Bu RouterLink örneği, kullanıcıyı /users/example adresindeki bileşene yönlendirecektir. Farklı URL segmentleri, aşağıdaki örnekte olduğu gibi bir dizi içinde de aktarılabilir:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Bir dizi ile bağlantı örneğiwith an array. </a> |
Bu iki örnek farklı şekilde biçimlendirilmiştir, ancak yine de şu adresteki aynı bileşene yönlendirilecektir: /users/example.
-
Göreceli Yol
RouterLink, göreceli URL'lerin belirtilmesine olanak tanır. Daha yüksek yönlendirme seviyelerine çıkmak için ../ kullanabiliriz. Bunu nasıl yapabileceğimiz aşağıda gösterilmiştir:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Bir seviye yukarı giden bağlantı. </a> |
Yukarıdaki örnekte, kullanıcı /users/posts konumundaysa, yönlendirme kullanıcıyı /posts/parent konumuna götürecektir. URL'leri ./, ../ kullanarak göreceli olarak veya gerekirse başında eğik çizgi olmadan da belirtebilirsiniz.
-
Parametreler
Rotalar arasında veri aktarmanız gereken senaryolar olabilir. Basit bir örnek, kullanıcının formu doldurması ve daha fazla ayrıntı için onu formun bir sonraki bölümüne götürmenizdir.
Parametreleri aktarmak için, verileri kapsülleyen bir nesne URL segmentleri listesinde iletilir:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Parametreli bağlantı. </a> |
Yukarıda, Router şu adrese yönlendirecektir: /users;display=sample/xyz.
-
Adlandırılmış Outlet'ler
Adlandırılmış router outlet'leri, basitçe adları olan router outlet'leridir. Bunun için koda bakalım:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Yan outlet'li bağlantı. </a> |
Bu örnekte, xyz segmenti side adındaki outlet'e yerleştirilecektir. Aşağıdaki gibi birden fazla adlandırılmış outlet de belirtebiliriz:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Birinci ve ikinci outlet'leri içeren bağlantı. </a> |
Bu, first segmentini abc ile değiştirecek ve second segmentini ise şu değerle değiştirecektir: xyz.
Router
Angular'da, Router sınıfı, rotaları tanımlamak ve bunlar arasında gezinmek için kullanılır. Bu, iki yöntemle gerçekleştirilir: Router.navigate ve Router.navigateByUrl. Bu yöntemlerin her ikisi de bir promise döndürür. Bu promise üç değere sahip olabilir: true, false, veya null.
-
Değer, true olduğunda gezinme başarılıdır.
-
Değer, null olduğunda gezinme yoktur.
-
Ve false eğer herhangi bir nedenle gezinme başarısız olursa.
Bu yöntemlerin uygulamanızda kullanılabilir olmasını istiyorsanız, öncelikle Router sınıfını bileşen sınıfınıza içe aktarmanız gerekir:
|
1 |
import { Router } from '@angular/router'; |
Ardından, bu Router nesnesini yapıcıya (constructor) bağımlılıklar arasına enjekte etmeniz gerekir:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Bu kurulumla, uygulamanızda Router.navigate ve Router.navigateByUrl yöntemlerini kullanmaya hazırsınız.
Router.navigate
The Router.navigate yöntemi bir URL segmentleri dizisi kabul eder. Temel bir Router.navigate kodu örneğine bakalım:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Son olarak, Router.navigateByUrl yöntemine bakalım. Bu yöntem, Router.navigate yöntemine benzer ancak URL segmentlerini kabul etmek yerine, URL'yi belirten bir dize kabul eder. Bu gezinmenin mutlak olması ve başında / başlangıcında olmalıdır:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Yukarıdaki kod, kullanıcıyı /users;all=true sayfasına yönlendirecektir.
Sonuç
Bu eğitimde, RouterLink kullanarak Angular uygulamalarında nasıl gezinileceğine baktık. Angular uygulamalarında yönlendirme (routing), Tek Sayfalı (Single-Page) olmaları nedeniyle geleneksel web uygulamalarından biraz farklıdır. RouterLink'i ve işlevlerini bilmek, geliştiricilerin sağlam yönlendirmeler oluşturmasına yardımcı olabilir.
Angular uygulamaları, çalışma zamanı olarak Node.js kullanır. Node.js hakkında daha fazla bilgi edinmek ve Node.js uygulamalarını nasıl dağıtacağınızı öğrenmek istiyorsanız, aşağıdaki eğitimlere göz atabilirsiniz:
- Ubuntu 18.04 üzerinde Node.js nasıl kurulur
- Node.js Uygulamalarını Kurma: Ubuntu 20.04 üzerinde Node.js ile Üretim Görevleri Nasıl Gerçekleştirilir
- Ubuntu 20.04 üzerinde Docker ile bir Node.js (Express.js) Uygulaması Nasıl Dağıtılır
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.