Angular 4 Routing Mekanizması

Merhaba,

Günümüzde web uygulamalarının olmazsa olmaz özelliklerinden birisi adres yapılanmasını sağlayan Routing mekanizmasıdır. Dolayısıyla Angular 4 mimarisinin de, uygulama içi adreslerini SEO dostu diye nitelendirilen daha anlaşılır ve okunabilir bir şekilde tasarlamamızı sağlayan Routing mekanizması mevcuttur. Dolayısıyla bu makalemizde Angular 4 Routing mekanizmasını konu edinecek, teorik ve pratik olarak mimariyi inceleyip, değerlendireceğiz.

O halde vakit kaybetmeden gelin hemen başlayalım…

Angular’da Routing mekanizmasını kullanabilmek için ilk olarak modül sınıfımızı barındıran “app.module.ts” dosyasına “Routes” ve “RouterModule” sınıflarını import etmemiz gerekmektedir. Burada “Routes” sınıfı, yönlendirmeyle birlikte yapılandırılmış urlleri tutan bir koleksiyon görevi görmektedir. “RouterModule” sınıfı ise yapılandırılmış url yapılarını(routes) alıp modüle import edilmesini sağlamakta ve bu şekilde uygulama boyunca adres yönlendirmelerinde tanınacak şablonları uygulamaya tanıtmaktadır.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Routes, RouterModule } from "@angular/router";
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { ErrorComponent } from './error/error.component';

export const AppRoutes: Routes = [
  { path: "", redirectTo: "/asayfasi", pathMatch: "full" },
  { path: "asayfasi", component: AComponent },
  { path: "bsayfasi", component: BComponent },
  { path: "csayfasi", component: CComponent },
  { path: "**", component: ErrorComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent,
    CComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(AppRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Şimdi siz yukarıdaki kod bloğunu incelerken biryandan bende izahatını yapayım. Dikkat ederseniz “Routes” tipinden “AppRoutes” isimli bir sabit değişken tanımlanmıştır ve içerisine routelar oluşturulmuştur. Bu oluşturulan routeları daha detaylı inceleyebilmek için sabit değişkeni komple aşağıya alalım;

export const AppRoutes: Routes = [
  { path: "", redirectTo: "/asayfasi", pathMatch: "full" },
  { path: "asayfasi", component: AComponent },
  { path: "bsayfasi", component: BComponent },
  { path: "csayfasi", component: CComponent },
  { path: "**", component: ErrorComponent }
];

Görüldüğü üzere oluşturulan her route içerisinde “path” ve “component” propertyleri bulunmakta, bunların yanında “redirectTo” ve “pathMatch” propertyleride kullanılmaktadır. Bu propertyleri tek tek ele alırsak eğer;

  1. path
    Yönlendirmenin sağlanabilmesi için tetiklenecek olan adres belirtilmektedir.
  2. component
    “path” propertysindeki adres tetiklendiği vakit hangi componente yönlendirileceğini belirtmektedir.
  3. redirectTo
    Eğer ki “path” özelliğinde olduğu gibi herhangi bir adres tetiklenmiyorsa bu ana dizin manasına gelmektedir. Dolayısıyla bir adrese yönlendirme yapmak mantıklı olacaktır. İşte bu özellik ile ana dizin tetiklendiğinde sanki kendisindeki adres tetiklenmiş gibi davranılacak ve ilgili adresin belirtilen componentine yönlendirme sağlanacaktır.

“AppRoutes” sabit değişkeninde tanımlanan bu url yönlendirmelerini(routes) modüle tanıtmak için “RouterModule.forRoot(AppRoutes)” komutunu modüle imports ediyoruz.

Örneğimizde “AComponent”, “BComponent”, “CComponent” ve “ErrorComponent” olmak üzere dört adet componentin tanımlandığını görüyorsunuz. Yazımızın ileriki bölümlerinde bu componentlere yapılan yönlendirmelerin örneklerini göreceğiz.

Yönlendirici Bağlantı Oluşturma

Yapmış olduğumuz bu routes yapılarını kullanabilmek için bağlantı oluşturmamız gerekecektir.

Angular 4’te “<a href=…” ile bağlantı oluşturmamaktayız!

Angular’da url oluştururken “routerLink” özelliği ile yönlendirici bağlantılar oluşturabilmekteyiz.

<div class="row">
  <div class="list-group">
    <a routerLink="asayfasi" class="list-group-item list-group-item-action active">ASayfası</a>
    <a routerLink="bsayfasi" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="csayfasi" class="list-group-item list-group-item-action">CSayfası</a>
    <a routerLink="errorsayfasi" class="list-group-item list-group-item-action">ErrorSayfası</a>
  </div>
</div>

Görüldüğü üzere “routerLink” özelliği ile linklere adreslerini belirtmiş bulunmaktayız.
Angular 4 Routing Mekanizması
Gördüğünüz gibi linklere adresler verilmiştir lakin tıklandığı zaman yönlendirmeyle ilgili herhangi bir sonuç gelmemektedir. Şöyle bir düşünürsek bunun sebebinin, “Layout” ya da “Master Page” mantığında değişken bir alan seçmememizden kaynaklandığını akledebiliriz.

Dolayısıyla Angular’da yönlendirici bağlantılara tıklandığı vakit değişkenlik gösterecek alanı “<router-outlet></router-outlet>” etiketi ile işaretlememiz gerekecektir.

<div class="row">
  <div class="list-group">
    <a routerLink="asayfasi" class="list-group-item list-group-item-action active">ASayfası</a>
    <a routerLink="bsayfasi" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="csayfasi" class="list-group-item list-group-item-action">CSayfası</a>
    <a routerLink="errorsayfasi" class="list-group-item list-group-item-action">ErrorSayfası</a>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Örnek olarak yukarıdaki gibi bir alanı değişken alan olarak belirliyor ve ilgili “<router-outlet></router-outlet>” etiketini ekliyorum.
Angular 4 Routing Mekanizması
Tabi herşey yolunda gidiyor ama sanırım tıklanan linkin hangisi olduğunu belirtirsek herşey daha da güzel olurdu… Bu işlem için “routerLinkActive” özelliğini aşağıdaki gibi kullanmamız yeterli olacaktır.

<div class="row">
  <div class="list-group">
    <a routerLink="asayfasi" routerLinkActive="active" class="list-group-item list-group-item-action">ASayfası</a>
    <a routerLink="bsayfasi" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="csayfasi" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfası</a>
    <a routerLink="errorsayfasi" routerLinkActive="active" class="list-group-item list-group-item-action">ErrorSayfası</a>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Angular 4 Routing Mekanizması

Oluşturulan Adresin Güvenliğini Sağlama

Routes olarak tasarlanan yönlendirme adreslerindeki mantık; “verilen değer ilgili adres içerisinde geçiyorsa” şeklinde işlemektedir. Yani;
Angular 4 Routing Mekanizması
görüntüyü incelerseniz eğer “BComponent”ine yönlendirilen “bsayfasi”, “localhost:4200/bsayfasi/xyz” adresi içerisinde geçtiği için “BSayfası” linki üzerinde bir tetikleme söz konusudur. Bu durumda ilgili linkin tam tamına eşdeğer olmasını istiyorsanız aşağıdaki gibi “routerLinkActiveOptions” özelliğiyle yönlendirme işlemini birebir hale getirebilir ve adresin güvenirliğini sağlayabilirsiniz.

<div class="row">
  <div class="list-group">
    <a routerLink="asayfasi" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">ASayfası</a>
    <a routerLink="bsayfasi" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">BSayfası</a>
    <a routerLink="csayfasi" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">CSayfası</a>
    <a routerLink="errorsayfasi" [routerLinkActiveOptions]="{exact:true}" routerLinkActive="active" class="list-group-item list-group-item-action">ErrorSayfası</a>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

Angular 4 Routing Mekanizması
Gördüğünüz gibi “[routerLinkActiveOptions]=”{exact:true}” özelliği ile tasarlanan routestaki adres ile tarayıcıdaki adresin birebir eşdeğer olması sağlanmıştır.

ModuleWithProviders İle Routing

Aslında makalemizi burada sonlandırabiliriz. Lakin en başa dönerek “app.module.ts” içerisinde yapmış olduğumuz çalışmaları tek bir dosya içerisinde yaparak daha düzgün bir kod inşasının nasıl yapılacağına
dair değinmek ve bu şekilde içeriği noktalamak istedim.

Uygulama içerisinde oluşturulan herhangi bir dosya içerisinde “@angular/core/src/metadata/ng_module” dizinindeki “ModuleWithProviders” isimli nesneyi import ederek aşağıdaki gibi farklı bir dosya içerisinde çalışmanızı gerçekleştirebilirsiniz.

import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { Routes, RouterModule } from "@angular/router";
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { ErrorComponent } from './error/error.component';

export const AppRoutes: Routes = [
    { path: "", redirectTo: "/asayfasi", pathMatch: "full" },
    { path: "asayfasi", component: AComponent },
    { path: "bsayfasi", component: BComponent },
    { path: "csayfasi", component: CComponent },
    { path: "**", component: ErrorComponent }
];

export const RoutingList: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

Bu şekilde routes yapıları oluşturulduktan sonra en sonuncu satıra dikkatinizi verirseniz eğer “RouterModule.forRoot(AppRoutes)” komutu ile yönlendirmeler uygulamaya dahil ediliyor ve bunu “ModuleWithProviders” tipindeki nesne aracılığıyla gerçekleştiriyor.

Şimdi geriye tek “app.module.ts” dosyasında bu “RoutingList” sabitini imports olarak vermek kalıyor.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { RoutingList } from './app-routes';

import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { ErrorComponent } from './error/error.component';


@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent,
    CComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    RoutingList
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 13 Mayıs 2018

    […] önceki Angular 4 Routing Mekanizması başlıklı makalemde Angular’da Routing mekanizmasını incelemiştik. Bu içeriğimizde ise […]

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.