Angular Component

Component ne yapar ?

Component, view adını verdiğimiz, uygulama ekranımızın bir parçasını yönetir. MVC tasarım desenindeki Controller’ a benzetebiliriz.

Component bir TypeScript class’ ıdır. Service vb. yapılar ile çalışıp bir logic kurar ve iş’ i view’ a yansıtır.

İçerisinde çeşitli özellikler ve metodlar barındırır. Angular’ ın çeşitli interface’ lerini implemente edebilir.

Component metadata

Component decorator vasıtası ile Angular’ a, component’ imizin kimliğini belirtiriz.

Örnek;

@Component({
  selector:    'product-list',
  templateUrl: './product-list.component.html',
  providers:  [ ProductService ]
})
export class ProductListComponent implements OnInit {
/* . . . */
}

Component decorator’ ün parametrelerini inceleyelim;

• selector : Component’ imizin uygulama içerisinde varlık göstereceği element’ in css selector’ üdür. Angular bu bildirim sayesinde, ilgili element, view’ da yer alınca, o component’ in instance işlemleri için aksiyon alır.
• templateUrl: Component’ in template’ ini barındıran html dosyasının adresi. Alternatif olarak, "template" property kullanıp, inline olarakta html kodu yazabilirsiniz.
• providers : Component’ in ihtiyaç duyduğu service lerin provider’ larının dizisi.

Template syntax

Template ilk bakışta HTML kodlarının olduğu bir html dosyası gibi gözükse de, Angular template syntax’ ını içeren kodlar da göze çarpar.

Basit bir ürün listesi template’ i;

<h2>Product List</h2>

<p><i>Pick a product from the list</i></p>
<ul>
  <li *ngFor="let product of products" (click)="selectProduct(product)">
    {{hero.name}}
  </li>
</ul>

<product-detail *ngIf="selectedProduct" [product]="selectedProduct"></product-detail>

Bu template klasik h2, p, i vb. html elementlerini barındırmasının yanı sıra, ngFor gibi Angular syntax’ ına ait bir directive’ i de barındırır.

Data binding

Framework olmadan elinizdeki veriyi HTML kodların içerisine yerleştirmek, silmek vb. DOM manipülasyonlarından siz sorumlusunuz. Lakin bu manuel işlemler, best practice’ ler incelenip, defalarca test edilmiş kütüphaneler kullanılmadan yapılırsa, ortaya öngörülemeyen hatalar çıkabilir.

Angular, "two-way-data-binding" ismini verdiği çift taraflı veri bağlama desteği verir.

• Component‘ in içerisindeki veri değişiklikleri anında Template‘ e gelir ve şekillendirilir. Örneğin; Product component’ in ürün listesini istediği service cevap dönmüştür. Cevap component’ in içinde tanımlı olan model‘ e set edilir. Bu model, Template içinde de Angular template syntax‘ ı ile maplendiği için, Angular bunu bilir ve veriyi hemen template’ e iletip, parse eder. Bu sayede ürünler listelenir. Buna string interpolation denir.

• Template‘ de model bazlı yaşanan bir değişiklik anında Component‘ e iletilir. Çünkü Template içerisinde, ilgili model, Angular Template Syntax‘ ı ile map edilmişti ve Angular bunu biliyor. Örneğin; üyelik formundaki her bir input üzerinde kullanıcı değişiklikler yaptıkça, bu input’ a angular template syntax’ ı ile bağlı olan model‘ de değişecektir ve Angular her değişiklikte bunu Component’ e bildirir.

Data-binding yöntemleri;

• Interpolation: Template içerisinde şu şekilde kullanılır;

  {{product.name}}

  Component içerisindeki product modeli(objesi) nin name özelliğini display etmek için kullanılır.

• property binding: Bir element’ e property üzerinden veri paslamak için kullanılır;

<product-detail [product]="selectedProduct"></product-detail>

Products Component içerisinde listelenen ürünlerin detayını görmek için kullandığımız product-detail component’ in template’ ine "product" property üzerinde "selectedProduct" modelinde tuttuğumuz ilgili ürünü paslıyoruz.
Genellikle üst component’ten alt component’ e veri paslamak için kullanılır.

• event binding: Template ile oluşturulmuş HTML çıktısı yani arayüz üzerinde oluşan event’ ler gerçekleştiğinde, ilişkilendirilecek işlemler (fonksiyon çağırma vb.) bu şekilde tanımlanır;

<li (click)="selectProduct(product)"></li>

Listelenen ürünlerden herhangi birine tıkladığınızda(click), selectProduct metodu, ilgili product verisi ile tetiklenir.

ngModel

Two-way-data-binding in bir yolu olan, template’ den component’ e iletişim ngModel vasıtası ile gerçekleşir;

<input [(ngModel)]="user.email">
<input [(ngModel)]="user.password">

Örneğin üyelik formundaki input’ lar ngModel üzerinden component ile bağlanır. Bu sayede, user model’ inin ilgili özellikleri(email vb.) component tarafında dinlenebilir(onchange vb. eventler) ve ele alınabilir(handle edilebilir).

• Component’ ten Template’ e property-binding
• Template’ den Component’ e event binding yapılır.

Üst Component’ ten alt component’ e veri aktarımı, Üst component’ in template’ i içerisinde selector’ ü(product-detail) bulunan altcomponent’ e property binding yapılarak sağlanır.

Alt Component’ ten üst Component’ e aktarım ise event binding ile gerçekleşir.

Pipes

Pipe mekanizması sayesinde, template içerisinde veriyi transform edebilmenize olanak tanıyan fonksiyonlar yazabilirsiniz.

Pipe decorator ile, istediğiniz şekilde pipe yazabilirsiniz. Kullanımı ise şu şekildedir;

{{modelIsmi | pipeIsmi}}

Angular halihazırda pek çok pipe’ ı dahili olarak sunar, listeye https://angular.io/api?type=pipe adresinden erişebilirsiniz. Bunların en çok kullanılanları tarih ve para birimi ile alakalı olanlarıdır;

<!-- Çıktısı:  'Jun 15, 2015'-->
 <p>Bugün {{today | date}}</p>

<!-- Çıktısı: 'Monday, June 15, 2015'-->
<p>Bugün {{today | date:'fullDate'}}</p>