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.

<ul>
  <li>
    <span>Dubstep-Free Zone</span>
    <p>
      Can we please just for an evening not listen to dubstep.
    </p>
  </li>
  <li>
    <span>All dubstep all the time</span>
    <p>
      Get it on!
    </p>
  </li>
</ul>

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

Ş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;

<div ng-controller="PartiesListCtrl">
  <ul>
    <li ng-repeat="party in parties">
      {{party.name}}
      <p>{{party.description}}</p>
    </li>
  </ul>
</div>

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.

angular.module('socially',['angular-meteor']);

angular.module('socially').controller('PartiesListCtrl', ['$scope', function ($scope) {
    $scope.parties = [
        {
            'name': 'Dubstep-Free Zone',
            'description': 'Can we please just for an evening not listen to dubstep.'
        },
        {
            'name': 'All dubstep all the time',
            'description': 'Get it on!'
        },
        {
            'name': 'Savage lounging',
            'description': 'Leisure suit required. And only fiercest manners.'
        }
    ];
}]);