Angular’da Routing

Yusha Kuralay - 2023/08/05

Angular'da dinamik routing'in ne olduğunu, nasıl kurulacağını ve nasıl uygulanacağını inceleyeceğiz

Örnek bir proje ortaya koymak için Ürün listesi sayfası (Products list) ve Ürün detayı sayfası (Product detail) arasında dinamik geçişler sağlayacağız. Temel amacımız Listedeki bir ürünün detay sayfasında gittiğimizde o ürüne özel URL uzantısına gitmek ve gittiğimiz sayfada o ürünün detaylarını kullanıcıya aktarmaktır.

Şu anda sıfırdan bir angular projesi kurduğumuzda angular CLI, projeye routing eklenip eklenmeyeceğini sorar. Bu blogda yazısında, mevcut bir Angular projesine routing eklemeyi göstermek için sıfırdan bir proje oluşturmayacağız. Bunun yerine var olan bir projeye manuel olarak routing eklemeyi göstereceğim.

1. Component’larımızı oluşturalım

ng g c components/productsList
ng g c components/productDetail

1. Projenin istenilen yerine ” products.json “ dosyası oluşturup içini aşağıdaki örnek yapıyla dolduralım.

[  
 {
    "id": "qwe-123-rty-456",
    "category": "phone",
    "brand": "apple",
    "model": "iphone 14 pro max",
    "price": 1000
  },
  {
    "id": "asd-568-fgh-654",
    "category": "laptop",
    "brand": "apple",
    "model": "air m1",
    "price": 1500
  },
  {
    "id": "zxc-078-vbn-534",
    "category": "phone",
    "brand": "samsung",
    "model": "s23",
    "price": 800
  },
  {
    "id": "fgh-374-rty-243",
    "category": "phone",
    "brand": "samsung",
    "model": "s22",
    "price": 700
  },
  {
    "id": "hjk-654-vbn-530",
    "category": "phone",
    "brand": "apple",
    "model": "iphone 13 pro max",
    "price": 900
  }
]

1. tsconfig.json içerisine gidip aşağıdaki kodları ekleyelim. Bu sayede component’larımızın içine JSON formatındaki verimizi ekleyebileceğiz.

"compilerOptions": {
	. . .
"resolveJsonModule": true,    
"esModuleInterop": true
}

1. Routing modelimizi oluşturalım

ng generate module app-routing --flat --module=app

oluşan dosyanın içine gidip aşağıdaki kodu ekleyelim.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsListComponent } from './components/products-list/products-list.component';
import { ProductDetailComponent } from './components/product-detail/product-detail.component';

const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Bundan sonra ise path’lerimizi tanımlamak ve html tarafına routing’i yansıtmak kaldı.

const routes: Routes = [
  { path: '', component: ProductsListComponent },

  {
    path: 'product/:id',
    component: ProductDetailComponent,
  },

  { path: '**', redirectTo: '' },
];

Routes array içerisine objeler koyup path: '' kısmına URL uzantımızı ve … kısmına da component’ımızın adını yazıyoruz.

'product/:id' uzantısı /product/1 gibi bir uzantıya götürecektir bizi. Yani path daki “ :id ” routing’imizi dinamik hale getirir ve son olarak path: '**' yazma sebebimiz var olmayan bir URL’e gidilirse kullanıcıyı “ “ URL’ine yeniden yönlendirsin. Yeniden yönlendirmesini redirectTo: '' yazarak sağlıyoruz.

1. app.component.html dosyasına giderek içeriği tamamen siliyoruz ve aşağıdaki kodu ekliyoruz

<router-outlet></router-outlet>

bu kodu yazarak routing tamamen aktif hale geliyor

1. ng serve -o yazarak programın live halini browserdan inceleyebilirsiniz. Karşılaşmamız gereken ekran product list component’ın çalışıyo yazısıdır.

2. products-list.ts dosyasında, önceden oluşturduğumuz datayı import ediyoruz. Sonrasında o datayı products diye bir variable oluşturup içine ekliyoruz.

import { Component } from '@angular/core';
import productsData from '../../../assets/products.json';
@Component({
  selector: 'app-products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.css'],
})
export class ProductsListComponent {
  products = productsData;
}

sayfa en son böyle gözükmelidir.

1. products-list.html dosyasında ise bir div bir başlık ve ondan sonrasında bir ul listesi oluşturup içindeki item’ları *ngFor ile basarak ürünlerimizin çıktısını alıyoruz. Liste item’ı içerisine ürünün modelini ve markasını yazdırıp en sonuna detail listesine girmesi için bir button koyuyoruz. button’ı çevreleyen bir tagı oluşturarak içerisine

routerLink="product/{{ product.id }}"

Şeklinde URL yapısını tanımlıyoruz

Sayfanın son hali aşağıdaki gibi gözükmektedir, eğer isterseniz class isimlerini de ekleyerek alttaki CSS’i kendi kodunuza kopyalayıp şık olmasada daha belirgin bir görüntü çıktısı alabilirsiniz.

<div class="container">
  <h1>Products List</h1>
  <ul>
    <li class="product-card" *ngFor="let product of products">
      <h1>{{ product.model }}</h1>
      <h2>{{ product.brand }}</h2>
      <a routerLink="product/{{ product.id }}">				  		<button>See More</button>							</a>
    </li>
  </ul>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  width: 100%;
  height: 100%;
  padding: 0 50px;
}

li {
  background-color: rgb(235, 235, 235);

  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 15px;
  margin: 10px;

  flex-direction: column;
  min-width: 200px;
}

Button’lara tıkladığımızda URL uzantısına bakacak olursak ürünün id’sine göre bir URL oluştuğunu göreceğiz. Şimdi bu sayfanın içini hızlıca doldurup bir tane de ana ekrana dönmek için button hazırlayalım.

1. detail.ts dosyasına bu kodları ekleyerek findSelectedProduct() fonksiyonu sonucunda seçilen ürünü bulup ona özel bilgileri sayfamızda paylaşmak üzere kenara ayıklayabiliriz.

(farklı ve daha verimli fonksiyonlar kullanabilirsiniz)

. . .
export class ProductDetailComponent implements OnInit {
  products: any;
  selectedProduct: any;

  ngOnInit(): void {
    this.products = productsData;

    this.findSelectedProduct();
  }

  findSelectedProduct() {
    let url = window.location.href;
    let id = url.split('/')[4];

    this.products.forEach((product: any) => {
      if (product.id == id) {
        this.selectedProduct = product;
      }
    });
  }
}

Ayıklama işlemi bittikten sonra elimizde selectedProduct adında bir obje olacaktır .html uzantılı dosyaya gidip aşağıdaki kodları yazdıktan sonra CSS’i de ekliyorum.

<div class="container">
  <a routerLink="/"><button>Back to home</button></a>
  <h1>Product Details</h1>
  <div class="product-card">
    <p>
      Category:
      <span>{{ selectedProduct.category | uppercase }}</span> <br />
      Brand: <span>{{ selectedProduct.brand | uppercase }} </span><br />
      Model: <span>{{ selectedProduct.model | uppercase }} </span><br />
      Price:
      <span>{{
        selectedProduct.price | currency : "CAD" : "symbol-narrow" : "1.0"
      }}</span
      ><br />
    </p>
  </div>
</div>

span {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.2rem;
}

Gördüğünüz gibi bir back to home button u oluşturarak URL’ini “/” boş ayarlıyorum ve böylelikle button a bastığımızda sitenin ana sayfasına yönlendirilmiş oluyoruz.

Ana sayfayı kurcalarsak tıkladığımız ürün id’sine özel link uzantısına gidip o sayfada ürün detaylarını görebiliriz.

Bu blog yazımda Angular da routing nedir nasıl kurulur ve site içerisinde ufak bir örnekle nasıl kullanılabileceğine örnek göstermek istedim.

Okuduğunuz için teşekkür ederim. Bir sonraki blog yazımda görüşmek üzere. Mutlu kodlamalar.

Yusha Kuralay - [e-mail]