Eğer gerçekten istersen, mutlaka olur.

AngularJS Direktifler

1 sene ago, Written by , Posted in ANGULARJS, WEB

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
  2. Bir elementin özelliği (attribute) olarak
  3. Bir class olarak 
  4. Bir yorum olarak  

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.

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

Bir Cevap Yazın

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