Angular ile Router Kullanımı hakkında bilgi edinmek isteyenler için hazırladığımız kapsamlı bir rehber Adım adım anlatımı ile Router'ı nasıl kullanabileceğinizi öğrenebilirsiniz Angular uygulamalarınızda Router'ı kullanmanın faydalarını keşfedin

Angular, web uygulamalarında kullanılan bir platformdur. Angular Router ise kullanıcıların farklı sayfalar arasında gezinmesini sağlar. Bu, tek sayfalık uygulamalar için oldukça önemlidir. Angular Router, uygulamanızda bir sayfadan diğerine geçiş yaparken yeniden yükleme yapmadan hızlı ve düzenli bir şekilde hareket etmenizi sağlar.

Angular Router, birden fazla sayfaya sahip olan uygulamalar için önemlidir ve birçok farklı seçeneği de içermektedir. Yapılandırması ve kullanımı oldukça kolaydır. Angular Router, URL parametrelerini yönetmenizi, sayfaya erişim izni vermenizi, kullanıcıya uyarı mesajı vermenizi ve daha birçok özelliği tamamen özelleştirilmiş bir şekilde kullanmanızı sağlar.

Angular Router Nedir?

Angular Router, Angular uygulamaları için önemli bir araçtır. Router, farklı sayfalar arasında gezinmek ve URL yolu üzerinde gezinme işlevlerini sağlar. Angular Router ile bir sayfanın nasıl görüntüleneceği belirlenebilir ve kullanıcılara farklı sayfalar arasında geçiş yapma imkanı sunulabilir. İçeriklerin yüklenmesi için gereken sorgular da Angular Router sayesinde yönlendirilebilir.

Angular Router'ın en önemli özelliklerinden biri, SPA uygulamalarında (Single Page Application) çoklu sayfa uygulamaları oluşturma imkanı sunmasıdır. Bu sayede, sayfaların her açılışında tekrar yüklenmesine gerek kalmaz ve kullanıcı deneyimi daha iyi hale gelir. Angular Router ayrıca, uygulamalar arasında gezinirken URL yollarını da güncelleştirerek, kullanıcının tarayıcı geçmişinde de doğru bir şekilde kaydedilmesini sağlar.

Angular Router, yönlendirme işlevlerinde kullanabileceğimiz çeşitli stratejiler ve yapılandırmalar sunar. Bu sayede, birden fazla yönlendirme türü oluşturabilir ve uygulama içindeki yönlendirmeleri kolayca yönetebiliriz. Örneğin, HTML5 kullanarak tarihsel bir URL yönlendirme stratejisi oluşturabilir veya hash kullanarak kullanıcıların URL yollarını takip ettirmek yerine, URL kısmını güncelleyebilirsiniz.

Angular Router, güvenli bir yönlendirme deneyimi sunmak için de çeşitli özelliklere sahiptir. Bu özellikler arasında, sayfalara erişim izinleri ve sayfalardan çıkarken kullanıcıya uyarı mesajı gösterme imkanı yer alır. Bu sayede, uygulamanın güvenliği artırılır ve kullanıcıların rastgele sayfalardan çıkması önlenebilir. Toparlayacak olursak, Angular Router, herhangi bir Angular uygulamasının vazgeçilmez bir parçasıdır ve başarılı bir SPA uygulaması oluşturmak için kullanılması gereken bir araçtır.

Router Kurulumu

Angular Router, kolayca yönlendirme, çalışma zamanı modelleri ve dinamik sayfa değişiklikleri gibi birçok özellik sunan bir Angular modülüdür. Bu nedenle, projelerde kullanıcılara hareketlilik getirilmesi ve sayfa geçişlerinin daha verimli yapılabilmesi için bu modülün kullanılması önerilir.

Bununla birlikte, Angular Router'ı kullanmak için öncelikle proje dosyalarına eklenmesi gerekir. Router kurulumu için bazı adımlar şu şekildedir:

Angular Router'ı kullanabilmek için, modüle ihtiyacımız vardır. Bu modülü projeye eklemek önemlidir. Bunun için, aşağıdaki gibi app.module.ts dosyasına ek yapmamız gerekir:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouterModule } from '@angular/router';@NgModule({  imports: [    BrowserModule,    RouterModule.forRoot([      // burası anasayfa için oluşturacağımız rota      { path: '', component: HomeComponent },    ])  ],  declarations: [    AppComponent,    HomeComponent  ],  bootstrap: [ AppComponent ]})export class AppModule { }

Burada, RouterModule kullanılarak rota yapısı tanımlanmıştır. Modül eklenirken ayrıca forRoot() fonksiyonu kullanılmaktadır. Bu fonksiyon, çalışma zamanında rota yapısını oluşturur ve yönlendirici yapılandırmasına gerekli parametreleri ekler.

Router'ın yapılandırılması, projede kullanılacak özelliklerin ayarlanması için önemlidir. Bu işlem, app-routing.module.ts dosyası içinde yapılır. Bu dosya içinde, aşağıdaki gibi bir yapılandırma örneği gösterilebilir:

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { AppComponent } from './app.component';import { HomeComponent } from './home.component';const routes: Routes = [  { path: '', component: HomeComponent },  { path: 'about', component: AboutComponent },  { path: 'contact', component: ContactComponent },  { path: '**', component: PageNotFoundComponent }];@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]})export class AppRoutingModule { }

Bu örnekte, Routes modülü kullanılarak rotalar tanımlanmıştır. Her rota için bir URL ve bir bileşen belirtilir. const routes değişkeni içinde tanımlanan rotalar, AppRoutingModule üzerinde kullanılır. RouterModule, tüm rotalar için kesişen modüller sağlar.

Yukarıda verilen örnek yapılandırmalar, projelere temel bir yönlendirme örneği sağlar. Yapılandırmalar tamamlandıktan sonra, proje Router özelliği ile güncellenir. Böylece sayfa yenilemesi olmadan, yeni sayfalar açılabilir ve kullanıcılara daha iyi bir deneyim sunulabilir.

Modül Ekleme

Angular Router kullanımı için öncelikle projeye gerekli modüllerin eklenmesi gerekmektedir. Bu sayede Router'ın tüm özelliklerinden yararlanabilirsiniz.

İlk olarak, projenizin app.module.ts dosyasını açın ve RouterModule modülünü ekleyin. Bu modül sayesinde Angular Router'ı projenize dahil edebilirsiniz.

Bu örnek kodda, app.module.ts dosyanıza RouterModule modülünü ekledik. Daha sonra uygulamanızda kullanacağınız diğer modülleri de burada ekleyebilirsiniz.

Router modülü, uygulamanıza farklı özellikler eklemek için farklı Router servisleri de içermektedir. Örneğin, RouterOutlet, RouterLink, RouterLinkActive gibi servisler Router modülü tarafından sağlanmaktadır.

Bu şekilde Router modülünü projenize dahil ederek, Angular Router'ın tüm özelliklerinden kolayca yararlanabilirsiniz.

Router Yapılandırması

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [    { path: 'home', component: HomeComponent },    { path: 'about', component: AboutComponent },    { path: 'contact', component: ContactComponent }  ];  @NgModule({    imports: [RouterModule.forRoot(routes)],    exports: [RouterModule]  })  export class AppRoutingModule { }

import { Injectable } from '@angular/core';  import { CanActivate, Router } from '@angular/router';  import { AuthService } from './auth.service';  @Injectable({    providedIn: 'root'  })  export class AuthGuard implements CanActivate {    constructor(private authService: AuthService, private router: Router) {}    canActivate(): boolean {      if (this.authService.isLoggedIn()) {        return true;      } else {        this.router.navigate(['/login']);        return false;      }    }  }

Router Kullanımı

Angular Router, tek sayfalı uygulamalarda kullanıcının farklı sayfalar arasında gezinmesini sağlar. Bu gezinmeleri yapmak için Router Link kullanılabilir. Router Link kullanarak, menülerde ya da butonlarda gezinme linkleri oluşturabilirsiniz. Bunun için şu şekilde bir örnek kod yazabilirsiniz:

<a routerLink="/anasayfa">Ana Sayfa</a>

Burada, "routerLink" etiketiyle sayfanın yönlendirileceği URL belirtilmiştir. Bu örnekte, "anasayfa" URL'sine yönlendiriliyor.

Bunun yanı sıra, Router ile sayfa geçişleri yapıldığında istenilen parametreler de gönderilebilir. Bunun için URL'ye parametre ekleyebilirsiniz. Örneğin:

<a [routerLink]="['/yazilar', yazinumarasi]">Yazılar</a>

Bu örnekte, "routerLink" etiketi içinde "/yazilar" URL'sine gitmesi belirtilmiş ve "yazinumarasi" adlı bir parametre de gönderilerek ilgili yazıya yönlendirilmiştir.

Router aynı zamanda URL üzerindeki parametreleri okuyarak sayfa içerisinde istenilen işlemleri yapabilir. Bunun için de "ActivatedRoute" kullanılır. Örneğin, "id" adlı bir parametrenin bulunduğu URL üzerinden sayfada gösterilecek veri çekilebilir:

constructor(private route: ActivatedRoute, private apiService: ApiService) { }<h3>{{ post.title }}</h3><p>{{ post.body }}</p>ngOnInit() {  const id = this.route.snapshot.paramMap.get('id');  this.apiService.getPost(id).subscribe((data) => {    this.post = data;  });}

Yukarıdaki örnekte, "ActivatedRoute" etiketi ile "id" parametresi alındı ve "getPost" fonksiyonu ile API üzerinden veri çekildi. Bu veriler daha sonra sayfada gösterildi.

Angular Router, bundan başka birçok özellik de sunar. URL parametrelerini ve sayfa erişim izinlerini yönetmek için "CanActivate" ve "CanDeactivate" kullanılabilir. Bu özellikler hakkında daha fazla bilgiyi "Router Güvenliği" başlığında bulabilirsiniz.

Router Link

Angular Router'ın temel işlevlerinden biri, kullanıcının sayfalar arasında gezinmesini sağlamaktır. Bu işlevi yaparken, Router Link kullanımı oldukça önemlidir. Router Link, HTML içinde router navigasyonunu hızlı ve kolay bir şekilde yapmayı sağlayan bir yapıdır.

Router Link'i kullanırken, HTML etiketleri üzerinde href yerine Router Link kullanarak sayfa yönlendirmesi yapılabilir. Ayrıca Router Link'in avantajlarından biri, sayfaların URL'lerinin otomatik olarak düzenlenmesidir. Bu sayede, URL'lerin kullanımı daha okunaklı ve anlaşılır hale gelir.

Router Link kullanımı oldukça basittir. Router navigasyonunu yapacağınız etiketteki href'i Router Link'a çevirmeniz yeterli olacaktır. Örneğin:

Yukarıdaki örnekte, normal href kullanımı yerine Router Link kullanarak sayfalar arasında hızlı ve kolay bir şekilde geçiş yapılabilir. Ayrıca Router Link'in kullanılması sayfalar arasındaki geçişlerde daha hızlı bir erişim sağlar.

Router Link, Angular Router'ın en önemli özelliklerinden biridir. Kullanımı oldukça basit ve kullanıcılara kolaylık sağlar. Sayfalar arasında geçiş yaparken, Router Link kullanarak daha hızlı bir deneyim elde edebilirsiniz.

URL Parametreleri

URL parametreleri, Angular Router ile kullanıcıların URL'lerinde belirli bilgileri taşımasını sağlar. Bu parametreler sayesinde kullanıcılar URL'lerindeki verileri değiştirmek yerine, sadece parametreleri değiştirerek sayfalar arasında geçiş yapabilirler.

Angular Router'da, URL parametreleri iki şekilde kullanılabilir: query parametreleri ve rota parametreleri. Query parametreleri, URL'lerin sonunda verileri tutan parametrelerdir. Örneğin, "/blog?page=2" URL'sinde, "page=2" query parametresidir. Rota parametreleri ise, URL içinde belirli bir alanda bulunan ve değerlerle eşleştiren parametrelerdir. Örneğin, "/users/:id" URL'sinde, ":id" rota parametresidir.

URL parametrelerini kullanarak, kullanıcılara sayfalar arasında geçiş yaparken istedikleri verileri taşıyabilme imkanı verir. Örneğin, bir kullanıcı "users/123" URL'sindeki "123" ID'si sayesinde, belirli bir kullanıcının profil sayfasına erişebilir.

Angular Router, URL parametrelerini yönetmek için ActivatedRoute servisini kullanır. Bu servis sayesinde, rota parametreleri alınabilir ve sorgu parametreleri okunabilir. ActivatedRoute servisi ayrıca bir rota değiştiğinde yeni bir URL alındığında, parametreleri kök öğeden rota bileşenlerine gönderebilir.

URL parametreleri kullanırken, güvenlik konusunda da dikkatli olunmalıdır. Hassas bilgilerin URL'de taşınmaması gerektiğinden, bu bilgiler genellikle gizli veritabanlarında tutulur. Ayrıca, kullanıcıların URL parametrelerini kötüye kullanmasını engellemek için doğrulama ve kısıtlama kontrolleri eklenmesi gereklidir.

URL parametreleri, Angular Router'nın güçlü bir özelliğidir ve kullanıcıların kolayca sayfalar arasında geçiş yapabilmelerini sağlar. Fakat, güvenlik ve gizlilik konularında dikkatli olunmalı ve doğrulama ve kısıtlama kontrollerinin yapılması gerekmektedir.

Router Güvenliği

Angular Router, web sayfası yönlendirmelerini yönetmek için kullanılan güçlü bir araçtır. Ancak Router’ın kullanımı sadece yönlendirmeler yapmakla sınırlı kalmamaktadır. Router, ayrıca uygulamanın güvenliğini de sağlamada önemli bir rol oynar. Bu nedenle, Router kullanırken güvenliği en üst düzeye çıkarmak için bazı adımlar atılmalıdır.

Bir Angular uygulamasında sayfalara erişim haklarının yönetimi için CanActivate kullanımı oldukça yaygındır. Bu yöntem, kullanıcıların yalnızca belirli bir rol veya yetkiye sahip oldukları sayfalara erişebilmelerini sağlar. Böylece, kullanıcılara özel sayfa ve içeriklerin korunması mümkün hale gelir.

CanActivate, Angular Router tarafından sağlanan bir özelliktir ve kullanımı oldukça basittir. Bu işlem için, uygun bir servis oluşturulur ve bu servis Router tarafından kullanılır. Kullanılacak olan servis içerisinde, kullanıcının yetkisinin bulunduğu sayfalara geçiş yapması koşulu belirlenir.

Bir formu ya da sayfayı terk etme sırasında bazı uyarı mesajlarının gösterilmesi bazen kullanıcıların yararına olabilir. Örneğin, kullanıcı bir formu tamamlamadan terk ederse veya sayfayı terk ederse, yapılan değişikliklerin kaybedilmesi sebebiyle sorun yaşanabilir. Bu sorunu önlemek için uyarı mesajları kullanılarak kullanıcıların bu tercihlerine farklı şekillerde yanıt vermesi sağlanabilir.

CanDeactivate, sayfaların terkedilmesi sırasında bu tür uyarı mesajlarının kullanıcılara gösterilmesini sağlar. Bu özellik, Angular Router’ın sağlamış olduğu bir diğer özelliktir. CanDeactivate kullanarak, ciddi sorunların önlenmesi mümkündür ve böylece kullanıcılar daha da hesaplı davranabilirler.

CanActivate Kullanımı

Angular Router'ında CanActivate, bir sayfaya erişim izinlerinin nasıl verileceğini ve kısıtlanacağını belirleyen bir bileşendir. Bu bileşen genellikle kullanıcıların giriş yapmış olup olmadıklarının kontrol edilmesinde kullanılır. Eğer kullanıcı giriş yapmış ise sayfaya erişim izni verilir, aksi takdirde erişim kısıtlanır.

CanActivate kullanmak için öncelikle bir bileşen oluşturmalısınız. Bu bileşen genellikle 'auth.guard.ts' şeklinde adlandırılır. Daha sonra, RouterModule.forRoot () metodunda 'path' değeri olarak ileteceğiniz 'canActivate' özelliğine bu bileşeni atayabilirsiniz.

CanActivate ile sayfaya erişim izni vermek ya da kısıtlamak için bir dizi adım gerçekleştirmelisiniz. İlk önce, giriş yapmış kullanıcıların erişebileceği sayfaların listesini hazırlayın. Daha sonra, her bileşen için erişim izni belirleyin. Bu işlemi genellikle AuthServis üzerinden gerçekleştirirsiniz. AuthServis, kullanıcının giriş yaptığına dair bilgileri saklar ve bileşenlere erişim hakkı verir veya kısıtlar.

Bir bileşene CanActivate bileşenini eklemek oldukça basittir. Sadece bileşenin başına @Injectable () eklemeli ve CanActivate arayüzünü uygulamalısınız. Daha sonra canActitvate () adlı bir metod oluşturmalısınız. Bu metot, sayfa erişimi öncesinde kontrol edilir ve doğru sonuç döndürülemezse sayfa erişimi engellenir.

Bir örnek vermek gerekirse, kullanıcıların sadece üye oldukları bir sayfada profil sayfasına erişebilmesini sağlamak istiyorsunuz. Bunun için, 'auth.guard.ts' bileşenini oluşturun ve oluşturduğunuz bileşeni AppModule'de 'providers' özelliğine ekleyin. Daha sonra, profil sayfasını açmak için kullanılacak olan linkte ActivatedRouteSnapshot ve RouteStateSnapshot özelliklerini kullanarak giriş yapmış kullanıcının kimliği doğrulanır. Eğer kullanıcı giriş yapmışsa profil sayfasına erişim izni verilir, aksi takdirde erişim kısıtlanır.

CanDeactivate Kullanımı

Angular Router sayesinde kullanıcıların farklı sayfalar arasında gezinmesi ve uygulamanın farklı bölümlerine giriş yapması mümkündür. Bu özellik sayesinde kullanıcı deneyimi önemli ölçüde geliştirilebilir.

Bununla birlikte, kullanıcıların bir sayfadan diğerine geçerken bilinçsizce hareket etmeleri bazen uygulamanın çalışmasını etkileyebilir. Bu nedenle, Angular Router’ı kullanarak sayfadan çıkmadan önce kullanıcıya bir uyarı mesajı vermek yararlı olabilir.

Bu işlem için Angular’ın sağladığı CanDeactivate arabirimi kullanılabilir. Böylece, sayfadan çıkmadan önce kullanıcıya bir uyarı mesajı gösterilerek hata yapma olasılığı minimize edilebilir.

Böylece, kullanıcılar bir sayfadan diğerine geçerken uyarı mesajı ile karşılaşacak ve hata yapmaları önlenmiş olacaktır. Bu nedenle, Angular Router’ı kullanırken CanDeactivate arabirimini kullanarak sayfadan çıkmadan önce kullanıcıya bir uyarı mesajı göstermek iyi bir fikir olabilir.