AngularJS Direktifler

Direktifler, AngularJS uygulamalarının en önemli bileşenleridir. AngularJS’in kendisi zaten hali hazırda bir çok direktif sunmaktadır ve tamamen yapı bu direktifler üzerine kurulmuştur. Bu direktiflerin en çok bilinenleri: ng-repeat, ng-model, ng-app, ng-controller, ng-show , ng-if vb. Sırf AngularJS’in tanımlı olarak sunduğu direktifler ile gerçek zamanlı projeler gerçekleştirilebilmektedir ama bazı zamanlar kendi direktiflerimizi yazmak isteyebiliriz. Bu yazımda sizlere nasıl kendi direktiflerimizi yazabildiğimizi ve projelerimizde nasıl kullanabileceğimizi anlatmaya çalışacağım.

Genel Bakış

Bir direktif bize yeni bir sentaks tanımlamamızı sağlar. Bu sayede DOM elementleri üzerinde özel davranışlar iliştiririz.

Eğer daha önce AngularJS ile uğraşmışsanız, farketseniz de farketmeseniz de direktif kullanmışsınızdır. Yukarıda bahsettiğim ng-repeat, ng-model gibi basit direktiflerle içli dışlı olmuşsunuzdur. Tüm direktifler DOM elementlerine özel yükümlülükler verir. Örneğin; ng-repeat bir elementi tekrar ederken, ng-show belirli bir şarta göre bu elementi gösterir ya da göstermez. Eğer bir elementi sürüklenebilir (draggable) yapmak isterseniz, bunu direktifle de başarabilirsiniz. Direktiflerin arkasındaki fikir son derece basit; elementleri manipüle ederek, özel görevler yüklemek.

Direktif Oluşturma

AngularJS’te direktifler 4 farklı şekilde tanımlanabilir:

  1. Yeni bir HTML elementi olarak (<my-directive/>).
  2. Bir elementin özelliği (attribute) olarak (<input type="text" my-directive/>).
  3. Bir class olarak (<input type="text" class="my-directive"/>).
  4. Bir yorum olarak (<!--directive:my-directive-->).

Tabi ki, oluşturduğumuz direktif üzerindeki kontrol bizde. İstediğimiz gibi tanımlayabiliriz. Şimdi, tipik bir direktifin nasıl yazıldığına bakalım. Sanki bir controller gibi tanımlanır ama direktifi yapılandırmak için gereken bir kaç özellikli basit bir obje (direktif tanımlanması) döndürür.

1

Yukarıdaki kodda, app.directive() fonksiyonu modulümüze yeni bir direktif tanımlar. İlk parametre direktifin adı, ikinci parametre ise direktifin özelliklerini tanımlayacak objeyi döndüren fonksiyon. Eğer direktifiniz $rootScope, $http, veya$compile gibi dependency (bağımlılık) içeriyorsa, burada enjekte edilebilir. Direktif HTML’de aşağıdaki şekillerde  kullanılabilir:

<hello-world/>
<div hello-world></div>

Not

Farkettiğiniz gibi direktifi tanımlarken ismini helloWorld olarak vermemize rağmen, kullanırken hello-world olarak yazdık. Bu AngularJS’in direktifler üzerinde tanımladığı sentakstır. Dolayısıyla kendi direktiflerinizi oluştururken buna dikkat ediniz.
Yukarıdaki basit kodda öğrenmemiz gereken bir kaç nokta bulunmakta. Direktif tanımlaması yaparken 3 tane özellik kullandık. Gelin bu özelliklerin bu tanımda oynadığı rolere göz atalım.

  • restrict –  Yukarıda belirttiğim gibi direktifler 4 şekilde HTML’de kullanılabilir. Bu özellik sayesinde direktifimizi nasıl kullanacağımızı belirtiyoruz. Yukarıdaki senaryoda ‘AE’ kullandık. Bu yüzden, direktifimiz HTML element ya da attribute olarak kullanılabilir. Bir class olarak da kullanmak istiyorsak ise ‘AEC’ yapmamız  gerekir.
  • template – Burası direktif kullanıldığında üretilecek HTML’i temsil ediyor. Çoğu durumda yukarıda olduğu gibi basit bir string döndürmüyoruz. Dolayısıyla bunun yerine daha çok templateUrl kullanılarak bir HTML sayfası döndürüyoruz. Örneğin;
    templateUrl: “myPage.html”
  • replace –  Bu özellikle oluşturulan template HTML’de tanımladığımız alanın içine mi enjekte edilecek yoksa yerine mi geçecek sorusunun cevabını veriyoruz. Bizim senaryomuzda true set edilerek, oluşturğumuz div ile yer değiştirdik.

Link Fonksiyonu

Varsayılan olarak bir direktif parent scope kullanır, ve yeni bir child scope oluşturmaz. Dolayısıyla bir direktif controllerın etki sınırları içerisinde tanımlanıyorsa, bu controller’ın scope’unu kullanır.

AngularJS’in scope özelliğinden direktifleri kullanırken faydalanmak için link fonskiyonunu kullanabiliriz. Hemen bir örnekle bu fonksiyonu inceleyelim. Yukarıdaki helloWorld direktifini biraz geliştirip, kullanıcının girdisine göre “Hello World!” yazısının arka plan rengini otomatik olarak değiştirelim.

3

4

Burada çalışan kodu görebilirsiniz. Directive Example.

Dikkatinizi çekmek istediğim noktalar:

  • scope – Direktife paslanan scope parametresi. Şu durumda parent scope.
  • elem –  Direktifin uygulandığı jQLite (JQuery alt kümesi) elementi. Eğer HTML’de JQuery kütüphanesini Angular’dan önce projeye dahil ediyorsanız, jQLite yerine jQuery elementi olur. Zaten jQuery/jQLite elementi olduğu için başına “$” etiketi koymanıza gerek yok.
  • attrs – Direktifin uygulandığı elemente verilen ekstra özellikler için parametre. Örneğin: <hello-world attribute></hello-world> gibi bir tanımlamamız için erişim attribute.someAttribute şeklinde olur.

 

Not:
Özellikle kodları resim halinde gösteriyorum ki, kopyala yapıştır yapmak uzun vadede hiç bir zaman faydalı değildir.

Hayatınızdan kod eksik olmasın.
Emre Demir

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s