Herkese Merhabalar,
mobilhanem.com üzerinden üzerinden anlattığımız Angular Eğitimleri yazı serimizin dördüncüsü olan bu dersimizde Angular Framework Componentleri’ni yeni başlıklar altında incelemeye devam ediyoruz. Bir önceki dersimizde angular’ın yapısına ve componentlerine değinmiştik.

Angular Framework Componentleri

Arkadaşlar önceki dersimizde de değindiğimiz üzere Angular Framework içerisinde Module, Component, Template gibi önemli yapıları barındırır.  Module dediğimiz elemanlar bir araya gelerek aslında Angular uygulamasını meydana getirirler ve her Angular uygulamasının içeriğinde en az bir tane module barındırdığından bahsetmiştik. Component ise bir ekranı yada ekranın belirli bir işlemler akışını yöneten class’lardır. Template ise en basit ve yalın tabiriyle Angular ile bezenmiş HTML dökümanıdır.

Angular Framework Componentleri dersimizde ise sizlere Angular’ı anlamamıza ve kullanmamıza olanak sağlayan diğer önemli elamanlardan olan Metadata, Servisler, Data Binding ve Directives den bahsedeceğiz.

Metadata

@Component({
    selector : 'customer-search'
    templateUrl: '../Views/customersearch.html',
    providers: '[CustomerSearchCService]'

})

export class CustomerSearchC implements OnInit {

}

Metadata Angular Framework’e bir class’ı nasıl kullanması gerektiğini söyler ve class’a decorator ile eklenir. Bunun sonucunda sadece bir class olan TypeScript dosyamız artık bir Component olmuş olur.

• Yukarıdaki kod parçacığında incelememiz gereken elemanlardan biri selector girdisi. Burada vermiş olduğumuz customer-search değerinin amacı, Angular Framework’e uygulama içerisinde gezip bulduğu <customer-search></customer-search>  HTML taglerini arasında CustomerSearchC componentini çalıştırmasını sağlatmaktır.
• templateUrl girdisi ise bu component’in üzerinde işlem yapacağı (manipüle edeceği) HTML dökümanını göstermektedir.
• Son girdimiz olan providers ise componenimizin servis bağlantısı için ihtiyaç duyduğu bir dependency injection listesidir.

Yukarıdaki örnekte HTML dökümanı üzerinde tüm müşterilerin listelendiği bir tablo düşünelim. Component bu tabloya verileri yazabilmek için hangi html dökümanına ihtiyacı olduğunu templateUrl girdisi ile veya hangi css selector’lar arasında çalışacağı bilgisini de selector girdisi ile anlar. Ardından providers girdisi ile CustomerSearchCService servisinden müşteri bilgilerini elde edeceğini söyler.

 Data Binding

Data Binding konusu Angular Framework’ün en önemli özelliklerinden birisidir. Örneğin Angular Framework’ün olmadığı bir ortamda bizim bir HTML dökümanı üzerinde manipülasyon yapabilmemiz için;

1. HTML dökümanımızı manipüle ederken, html elemanlarına harici bir kaynaktan (Veritabanı , I/O, File vb.) aldığımız verilerine göndermek,
2. Kullanıcıdan aldığımız girdileri aksiyonlara çevirmek (event listener tetikleri) ve nihayetinde verilerin güncel hallerini yazmak görevi bize düşüyordu.

Ancak Framework yardımı ile biz pull/push işleyişinden büyük ölçüde kurtulmuş oluyoruz.

Angular Fraemework’ün bize sunduğu data-binding yardımı ile, artık html template üzerindeki kontroller ile component üzerindeki kontroller senkron çalışıyor.

Aşağıda Angular Framework’ün bizlere sunduğu 4 farklı data-binding yöntemini inceleyelim.

1. <h1>{{customer.name}}</h1>

   Componentin müşteri objesinin ismini html elemanı içerisinde gösterir. Interpolation örneğidir.

2. <button type=”submit” [disabled]=”!onayForm.valid”>Tamamla</button> En yaygın olan Property Binding örneği HTML elamanı property’sini Component üzerindeki bir değere set etmektir. Yukarıdaki kod parçacığı onay formundaki tüm kontroller sağlanmadıysa butonun disabled olması  gerektiğini ifade ediyor ve bunu da butonun disabled property’sine Component‘in onayForm.valid değerini bind ederek sağlıyor.
3. <li (click)=”selectCustomer(customer)”></li>  Buradaki kod parçacığında ise li elemanına bir click event’i bağladık ve component üzerindeki selectCustomer metoduna seçtiğimiz müşteri objesini gönderdik. Bu data-binding türünün adı ise event-binding.
4. Two-way data binding 4 farklı yöntemden sonuncusudur. Bu yöntem ngModel directive’ni kullanarak değeri ve event binding i tek bir işlemde birleştirir.

<input [(ngModel)]="customer.name">

Adından da anlaşılacağı gibi buradaki input elementinin değeri component den input box a, Kullanıcının yaptığı değişikliklerden sonra ise input box dan geri component e gider. Her zaman en son değeri kalır.

Aslında burada anlatmaya çalıştığımız; verileri getirmek için ayrı bir yapı ve verileri yazmak için ayrı bir yapı sağlamak yerine, verileri getiren yapının (servisler, dependency injection ile component üzerinde), verileri yazmak için sağlamamız gereken yapının (data-binding) ve verileri yöneten yapıya döküman üzerinden kullanıcı girdilerini sağlayan yapının (event binding)  merkezi bir class (component) üzerinde toplanmasına Angular Framework’ün katkısıdır.

Directives

Angular içerisindeki template’ler dinamiktir. Angular bu template’leri yorumlarken, DOM’u directives içerisinde verilen talimatlara göre göre değiştirir. İki tip directive vardır. Bu directive’ler genellikle element içerisinde, bazen isimle ve bazen de bir assignment’ın yada binding işleminin sonucu olarak ortaya çıkarlar.

1. Structural Directive DOM üzerindeki ekleme, silme ve değiştirme işlemleri ile ekran üzerinde değişiklik yapar.

• Buradaki *ngFor directive’i Angular a müşteriler listesi içindeki elemanlardan her bir tanesi (müşteri) için li elemanı eklemesi gerektiğini söylüyor.
• *ngIf ise seçilen müşteri varsa detaylarını göstermesini söylüyor. Buradaki app-customer-detail elemanı bir selector ve CustomerDetail component’i tarafından yönetiliyor.

2. Attribute Directive bir html elemanın görünümünü veya davranışını değiştirir.Yukarıda two-way data binding bölümünde verdiğimiz ngModel bir attribute directive örneğidir.  ngModel input element’in davranışını event trigger ve değer atama ile yönetir.

Bu yazımızda Angular Framework Componentleri’nin genel olarak ne olduklarını ve ne amaçlarla kullanıldıklarını açıklamaya çalıştık sizlere. Bir sonraki yazımızda “Angular Framework Geliştirme Ortamının Kurulması” konusu ile devam edeceğiz. Bir sonraki dersimizde görüşmek dileğiyle…

Konu hakkındaki görüş ve sorularınızı Konu altından ve ya Soru&Cevap sitemizden sorabilirsiniz.

Tüm Angular Derslerimiz için tıklayınız.