Angular2 Components ve Templates

Angular2 Companents:

angular2 Components
Components

Angular2 versiyonunda, Component view(görünüm) olarak adlandırdığımız ekran yamasını kontrol eder.

Örneğin şu görünümler componentler tarafından kontrol edilir:
-Navigasyon bağlantıları olan root uygulama,
-Kahraman listesi.
-Kahraman editörü.

Component uygulama mantığı -görünümün neyi desteteklediği- class ların içinde tanımlanır. Class lar görünümlerle API nin özellikleri veya metodları ile etkileşime geçer.

 

Örneğin HeroListComponenet bir hero metoduna sahip ve metod servisten alınan hero dizisini geri döndürüyor. HorolistComponent ayrıca selectHero() motoduna sahiptir bu metod kullanılarak kullanıcı listeden seçilen bir kahramana tıkladığında selectedHero özelliği ile ayarlar.

angular2 components
Components

Angular kullanıcı uygulamadayken componentleri create, update ve destroetme özelliğine sahiptir. Uygulamanız opsiyonel yaşamdöngüsü(lifecycle) kancalarına göre her anda bir aksiyon alabilir, yukarıda resimde belirtilen ngOnInit() gibi.

 

Templates:

angular2 templates
Templates
angular2 template
Template

Bir componentin görünümünü(view) template(şablon) ile tanımlarız. Template Angular a nasıl render edeceğini söyleyen HTML in formudur.

Bir template normal HTML gibi gözükür ama ufak tefek farklilıkları vardır.

HeroListComponent:
(resim)

Tipik <h>, <p> gibi HTML elementlerini kullanılmasına rağmen ayrıca bazı değişiklikler de vardır: *ngFor, {{hero.name}}, (click), [hero] ve <hero-detail> gibi Angular syntaxını kullanırlar.

Son satırdaki <hero-detail> tagı yeni bir component -HeroDetailComponent- hazırlayan özel bir tagdır.

HeroDetailComponent daha önce incelediğimiz HeroListComponent componentinden farklı bir componenttir. HeroDetailComponent (kodu gösterilmedi) kullanıcının HeroListComponent ile sunulmuş kahraman listesinden kullanıcının seçmiş olduğu belli kahramanlar hakkında bilgileri gösteriyor. HeroDetailComponent, HeroListComponent in çucuğudur.

angular2 component tree
Component tree

<hero-detail> tagının normal html tagları arasında nasıl kolayca yer edindiğine dikkat edin. Özel componentler HTML ile aynı layoutta sorunsuz bir şekilde karıştırılabilir.

Önceki yazı <<-