Statik ve Dinamik Template – Angular Meteor

Öncelikle tamamen statik yani bildiğimiz klasik bir html sayfası oluşturuyoruz, hemen akabinde Angular ile nasıl dinamik hale getirebiliriz onu inceleyeceğiz.

Çok basit bir kaç html tag ı ile oluşturulmuş sayfasının beklenen görüntüsü :

Screen Shot 2015-12-26 at 00.10.18

 

 

 

 

 

 

 

 

Şimdi aynı listin Angular ile nasıl dinamik olarak generate(üretilmek) edileceğine bakalım. Bu adımla Angular 1 in client-side uygulamalarına odaklanıyoruz, sonraki adımlarda da meteora yavaştan giriş yapacağız.

Angularda, view yani görünüm katmanı html temlplete ın aracılığı ile model katmanının bir yansımadır. Yani model katmanındaki veriler html yardımı ile kullanıcıya gösterilir :) Bu da demek oluyor ki modelde herhangi bir değişiklik olduğunda angular view de gerekli update ı gerçekleştiriyor.

main.html içine aşağıdaki kodları yazıp inceleyelim;

ng-repeat, Angular ın tekrarlama direktifidir. Yani her bir partinin  li tag i ile listelenmesini sağlayacak. Süslü parantezler içerisindeki expressions (ifadeler) ise listeye gelecek değerleri ifade ediyor. Yani parti ve detayını modal katmanından çekecek.

Bir sonraki adımda PartiesListCtrl adında bir controller tanımladık, controller bu noktada pek bir iş yapmıyor gibi görünse de normalde önemli bir rolu var. Model ile view arasındaki bağlantıyı kurmamızı, yani data-binding olayını sağlıyor.

 

 

1 comment

  1. Ahmet   •  

    Kısacık bir yazı ile angular data-binding kavramını harika anlatmışsınız.

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">