Posted by Merhaba arkadaşlar, bu yazımda sizlere Angular Component Oluşturma konusundan bahsetmek istiyorum. Angular’da component mimarisi ağaç şeklindedir. En üstte bir component vardır, diğer componentler onun altında gelir. Örnek vermek gerekirse app.component dosyamız bulunmaktadır. Diğer oluşturacağımız componentler bu component’in altında gelir.
Component Nedir?
Component bir html çıktısına hizmet eden class’tır. Componentleri bloklar şeklinde de düşünebiliriz. Örneğin ürünler listesinin bulunduğu ya da müşteriler listesinin bulunduğu sayfamız var diyelim. Bu sayfalarda ilgili verileri(data) component ile çekmemiz gerekmektedir. Çektiğimiz datayı ise ilgili component’in html’ine sunmamız gerekmektedir. Html componentteki veriye göre statik veya dinamik nesneleri bu componentteki bilgilere göre değiştirir. Metodlar componentlerimizin içerisinde bulunur. Bir class’ın component olabilmesi için yukarısında @Component tanımlaması gerektirir. Oluşturulan component içerisindeki component tanımlamalarında selector, templateUrl gibi özellikler bulunmaktadır.
Selector: Bu componentimizi hangi isim ile çağırılacağını belirtmektedir.
TemplateUrl: Bu componentin html’i nasıl olacak, hangi isimde bir dosya olacak onu belirtmektedir.
bu tanımlamalarda “./” ile belirtilmesinin sebebi de mevcut bulunduğu klasör anlamına gelmektedir.
Örneğin dashboard isminde bir component’imiz bulunsun. Bu componentimiz app/src altında dashboard ismi ile bir klasörde bulunacağından dolayı dashboard.component.ts dosyamızdaki TemplateUrl içerisinde ./dashboard.component.html isimli dosyamızı çağıracaktır.
MVC yapısını kullandıysanız eğer buradaki component.ts dosyası controller, view dosyası ise bu componentin html dosyası olarak söylenilebilir.
Şimdi gelelim yeni bir component nasıl oluşturulur?
Component Oluşturma
Terminal üzerinden Angular Cli aracılığı ile bu component’imizi oluşturalım.
ng g component dashboard
ya da
ng generate component dashboard
şeklinde yazıp enter’a bastığımızda angular cli bu componenti bizim için otomatik olarak oluşturacaktır.
Oluşturulan bu component içerisinde dashboard.component.ts, dashboard. component.html, dashboard. component.css ve 1 tane de test işlemleri için dashboard.component.spec.ts dosyası oluşturulacaktır. Oluşturulan dosyalar aşağıdaki gibidir.
Oluşturulan dashboard.component.ts dosyamızın içeriği de aşağıdaki gibidir.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}Oluşturulan dashboard.component.html dosyamızın içeriği de aşağıdaki gibidir.
<p>dashboard works!</p>
Oluşturduğumuz componentimizde selector,templateUrl,styleUrls özellikleri bulunmaktadır. Bu tanımlamalarımız oluşturulurken de otomatik olarak yapılmıştır. İstersek bunlar üzerinde değişiklik yapabiliriz fakat bunlarda değişiklik yapılırsa dosya isimlerinde de değişiklik yapmamız gerekmektedir. Şimdilik bizi ilgilendiren dashboard.component.ts ve dashboard.component.html dosyalarıdır. Çalışmalarımızı bunların üzerinde yapacağız.
Componentimizi oluşturduktan sonra app.module içerisindeki declarations kısmında da dashboard componentimizin kullanılacağı belirtilmektedir. Angular Cli ile component oluşturduğumuzda bu tanımlamayı otomatik olarak yapmaktadır. Eğer bu tanımlama yapılmadı ise gerekli componentimizi kullanmak için buradaki tanımlamayı yapmamız gereklidir.
Componentimizi oluşturduk peki bunu nasıl göstereceğiz?
app.component.html dosyamızı açarak burada oluşturduğumuz dashboard.component.html içeriğimizi göstermeyi sağlayacağız. Bunu sağlamak için dashboard.component.ts dosyamızdaki tanımlamada görünen selector özelliğindeki app-dashboard u kullanacağız. Yani bu selector ile çağıracağız.
<app-dashboard> </app-dashboard>tag’ini app-component.html dosyası içerisinde yazdığımızda da bu componentimizin çağırılma işlemi gerçekleşmiş ve görünmesi sağlanmış olur.
Son olarak Terminal üzerinden ng serve –o şeklinde yayına alarak tarayıcıda(localhost:4200) aşağıdaki gibi bir görünüm sağlamış oluruz.
Angular Component Oluşturma işlemini yukarıdaki gibi adım adım gerçekleştirmiş olduk.
Faydalı olması dileğiyle 🙂
Bir sonraki yazıda görüşmek üzere…