Basic Routing

app.module.ts içine modul tanımlamalarından önce bu structure da bir route array’i tanımla ;

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'servers',
    component: ServersComponent
  },
  {
    path: 'users',
    component: UsersComponent
  }
];

Ardından yine app.module.ts içindeki imports array’ine ;

RouterModule.forRoot(appRoutes) 

Routing Outlet#

<div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
	</div>
</div>

Burada kullanılan <router-outlet></router-outlet> module de tanımladığımız route arrayinin içindeki path ve componentlerin nerede bind edileceğini angular’a anlatır. Yani angular route işlemini <router-outlet></router-outlet> bunu gördüğü yerde hangi component hangi route ile beraberse o componenti göstercek.

RouterLink#

Ekle ki yukarda tanımlanan route verileri parse edilebilsin

Kullanmak istediğin route’ları aşağıdaki gibi component.html dosyasına koyabilirsin ;

<ul class="nav nav-tabs">
  <li role="presentation"><a [routerLink]="'/'">Home</a></li>
  <li role="presentation"><a [routerLink]="'/servers'">Servers</a></li>
  <li role="presentation"><a [routerLink]="'/users'">Users</a></li>
</ul>

Diyelim ki /servers linkine gittiğindeki componentin içinde de bir routing işlemi yapılacak. Bu durumda var olan linkin ‘localhost:4200/servers’ olacaktır. Bu durumda /servers içindeki routing aşağıdaki senaryolarda olabilir ;

<a [routerLink]="['/servers']">Reload Page</a>

Bu link ‘localhost:4200/servers’ olarak değerlendirlecek

<a [routerLink]="['servers']">Reload Page</a>

Bu link ‘localhost:4200/servers/servers’ olarak değerlendirlecek

Routing Programmatically

Diyelim ki bi buton veya event ile bir sayfadan diğer sayfaya route yapılacak. Bu esnada @angular/router dan gelen ‘Router’ classını kullan.#

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onLoadServers() {
    this.router.navigate(['/servers']);
  }
}

Ancak bu örnekte router component.html de kullandığımız [routerLink] gibi mevcut linki bilmiyor. Mevcut linki belirtmek için @angular/route dan ActivatedRoute classını import etmeliyiz.

Activated Route

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

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

  constructor(private activatedRoute: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
  }

  onLoadServers() {
    this.router.navigate(['/servers'], {relativaTo: this.activatedRoute});
  }
}

Böylelikle bu sayfanın route ‘unu belirtiyoruz. Sonuç olarak [’/servers’] ‘mı yoksa [‘servers’] olarak mı kullanacağımız anlıyoruz.

Dynamic Route Link

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'servers',
    component: ServersComponent
  },
  {
    path: 'users',
    component: UsersComponent
  },
  {
    path: 'users/:id',
    component: UserComponent
  }
];

En başta bildirdiğimiz arrayin sonuna eklediğimiz users/:id route ’ u aslında dinamic bir route oldu. localhost:4200/users/1 ya da localhost:4200/users/123123 gibi değişkene sahip route lar gönderebilmeye başladık.

Fetching Route Data#

localhost:4200/users/123123 123123 verisini nasıl alırım ?

Route ’lar aşağıdaki gibi değiştirildi

const appRoutes: Routes = [
  {
    path: 'users/:id/:name',
    component: UserComponent
  }
];

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: { id: number, name: string };

  constructor(private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    // Herhangi bir user model'i olmadığı için user objesini initialize etmek için var
    this.user = {
      id: this.activatedRoute.snapshot.params['id'],
      name: this.activatedRoute.snapshot.params['name']
    };
    //--------------------------------------------------------------------------------

    this.activatedRoute.params.subscribe(
      (params: Params) => {
        this.user.id = params['id'];
        this.user.name = params['name'];
      },
      () => {
      }
    );
  }
}

Subscribe durumu her durum için gerekli olmayabilir. Eğer bulunduğunuz sayfadan tekrar aynı sayfaya bi routing işlemi yapıyorsan subscribe kullanmak zorundasın. çünkü aynı sayfada olduğun için angular sadece route linkini değiştiriyor. bu route linki değişim işlemi asenkron bir iş olduğu için subscribe kullanmak zorundasın.

Route linkinde query param ve fragment eklenmesi localhost:4200/users?allowEdit=1#loading gibi linker bakılabilir.

Routing de child routing işlemlerine bakılabilir. Eğer tekrarlayan bir path durumu var ise.

Wildcard Route#

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'servers',
    component: ServersComponent
  },
  {
    path: 'users',
    component: UsersComponent
  },
  {
    path: '**',
    component: HomeComponent
  }     
];

Yukarıda bulunan ** işareti wildcard dır. Belirtilmeyen diğer tüm route lar için HomeComponent yönlendirilir.