Angular 2 & 4 (Component) Routing – Angular ile istemci taraflı rotalama

Angular (2 ve 4 ) içinde basit ve sade bir yapı ile oluşturulmuş yeni bir Routing mekanizmamız var. Aslında genel olarak Component Routing diye adlandırabileceğimiz yapıyı kısaca şu şekilde özetleyebiliriz :

Url değişimlerini takip edip, eğer  bu değişime uyan bir tanımlamamız varsa, ilgili component i sayfaya yazdırmak(Render) ve Url e göre artık etki alanın dışında kalan componentleri sayfadan kaldırmak.

Yukaridaki tanımı biraz daha açıp “app state” kavramıyla da ilişkilendirebiliriz. İster angular olsun ister React, component mimariyi gerçekleyen framework ler , uygulamamızın belirli bir durumda ki haline göre sayfamıza bazı componentleri yazdırıp, bazılarını kaldırmak zorundular. Bunu iki farklı şekilde düşünebiliriz.

  1. Uygulamada URL e bağımlı olmayan yada uygulama da aktif olan adres ne olursa olsun, belirli durumlara göre farklılık gösterecek ve muhtemelen uygulamanın tamamında hep aktif yada gösterilme durumu olan componentlerimiz.
    • Örneğin, Kullanıcı oturum açmış ise, kullanıcıya Login linkini tutan component yerine, hesabını yönetebileceği bir linki tutan “hesabım” componentini yada, “oturumu kapat” componentini göstermek gibi.
    • Bu tarz componentleri “Presentaion component ” olarak sınıflandırabiliriz. Ve genelde, Routing mekanizmasının etkisi dışında kalırlar.
  2. Uygulamamızda, bir özellik yada bir alan için grupladığımız bir küme componentin, toplu oalrak ekrana yazdırılması yada kaldırılması.
    • Routing mekanizması işte bu 2. maddeki işlev için var diye biliriz.

Angular 1 deki gibi HTML 5 ile gelen history.pushState yapısı ile URL değişikliklerini takip eden ve tarayıcı geçmişini yönetebilen basit bir yapı ile esnek bir routing mekanizması sunulmakta. Angular 2/4 içinde HTML 5 mode varsayılan seçim olararak gelmekte, Böylelikle Angular 1 dekine benzer $locationProvider.html5Mode(true)  gibi ufak ayarlara varsayılan olarak ihtiyacımız yok.

Angular (bundan sonra angular tabiri 2 ve 4 sürümü temsil etmekte) ayrıca , rotalarımızı ayrı bir module olarak tutmamızada imkan vermekte. Bu özelliğe ve bize kazandırdıklarına yazının ilerleyen kısımlarında bakacağız.

Component Routing yapısı temel olarak 5 ana parçadan oluşmakta.

  1. Route Configurations tanımlamalarımız  – Routing tanımlamalarını yapacağımız kısım
  2. RouterOutlet placeholder – Coponentlerimizi sayfanın neresinde render edeceğimizi belirleyen yardımcı directive
  3. RouterLink – Uygulamamız içinde özellikle html içerisinde navigasyon yapısını yönetmemize yardım eden directive grubu.
  4. Route servisleri (ActivatedRouted ve Router)  – Uygulamamızda – kod tarafında – navigasyon işlmelerimiz için kullanabileceğimiz yada, url adresi üzerindne parametrelere erişmek gibi bir çok kolaylık sunan iki servis.
  5. Routing Helper Services (Guards, Providers vb.) – ROuting işlemleri esnasında, belirli bir koşula göre farklı işlemler yapmamız gerekn durumlar, örneğin  “kullanıcı login ” olmamış ise erişim kısıtlaması sağlanması, yada bir rotadan bir diğerine geçerken bazı verilerin bir sonraki durak için hazır edilip taşınması vs. gibi işlemlerimiz için kullanabileceğimiz servisler.

Route Tanımlarımız

Yukarıda bahsettiğimiz gibi, ayrı bir modül olarak tutabileceğimiz routing konfigürasyonunu dilersek basit bir “key/value – anahtar/değer” yapısı şeklindede tutabilmekteyiz. İlk olarak basit Object Syntax olarak kullanabileceğimiz bu yapıya bakalım.

Daha rahat anlaşıması için, küçük bir proje oluşturarak devam edelim. (bu noktada, daha hızlı geliştirme adına, angular-cli ı kullanacağım. ) projemizi oluşturmak istedimiz klasör içinde komut satırından, angular-cli ı kullanarak bir proje oluşturalım:

ng new OrnekUygulama

uygulamamız oluşturulduktan sonra cd OrnekUygulama    ile uygulamamızın oluştuğu dizine girip, ng serve komutu ile uygulamaızı geliştirme modu çalıştıralım. İstediğiniz kod editörü ile uygulamamızı açıp devam edelim.

artık http://localhost:4200/ adresinden uygulamamıza erişebiliriz. İlk olarak, şöyle bir ihtiyaçlarımızı yazalım.

  1. Uygulamamız 2 modülden (bir root bir de alt modül “admin” olarak adlandıralım) oluşacak
  2. Her modülümüzün bir kaç alt sayfası olacak.
  3. Admin modülü, uygulamam içinde koruma altında olmalı, ayrıca, uygulamam tarayıcıya ilk yüklendiğinde, admin modüle ilk başlarda ihtiyaıcm olmayacağı için, uygulamamım sadece ihtiyacı olan “root modülü” yüklemek isteyeceğim, böylece performans oalrak dah aiyi bir etkişleşim oluşacak, admin modülü sadece gerektiğinde yüklenecek.

Şimdi ilk olarak root modülümüz roting ihtiyaçlarını karşılayım. Uygulamamızı Angular-CLI ile oluşturduğumuz için, cli bizim için tavsiye edilen bir “proje yapısı” oluşturdu. Yani , bir root modülümüz zaten mevcut. Oluşturduğumuz projenin yapısına bakacak olursak:

resimde kırımızı ile altını çizdiğim iki dosyamızdan ilk “app.component.ts”   uygulamamızdaki root component “tüm componentlerimizin en üst seviyede kapsaycısı” ve “app.module.ts”  uygulamamızın ana / root modülü. Her angular uygulaması en az bir root module ve en az bir root componente sahip olmak zorunda olduğunuda bir kez daha hatırlatalım.

İlk olarak yeni bir component oluşturarak devam edelim, cli ı kullanarak aşağıdaki komutla yeni bir component oluşturalım

ng g component Home

bu komutla birlikte , src klasörü altın yeni bir klasör için “home” componentimiz oluşturulmuş oldu.

şimdi ilk olarak , home componentimize bir kaç link ekleyelim,

OrnekUygulama\src\app\home\home.component.html

<div>
  <a href="">Ana Sayfa</a>
  <a href="">Birinci Sayfa</a>
  <a href="">İkinci Sayfa</a>
</div>

uygulamamıza tarayıcıda bakacak olursak, bu noktada, doğal olarak hiç bir şey göremeyeceğiz çünkü home componentimizi her hangi bir yerde kullanmadık yada henüz roting ile bu componentimizi nerde “render / gösterileceğini” belirtmedik

Bu Menü uygulamamızın tamamında URL den bağımsız olarak gösterileceği için, home componenti, root componentimiz olan, app.component içinde kullanabiliriz.

OrnekUygulama\src\app\app.component.html

<app-home></app-home>

bu son değişikleri kaydettiğimiz , cli otomatik olarak, değişiklikleri algılayıp uygulamamızı , tarayıca yenileyecektir. Bu haliyle

 

artık sayfamızda 3 tane linkimiz gözükür hale gelmiş oldu. şimdi ikinci ihtiyacımız olan, “router-outlet” kısmına bakalım. Linklerimizin tıklanması ile ilgili componentlerin sayfada nerede gösterileceğine karar vermemiz lazım. Normal de gerçek hayatta menü ayrı bir component olarak tutulacak olsada, bizim örneğimizde, menülerimizde kapsayan, home component içinde “router-outlet” i kullanabiliriz.

Böylece, her hangi bir link tıklandığında, ilgili componentimiz, yine home component in içnde linklerin altında gösterilmiş olacak. İlk olarak router outleti home component ekleyelim,

OrnekUygulama\src\app\home\home.component.html

<div>
  <a href="">Ana Sayfa</a>
  <a href="">Birinci Sayfa</a>
  <a href="">İkinci Sayfa</a>
</div>
<br />
<router-outlet></router-outlet>

angular artık, her hangi bir route değişiminde, ilgili değişikleri yansıtacak bir alana sahip olmuş oldu. Değişikliği kaydetip tarayıcıya baktığımızda, bir sorun olduğunu göreceğiz

bu hata ile angular bize “‘router-outlet’ is not a known element” mesajını vermekte. Hatadan anlamamız gereken ise, “Angular, içinde router-outlet” kullanabilmemiz (yada tüm diğer routing yeteneklerini) için , Angular Routin Modulu ne ihityacımız var. Bu noktada, tekrar root modulümüze geri dönüp ilgili modülü import etmemiz lazım.

OrnekUygulama\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule} from "@angular/router";

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module e ilk olarak , kullanacağımız modülü import ettik

import { RouterModule} from "@angular/router";

sonrasında, bu modülü, Angular uygulamamız içinde kullanılabilr hale getirmek için, kaydetmemiz gerekmekte.

imports: [ BrowserModule, FormsModule, HttpModule, RouterModule ]

uygulamamızın root modülü, artık angular routing altyapısını bir modül olarak import etmiş oldu. Artık Routing mekanizması uygulamamız içinde kullanılabilir olması lazım.

Eğer, neden Routing modülün ayrıca import ettiğimiz, neden varsayılan olarak angular a dahil olmadığını merak ediyorsanız, angular bu yapı ile “eğer routing ihiyactı olmayan” bir uygulama geliştirirseniz , kullanmadığınız routing mekanizmasını uygulamanıza eklemeden devam etme imkanı vermekte.

Böylece uygulamanızın boyutunu biraz daha olsun küçülmesi söz ve ayrıca, Angular Routing modülü değilde, başka bir routing mekanizmasını kullanmak isterseniz , bu esneklikde kolayca mümkün kılınmış  olacak.

bu değişiklikten sonra tarayıcımıza baktığımızda , bir şeylerin hala eksik olduğunu ve tarayıcı konsoluna baktığımızda aşağıdaki hatayı göreceğiz.

ERROR Error: No provider for RouterOutletMap!

Burdaki hatamız aslında bazı şeylerin yolunda olduğunu gösteriyor, artık Routing modül uygulamamıza dahil fakat, ne yapacağını, neyi nasıl yöneteceğini henüz bilmiyor. Bunun için, en az bir tane Routing Configuration hazırlayıp , Routing Modülüne bunu bildirmemiz gerekmekte.

Route Configurations

rota tanımlarımızı ve ayarlarnı yapıp bunu Angular Router modülüne bildirmemiz gerekiyor dedik, ilk olarak app klasörü altında “app.routes.ts” isimli bir dosya oluşturarak başlayalım.

Bu dosya içinde , rotalarımızı ve ilgili ayarları tutacağız. İçeriğimiz ilk haliyle :

OrnekUygulama\src\app\app.routes.ts

//rota tanımlamamız için Routes servisi
import { Routes } from '@angular/router';

/** Navigasyon icin kullanacagimiz component lerin referanslari */
import { HomeComponent } from "app/home/home.component";
import { Sayfa1Component } from "app/sayfa1/sayfa1.component";
import { Sayfa2Component } from "app/sayfa2/sayfa2.component";


//rotalarımız
export const appRoutes: Routes = [
  // http://localhost:4200/
  {path: '', component: Sayfa1Component}, 
  // http://localhost:4200/sayfa1
  {path: 'sayfa1', component: Sayfa1Component},
  // http://localhost:4200/sayfa2
  {path: 'sayfa2', component: Sayfa2Component},
  // her hangi bir eşleşme olmaması durumunda
  {path: '**', component: Sayfa1Component}
];

Rota ayarlarımızı teknik olarka ayrı bir yerde tutmak zorunda değiliz ama tahmin edebileceğiniz gibi, dah auygun ve makul olanı bu işi ayrı tutmak. Ayrıca, rota tanımızı tamamen bir modüle dönüştürüp daha yüksek bir izolasyonda sağlayabiliriz. Bu noktada, yukarıdaki kodlara bakacak olursa, ilk önce,  import { Routes } from '@angular/router'; ile rota tanımlamsında kullanacağımız yapıyı import ettik.

Sonrasında bir dizi oluşturup , bu dizi içinde tanımlarımızı yapmaktayız. Bu diziye (route ayarlarımıza) dışarıdan erişmek içinde de export etmekteyiz.  Rota tanımlamalarımız gayet basit

  1. path : hangi url ile eşleşeceği
  2. component: eşleşme sonunda hangi componentimizin kulllanılacağı
  3. ** (iki yıldız ise, tanımlarımızın dışındaki her türlü url için varsayılan olarak çalışacak ) tanımı içermekte. ** ile basitçe “her şey demiş olduk.” 404 not found sayfamız olarak da düşünebilirsiniz.

Rota tanımlarımız ilk haliyle hazır, şimdi bu tanımlarımızı, Angular Router Modülüne bildirmemiz gerekmekte. Böylece Routing mekanizmamız çalışabilsin.

Örnekte kullanabilmek için , iki yeni component sayfa 1 ve sayfa 2 yi oluşturmayı unutmayın. cli ile , ng g component Sayfa1  ve ng g component Sayfa2 şeklinde oluşturabilirsiniz.

Artık root modül içinde Router modülü tanımladığımız kısmı güncelleyerek devam edebiliriz.

OrnekUygulama\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule} from "@angular/router";

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
//sayfalarımız
import { Sayfa1Component } from './sayfa1/sayfa1.component';
import { Sayfa2Component } from './sayfa2/sayfa2.component';

//rota ayarlarımız
import { appRoutes  } from './app.routes'; 

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    Sayfa1Component,
    Sayfa2Component
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

root modülümüz e önce rota tanımlarımızı import ettik

//rota ayarlarımız
import { appRoutes  } from './app.routes';

sonrasında, bu tanımı, Routing Modülüne parametre olarak geçmemiz yeterli olacak,

 RouterModule.forRoot(appRoutes)

RouterModule altında, forRoot isimli bir metodu kullanarak rota tanımlarımızı ilgili noktaya ulaştırmış olduk. Eğer forRoot() un anlamını / görevini merak ettiyseniz yazının devamında buna değineceğiz.

Son değişiklikleri de kaydettikten sonra, artık tarayıcıya tekrar baktığımızda, her şeyin yolunda olduğunu görebiliriz.

Eğer projenizi, Angular CLI ile oluşturmadıysanız, HTML 5 Push state gibi API ları kullanabilmeniz için , index.html <base href=”/”> şeklinde bir ekleme yapmayı unutmayın. <base href> element angular cli tarafından otomatik olarak eklenmekte.

 

 

Bu noktada, sayfa 1 rota tanımızıda aşağıdaki gibi tanımlandığı için ekrana render edilmiş durumda.

{path: ” “, component: Sayfa1Component}

ama başka bir sorunumuzun olduğuda aşikar, hangi linke tıklarsanız tıklayın, sayfamız tamamen yenilenip, hep sayfa1 componenti render edilmekte. Bunun nedeni , linklerimizi Angular a göre hazırlamamış olmamız. Şu anki haliyle linklerimiz, klasik HTML linkleri (a tag leri ve href değerleri var) . Bu sorunu çözmek için kullanabileceğimiz bir yardımcımız mevcut

RouterLink Directives.

Html içinde kullanabileceğimiz bu yardımcı direktifler, Router modülünü uygulamamıza import ettikten sonra kullanıma hazırlar , ilk olarak RouterLink direktifin den başlayalım.

routerLink

html içinde a tag lerine ekleyerek, linkimizi , angular router ın anlayabileceği bir yapıya dönüştürmek için kullanabileceğimiz en temel yardımcımız. Şimdi önceki linklerimizi routerLink ile güncelleyelim

<div>
  <a routerLink="/">Ana Sayfa</a>
  <a routerLink="/sayfa1">Birinci Sayfa</a>
  <a routerLink="/sayfa2">İkinci Sayfa</a>
</div>

routerLink=”/” yada routerLink=”/sayfa1″ şeklinde statik tanımla ile, ilk linklerimizi oluşturmuş olduk. Kullanım olaraka, routerLink direktifimize değer olarak yönlenmek istediğimiz yolu yazıyoruz. Değişikliklerimiz kayıt edip tarayıcıya baktığımızda artık sayfa bir ve sayfa iki arasında navigasyonu sağlamış olduğumuzu görebiliriz.

Bu örnekde, yolu dinamik olarak değil statik olarak “/sayfa1” şeklinde (kendimiz ) yazdık. Bunda bir sakınca olmasada, bazen dinamik olarak yol oluşturup bu yola bazı parametreler ekleme ihtiyacımız olacaktır.

Eğer yol değerini dinamik olarak oluşturmak istersek, routerLink değerini bir [ ] içinde kullanmamız gerek. Önreğin şuna benzer bir url oluşturmak istediğimizi düşünün

/kullanicilar/5/profile/payments (id si 5 olan kullanıcının ödeme profilini görmek istediğimizi düşünebiliriz.) bu durumda, url içinde kullandımığımız “5” ve “payments” değerlerini dinamik olararak aldığımızı varsayalım. (component içinde bu değerlerinin atandığını düşünebilirsiniz.) Oluşturmamız gereken değer:

[routerLink] = ["/kullanicilar”, kullaniciID ,”profile”, profileID

şimdi, menümüze yeni bir link ekleyelim

\OrnekUygulama\src\app\home\home.component.html

<a [r[routerLink] '["["/kullanicilar", kullaniciID ,"profile", profileID]gt;Ödemeler</a>
link içinde kullancağımız iki değişkenide, home component e ekleyelim
OrnekUygulama\src\app\home\home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['['./home.component.css']})
export class HomeComponent implements OnInit {

  kullaniciID = 5;
  profileID = "payments"

  constructor() { }

  ngOnInit() {
  }

}

Bu değişiklikleri kaydetikten sonra, tarayıcada linkimizin ürettiğe değere bakalım:

http://localhost:4200/kullanicilar/5/profile/payments  şeklinde bir adres görüyor olmamız lazım. Fakat bu adres için henüz her hangi bir componet atamadık.  PaymentProfile  isimli bir component oluşturalım,

ng g component PaymentProfile 

sonra, rota tanımlarımızı tuttuğumuz app.routes içinde ilgili eşlemeyi yapalım:

OrnekUygulama\src\app\app.routes.ts

 // http://localhost:4200/kullanicilar/kullaniciID/profile/profileID
  {path: 'kullanicilar/:kullaniciID/profile/:profileID', component: PaymentProfileComponent}

kaydetip tarayicimiza baktigimizda dinamik olarak olusturdugumuz rotanin da basarili bir sekilde calistigini gorebiliriz.

Route Params

Uygulamamızda, url içinde çoğu zaman bazı parametreleri kullanmak zorunda kalırız. Bir önceki örneğimizde, kullaniciID ve profileID isimli iki değişken kullandık. Genel olarak Route Params yada url parametreleri olarak isimlendirdiğimiz  bu değerleri uygulama içinde 3 farklı noktadan ele almak durumundayız.

Birincisi, bu parametrelerin url e eklenmesi, ikincisi, bu parametrelerin rota tanımları içinde yer alması ve son olarak da, bu parametrelerin url den ayıklanıp kod içinde kullanılması.

Parametrelerimizi url içinde eklemeni çok karışık ve kompleks bir tarafının olmadığı yukarıdkai örneğimzide gördük.  İster , değişkenlerle dinamik olarak , ister tamamını statik olarak routerLink directivine geçmemiz yeterli;

<a routerLink=”/kullanicilar/5/profile/payments”>Ödemeler</a> 

yada, dinamik olarak

<a [r[routerLink] ‘[["/kullanicilar”, kullaniciID ,”profile”, profileID]>Ödemeler</a>

ikinci kısımda ise, route config içinde bu değişkenlerimiz için bir yer tutucu tanımlayarak, bu değişkenleri uygulamamız içinde kolayca takip edilebilir ve dinamik olarak değiştirebilir hale getimek. Bu kısımıda şu şekilde tanımladık.

{path: ‘kullanicilar/:kullaniciID/profile/:profileID‘, component: PaymentProfileComponent}

path değeri olarak tanımladığımız kısımda, iki değişken (yada parametre) yi taşıyacağımızı ve bunları “kullaniciID ile profileID”  olarak isimlendirdiğimizi düşünebiliriz. Burda isimlendirme kısmı önemli çünkü , kod (component ve service ) içinden bu isimleri kullanarak taşıdıkları değere ulaşabileceğiz.

Bir başka küçük ayrıntıda, bu değişkenlerin “iki nokta ” ile başladığını unutmamız gerektiği. angular routing mekanızması , : ile başlayan bu değerleri “url değişkenleri / parametreleri” olarak algılayıp ona göre kullanım imkanı sağlayacak.

Son kısım olan, bu parametrelere kod içinden erişim konusu ise bir sonraki yazıda ele alınacak(bu yazıda sadece HTML tarafındaki yapıyı ele almaya çalıştık)

Query parameters and fragments

Bir önceki, başlıkda “rota parametrlerine” baktık,  rota parametrelerini uygulamamız içinde kullanmak için, rota tanımızıda path değeri içinde de tanımlamamız gerekiyourdu.

path: ‘kullanicilar/:kullaniciID/profile/:profileID

fakat uygulamamız içinde bazen , konfigürasyon içinde tanımlanmayan yada url in parçası değilde, url içinde ekstra bilgi olarak veya bir çok url için ortak olarak kullanılması düşünülen veriler de taşımamız gerekecektir. İşte bu ihtiyacımız içinde, “query params ” kullanabilmekteyiz.

Örneğin uygulamamız içinde, bir çok durumda ihtiyacımız olacak “returnUrl” değerini taşıyacak bir değişkene ihtiyacımız olsun (kullanıcı uygulamamızda bir işlem yapmak ister ve biz de ona “login olduktan” sonra yapabilrsin diyip, giriş yapacağı ekrana yönlendiririz, kullanıcının login ekranına nerden geldigini bilirsek, login olduktan sorna tekrar geldiği yere yönlendirebiliriz.)

Query parametrelerini url e eklemek içinde iki farklı yöntem mevcut biri , bu iş için kullanabileceğimiz bir directive olan “queryParams” directive ini kullanmak. Örneğin, aşağıdaki gibi bir url oluşturmak isteyelim

http://localhost:4200/kullanicilar/5/profile/payments?history=true&period=week

yukarıdaki url içinde iki tane ekstra parametre taşımaktayız, history  ve period , bu iki parametrenin zorunlu olmadığını unutmayalım, zaten bu yüzden route params olarak değil query params olarak tanımladık. Böylece, rota tanımlarımız içinde zorunlu bir tanımla yapmak zorunda kalmadık.

Yukarıdaki , url i oluşturmak için, routeParams directive i kullanaraka aşağıdaki gibi bir url tanımlaması yapabiliriz

<a routerLink=”/kullanicilar/5/profile/payments”  [que[queryParams]{history:true , period:’week’}”>Ödemeler </a>

queryParams direktifine, anahtar değer olarak kullanmak / taşımak istediğimiz değerleri vermemiz yeterli.

query parametrelerini , tanımlamanın bir diğer alternatifide , routerLink bu parametreleri, yine anahtar değer olarak eklemek;

<a [rou[routerLink][‘[‘/kullanicilar’, kullaniciID ,’profile’, profileID , {history:true , period:’week’} ]gt;Ödemeler </a>

bu şekilde kullanımın routeParams ile kullanımdan bir farkla ayrılmakta, parametrelerimiz, eski usul ? ‘le baslayip & işaretiyle ayrılmak yerine, yeni nesil ayırma yöntemi olan ; (noktalı virgül ) ile ayrılmakta. Yukarıdaki kullanım, ? ile başlayan & işaretiyle ayrılan eski versiyon yerine, ; ile ayrılmış aşağıdaki formata sahip bir url oluşturacak;

http://localhost:4200/kullanicilar/5/profile/payments;history=true;period=week

iki kullanımda geçerli ve isteğe göre kullanılabilir, sadece, uygulama içinde kisinden birini seçip hep o formatı kullanmak daha uygun olacaktır. Bu arada hangi formatı kullanırsanız kullanın, kod içinde bu değerlere tek / standart bir yöntemle ulaşabileceğiz.

 

https://angular.io/docs/ts/latest/guide/router.html adresinde cok detayli bir sekilde anlatilan Router mekanizmasinin diger parcalarina bir sonraki yazi ile devam edecegiz. İlk kisim olan HTML tarafindaki islemler ve genelde konfigürasyon olarak tanımlayabileceğimiz ilk kisma bakmis olduk. Bu kisim ozet olarak asagidakilerden oluşmuş oldu.

Router Part Meaning
RouterModule Router modülümüz ana görevi uygulamamız içinde ilgili componentleri ekrana yazdırıp, aktif durumdan çıkanları kaldırmak. Bize bir çok hazır directive ve servis sunmakta.
Routes Rota tanımlarımız, hangi url in hangi compoent ile eşleşeceğini, hangi değişkenlerin taşınacağı vs. gibi tanımlarımızı tutacak dizi.
RouterOutlet component lerimizin nerede render edileceği / gösterileceğini belirlemek için kullandığımız, yer tutucu direktif.
RouterLink Uygulamamız içinde, html tarafında, url leri oluşturmak için kullacağımız direktif
Link parameters array Url içinde, taşıyacağımız zorunlu yada opsiyonel değişkenler.

Bir sonraki yazıda inşallah, Router modülü ile kod tarafında neler yapabileceğimize ve diğer bir kaç özelliğe bakacağız.

Kolay Gelsin.

Leave a Reply

Your email address will not be published. Required fields are marked *