AngularJS’de template’in gücü

AngularJS‘nin en etkili özelliklerinden biri şüphesiz başarılı şablon motoru(template engine). Deklaratif programlamanın güzel bir örneği olan Angular templateleri, kod okunabilirliği, görsellik ve işlevsel kodların ayrımı konularında güzel imkanlar veriyor. Şimdi bu imkanları nasıl kullanabildiğimize bir göz atalım.

ESKİ KAFA YÖNTEM

Bu örneği çok sık veriyorum ancak, konuya uygun ve anlaşılması kolay olduğu için tekrar bir “tab arayüzü”nün yapılması için kullandığımız yöntemler üzerinden konuyu açıklamaya çalışacağım. Bir çok jQuery yazan front-end geliştiricisi, bir web sayfasında tab görünümünü elde etmek için aşağıdaki gibi bir HTML yapısı kullanır.

<ul class="tab-navigation">
  <li class="active">
    <a href="#tabIcerik1">Tab 1</a>
  </li>
  <li>
    <a href="#tabIcerik2">Tab 2</a>
  </li>
</ul>

<div class="tab-content active" id="tabIcerik1">
  <p>Tab icerik 1</p>
</div>

<div class="tab-content" id="tabIcerik2">
  <p>Tab icerik 2</p>
</div>

Bu tarz bir yöntemle bir tab davranışı sergileyebilmek için aşağı-yukarı şöyle bir jQuery kodu işimizi görecektir:

$(function () {
  $('.tab-navigation a').on('click', function (el) {
    var $el = $(this),
        targetId = $el.attr('href');

    $('.tab-content')
      .removeClass('active')
      .filter(targetId)
      .addClass('active');

    $el.parent('li')
      .addClass('active')
      .siblings()
      .removeClass('active');
  });
});

Buradaki temel problem aslında bu kadar basit bir kullanıcı etkileşimi ve DOM manipülasyonu için bile Javascript yazmak zorunda kalmamız. jQuery’nin de bu kadar popüler olmasının sebebi, Javascript’te yaptığımız DOM manipülasyonlarının çokluğu aslında. Ancak Javascript içerisinde yaptığımız her DOM manipülasyonu, bu kodu HTML’ine ve CSS koduna daha da bağımlı hale getiriyor ve kırılganlığı artırıyor.

“Angular way”ı

Bakın bu ihtiyacı Angular ile nasıl gideriyoruz:

<ul class="tab-navigation">
  <li ng-class="{'active': activeTab != 2}">
    <a href="#" ng-click="activeTab=1">Tab 1</a>
  </li>
  <li ng-class="{'active': activeTab == 2}">
    <a href="#" ng-click="activeTab=2">Tab 2</a>
  </li>
</ul>

<div class="tab-content" ng-class="{'active': activeTab != 2}">
  <p>Tab icerik 1</p>
</div>

<div class="tab-content" ng-class="{'active': activeTab == 2}">
  <p>Tab icerik 2</p>
</div>

Angular’ın sundugu ng-class directive’i, verdiğiniz şartlara göre istediğiniz bir class’ın elemente eklenip çıkarılmasını sağlıyor. ng-click directive’i ise, Javascript’in DOM eventlerine benzer şekilde, karşısına verdiğimiz kodu çalıştırmaya yarıyor. Ancak üzülmeyin, karşısındaki kod global scope’da değil, Angular’ın bu template için oluşturduğu özel bir scope’da çalışıyor.
Görüldüğü gibi tabların görünme şartlarını, hangi durumda elementlerin ne class değeri alacağını ve durum değişimlerinin hangi event’ler ile ne şekilde olacağını template’de tanımladık. Sayfada ne döndüğünü template’i okuyarak anlamak mümkün.
Peki javascript kodumuz ne olacak?
İşin güzel tarafı burası: Angular’da yukarıdaki template ile bir tab görünümü uygulaması çalıştırmak için ekstra bir javascript koduna ihtiyaç yok.