Ana içeriğe atla

Angular uygulama içinde birden fazla layout kullanımı

Angular uygulamamız içerisinde login/logout sayfalarında farklı layout, uygulama içinde farklı layout, hatta farklı bölümler için de birden fazla layout kullanmak isteyebiliriz.

Bu durumlar için yapmamız gereken işlem her bir layout'umuz için farklı bir component oluşturmak ve Route dosyamızı aşağıdaki şekilde güncellememiz yeterlidir.

Şimdi diyelim ki 2 adet layout kullanacağız. Layotlarımızdan biri sadece bir layout olsun adına BasicLayoutComponent , diğeri de genel olarak projemizde kullanacağımız bir layout olsun header footer bilgileri içersin. Bu layoutumuzun adına da PortalLayoutComponent diyelim.

Layoutları da kullanan login ve index adında iki component oluşturalım.

Componentleri aşağıdaki komut satırı ile oluşturabiliriz.
 - ng generate component BasicLayout
 - ng generate component PortalLayout
 - ng generate component Index
 - ng generate component Login

Ardından app-routing.module.ts dosyamızı aşağıdaki şekilde düzenliyelim.

app-routing.module.ts
const routes: Routes = [
  {
    path: '', component: PortalLayoutComponent,    children: [
      {path: '', component: IndexComponent},      {path: 'main', component: IndexComponent}]
  },  {
    path: '', component: BasicLayoutComponent,    children: [{path: 'login', component: LoginComponent}]
  }];
@NgModule({
  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]
})
export class AppRoutingModule {
}


BasicLayout ve PortalLayout html dosyaları içerisine aşağıdaki kodu ekliyoruz.Bu kod içerisine bizim bu layout u kullanan component içeriklerimiz gelecektir. Bu tag in altına ve üstüne bu layout un içereceği htmlleri, componentleri ekleyebiliriz.

basic-layout.component.ts ve portal-layout.component.html dosya içeriklerine eklenecek standart tag.
<router-outlet></router-outlet>


Yukarıdaki işlemi yaptığımızda index i açtığımızda portalLayout içerisindeki html, login i açtığımızda ise BasicLayoutComponent layout u görünecek.

Bu blogdaki popüler yayınlar

Cannot resolve the collation conflict between "Turkish_CI_AS" and "SQL_Latin1_General_CP1_CI_AS" in the equal to operation.

iki ayrı veri tabanı içindeki tablolar ile işlem yapılmak istendiğinde eğer dil sorunu çıkıyor ise sorgumuzun sonuna 'COLLATE TURKISH_CI_AS' sözcüğünü ekleyerek sorunu çözebiliriz.Örnek : SELECT * FROM veritabani1.dbo.URUN u1 INNER JOIN veritabani2.dbo.URUNLER u2 ON u1.kod = u2.kod COLLATE TURKISH_CI_AS umarım faydalı olmuştur.

IEnumerable ile List Arasındaki Farklar

Sık kullandığımız iki tip olan IEnumerable ve List tipleri ile ilgili sürekli kullanılmasına rağmen farkının çok bilinmediğini düşünerek bu konuda kısa bir yazı yazmak istedim. Bakalım aralarında farklar nelermiş. IEnumerable bir interface iken, List yine IEnumerable sınıftan türeyen somut ( concrete) bir sınıftır. Arasındaki Farklar :  IEnumerable  - List e göre iteration çok daha hızlıdır. Performans için kullanılabilir.  - Read Only bir tip olduğu için Add, Remove gibi işlemler yapılamaz, IEnumerable ile sadece iteration, sort, filter gibi işlemler yapılabilir.  - Soyut bir class olduğu için istenen tipe somutlaştırılabilir.  - yield tipi ile birlikte kullanılabilir.(Promise veri döndürme,state-machine liste kullanımı)  - Linq sorguları veri tabanı sorgularınızın cevaplarınızı IEnumerable olarak döndürür, bu size siz ilgili IEnumerable list i iterate edene kadar ilgili sorguyu çalıştırmama performansı verir, böylece ilgili listeyi kullanmaya ihtiyacınız olmadığı bir durumda yada k

Sql Hatası : " The data types ntext and varchar are incompatible in the equal to operator. "

bu sabah böyle bir hata ile karşılaştım ilk defa karşıma çıktı :) Mesela "SELECT * FROM urunler WHERE Aciklama = 'HP NOTEBOOK' " şeklinde bir arama yaptığımızı düşünelim.Eğer "Aciklama" ntext bir tanım ise veri tabanında bu sorgu şu hatayı veriyor : "The data types ntext and varchar are incompatible in the equal to operator." Çözüm Basit :) arama işlemini "LIKE" ile yapıcaksınız :) Bu hatayı zaten kolayca çözüp giderebilirsiniz ama gördüğü her hatayı direk google a yazan arkadaşlar için bir kaynak olsun dedim :D Yeni Sorgu : SELECT * FROM urunler WHERE Aciklama LIKE 'HP NOTEBOOK' Umarım faydalı olmuştur.