1 Kasım 2013 Cuma

AngularJS - Directives

Bu yazıda, AngularJS'de directive'lerin ne olduğundan ve hangi durumlarda kullanıldığından bahsedeceğim. Ayrıca directive kullanımı ile ilgili bir html kod bloğu paylaşacağım.

Directive nedir?
AngularJS'de directive'ler, özel(custom) HTML element'leri oluşturmak ve DOM işleme için kullanılmaktadır. Directive'ler, attribute, element, class ve comment gibi DOM elemanlarına özel davranışlar eklememizi sağlar.

Directive ne için kullanılır?
Mevcut bir element'e yeni davranışlar eklemek istediğimizde veya kendi özel bileşenlerimizi(component) oluşturmak için directive'ler kullanılır. Örneğin formunuzda yeni bir girdi elemanı kullanmak istiyorsanız <input> etiketin "type" attribute'u için yeni bir tip tanımlayabilirsiniz. Bu durumda directive kullanılabilir. Bunun dışında; yeni <input> tipi için yeni bir doğrulama(validation)'ı da directive olarak tanımlayabilirsiniz.

Angular ile birlikte gelen ön tanımlı pek çok kullanışlı directive vardır. Her ön tanımlı Angular directive'i ng- şeklinde başlamaktadır. Ancak bunların arka planda gerçekletirimi camelCase olarak yapılmaktadır. Örnegin; gerçekletirimi ngDisabled şeklinde yapılan directive'in HTML kodunda kullanımı ng-disabled şeklinde olmalıdır. Kendi directive'imizi yazarken de bu duruma dikkat etmemiz gerekiyor. Ön tanımlı directive'lerin bir kaçını aşağıdaki örnekte kullanacağız ancak, tüm directive listesine buradan erişebilirsiniz.

<html ng-app>
    
        
 Angular directives test sayfası
 
    
    
        

Kişi listesi

  • {{person.firstname}} {{person.lastname}}
</html>

Kişi listesi

  • {{person.firstname}} {{person.lastname}}
HTML üzerinde oynama yapmak istiyorsanız, benzer kodda Plunker üzerinde burada çalışabilirsiniz.

Kodu inceleyecek olursak; hmtl etiketindeki ng-app directive'i, bu html'in bir Angular uygulaması olduğunu ifade ediyor ve auto bootstrap sağlıyor. ng-init directive'ini kullanarak HTML üzerindeki herhangi bir bileşen'e üzerinde çalışabileceği verileri gönderebiliyoruz. ng-repeat="person in persons"; "persons" dizisindeki her bir elemanı "person" nesnesi olarak temsil edeceği anlamına geliyor(for each diyebiliriz). ng-model ile checkbox'ın model ismini belirtiyoruz. ng-disabled directive'i ise; ilgili elemanın etkin olup olmayacağını belirlemek için kullanılıyor. ng-disabled içerisindeki değeri de checkbox'daki model'in değerine göre belirleniyor.

Hiç yorum yok: