Angular 6 – Multiple Layout Kullanımı

Merhaba,

Angular, Single Page Application uygulamalar üretebilmemiz için geliştirilmiş bir mimaridir. Dolayısıyla uygulama tasarımı, Angular mimarisinin yapısı gereği tek bir şablon üzerinden değişiklik göstermeksizin yayını sağlamakta ve geliştiriciler açısından da ilgili şablon dışına çıkılmasına pekte müsade edilmemektedir. Bizler bu içeriğimizde, Angular uygulamalarında ilgili şablonun dışına çıkıp, Single Page Application yapısını aşarak birden fazla şablon üzerinde Multiple Page Application şeklinde nasıl çalışma sergilenebileceğini inceleyecek ve pratik olarak örneklendireceğiz.

Öncelikle şablon teriminin web terminolojisindeki karşılığı olan “layout” kelimesiyle ilişkili olduğunu hatırlatarak başlayalım. Bu içeriğimizdeki temel amacımız, single page application olarak tasarlanan Angular mimarisinde multiple layout kullanımının nasıl olduğunu irdelemek ve değerlendirmek olacağından dolayı bir bootstrap ve jquery modüllerinin entegre edildiği sade bir proje üzerinden basit bir senaryo ile anlatım sergilememiz yeterli olacaktır.

Angular’da multiple layout kullanabilmek için öncelikle ilk iş uygulamada kullanılacak layout’ları tasarlamak gerekmektedir.

ng g c layout1 --spec false
ng g c layout2 --spec false

Bizler örneklendirmemizde “layout1” ve “layout2” olmak üzere iki adet layout tasarlayacağız.
Layout1;

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" routerLink="example1">Example 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="example2">Example 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="layout2/example3">Layout 2</a>
  </li>
</ul>
<router-outlet></router-outlet>

Layout2;

<div class="row col-sx-4">
  <ul class="list-group">
    <li class="list-group-item"><a routerLink="example3">Example 3</a></li>
    <li class="list-group-item"><a routerLink="example4">Example 4</a></li>
    <li class="list-group-item"><a href="layout1/example1">Layout 1</a></li>
  </ul>
  <router-outlet></router-outlet>
</div>

Yukarıdaki yapıları incelerseniz eğer her ikiside farklı tasarıma sahip iki layout oluşturulmuştur. Uygulama altyapısını çoklu layoutlar üzerine kurgulayabilmek için tek dikkat edilmesi gereken nokta route yapılanmasıdır. Layout olarak tasarlanan componentleri ana component(parent) olarak düşünürsek eğer o layout altında render edilecek componentleri ise child olarak düşünmemiz yeterli olacaktır. Şöyle ki;

export const appRoutes: Route[] = [
  {
    path: "", redirectTo: "/layout1", pathMatch: "full"
  },
  {
    path: "layout1", component: Layout1Component, children: [
      { path: "example1", component: Example1Component },
      { path: "example2", component: Example2Component }
    ]
  },
  {
    path: "layout2", component: Layout2Component, children: [
      { path: "example3", component: Example3Component },
      { path: "example4", component: Example4Component }
    ]
  }
];

Yukarıdaki route yapılanmasına göz atarsanız eğer “Layout1Component” ve “Layout2Component” componentleri ana component olarak boş path dizisine tanımlanmakta, bunların childlarına ise altlarında render edilecek olan componentler atanmaktadır. Bu ayarlamadan sonra uygulamanın ana componentinin görüntüsü olan “app.component.html” dosyasında sadece aşağıdaki yönlendiricinin tanımlanması yeterli olacaktır.

<router-outlet></router-outlet>

Uygulamayı serve edersek eğer;
Angular 6 – Multiple Layout Kullanımı
görselde olduğu gibi birden fazla layout şablonunu Angular uygulamasına yedirmiş bulunmakta ve multiple page application olarak uygulamada yola devam edecek şekilde temellendirmede bulunmuş olmaktayız.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.