AngularJS Gone Wild Day:4

Tahmini Okuma Süresi: 7 dakika

AngularJS serisinin 4. yazısında  angularjs kavramlarını tanıtıp, örnekler ile açıklamaya devam edeceğim.

ng-filter

Bu directive ile dom elementlerine format eklemek mümkündür. Örneğin yazı karakterlerinin tümünü “uppercase” veya “lowercase” yapabilir, currency  ekleyebilir ve bir liste içerisinde sıralama yaptırmak mümkün olabilir. Pipe adı verilen ‘|’ karakteri ile filtrenin biçimi belirlenebilmektedir. Aşağıdaki kod örneğinde bu bahsettiğim kullanımlar yer almakta.

Plunkr üzerinde yer alan örnek üzerinde çalışabilirsiniz. Ama yine de erişim problemi olmaması bakımından kod örneğini text olarak yazıya da ekliyorum.

Filtrenin kullanıldığı en faydalı alanlardan birisi ise arama fonksiyonları.

İlgili Plunk:

Bu güzide örnek aslında eskiden başarabilmek için türlü taklalar attığımız search fonksiyonunu sadece birkaç satır kod ile icra ediyor. Gündeme uyalım diyerekten euro 2016 takımlarını listeleyerek içlerinde arama yapan bir örnek yapacaktım fakat tüm takımları yazmaya üşendim. O yüzden sadece Türkiye’nin bulunduğu gruptaki takımları bir javascript dizisine atadım.  Bu atanmış takımları daha önce bahsettiğim ng-repeat yardımı ile bir  unorderedlist  yani bir “ul” içerisinde görüntüledim. Daha sonra textbox yardımıyla bu atanmış takımları “seçilmiş” takımlar haline getirmeye sağlayacak olan

 ng-repeat=”team in teams | filter:search | orderBy: ‘name’ “ 

kısmını ekledim. Aslında tüm gümbürtünün döndüğü yer burası ile textbox arasında bind olan “search” değişkeni. “search” değişkenin ismi de önemli değil. Önemli olan bu iki kontrol “search” değişkeni ile bağlanmış oluyor.

ng-include

Aslında isminden hafif bir çağrışım yapmakta. bu directive ile “external” html öğelerini koda “inject” edebiliriz.

Yukardaki kod bloğu “external” bir html dosyasını bir div elementi içerisinde görüntülemektedir. Sadece statik kullanımlarda değil bir veri kümesini görüntülerken de ng-include kullanımı faydalı olacaktır. Aynı işlem angularJS olmadan, ancak bir ajax servis çağrısı yaparak  html response alarak yapılabilir.

Custom directives

Angularjs built-in directive’leri gayet fazla, zaten yazı serisi boyunca değinerek devam ediyorum. Fakat biz yazılımcılar her istediğimiz fonksiyonun hazırını bulamayabiliriz. Uğraştığınız iş o kadar spesifiktir ki hiçbir generic yapı sizin bu ihtiyacınızı karşılayamıyordur. Bu noktada  “Custom” kavramı hayatlarımıza giriyor.  Custom denilen yerde de herhangi bir standart aramak da çok doğru olmasa gerek. Bu kısımda yapılabilecekler geliştiricinin hayal gücüne kalıyor.

Bir kaç tip directive tipi var :

  • Element directives
  • Comment directives
  • Attribute directives
  • CSS class directives

Bunlar arasından önerilen ve yaygın olarak kullanılan tipler: Element ve Attribute  directive’leridir.  Directive’ler tanımlanırken “restrict” özelliğine bu directive’in ne tür bir directive olacağı tanımlanır.

 directive.restrict = ‘E’ directive.restrict = ‘A 

 

gibi tanımlarla bir directive’in hangi tip olduğu belirlenebilir. Bununla birlikte statik bir html dosyası da template olarak referans verilebilir. Bu özelliği ise “templateUrl” değişkeni ile atamak mümkündür.

Aşağıdaki örnekte bir signup formunu element directive olarak tanımlayıp html elementi olarak eklemeyi örnekledim. Signup formunun template’ini Codepen sitesinde “signup form” araması ile buldum. Signup form örneğini  incelemek isteyenler için link : Signup Form

Plunk ise şu şekilde :

Bu örnekte tanımlamış olduğum directiveForm’u index.html içerisinde <directiveForm></directiveForm> şeklinde kullanabildim. include işlemiyle bir statik html dosyasını html içerisine “inject” ediyorken, directive ise sanki bir dom elementi gibi kullanabilmeyi sağlıyor. directive tanımı içerisinde templateUrl ile statik bir dosyayı referans olarak belirtebileceğiniz gibi , template değişkeni içerisinde direk html context’inizi yazmanız da mümkün. Okunabilirlik açısından ilki her zaman benim için tercih sebebi.  Bir directive’i aynı kontroller içerisinde birden çok kullanmak istediğiniz de bu bir problem olacaktır.  Çünkü iki directive aynı scope değişkenine bakacaktır. Bu gibi durumların önüne geçebilmek için scope‘u izole etmek gerekir.

 directive.scope ={ users : “=user”} 

ifadesi ile  directive.scope.hero değişkenin directive’e özel kılıyoruz. Böylelikle aynı directive farklı scope değişkenlerinin komutlarını işletebilir. Kontrol içerisinde bu hero attribute’lerine atamalar yaparak directive’i istediğiniz şekilde biçimlendirebilirsiniz.

İlgili plunk :

Custom directive konusu aslında başlı başına bir yazının konusu olabilecek kadar kavramı içermekte. Ben de diğer yazılarda da yeri geldikçe bu özelliklere değinerek konuyu pekiştirmeye çalışacağım. Bu noktada custom directive konusunda yazacaklarım bu kadar.

Son Tahlil

Bu yazıda birkaç built-in angularjs directive’ini ve bunun yanında custom directive oluşturup kullanma ile bilgiler vermeye çalıştım. Konu tek bir yazıya sığamayacak kadar uzun ve incelikleri olan bir konu o yüzden bu yazıya bir devam yazısı ile devam edebilirim. Teorik olarak nasıl kullanıldığı ile basit örnekler vererek ve açıklamalar yaparak directive konusunu incelemeye çalıştım. Isolate scope gibi daha advance denebilecek konulara da ucundan değinmiş oldum. Başta bu kontroller ve yapıların kullanımı biraz ürkütücü gibi olsa da pratik yapa yapa konular daha iyi oturuyor. O yüzden tavsiyem bol bol örnekler yaparak, yapılmış örnekleri inceleyerek, kendiniz denemeler yaparak konu hakkındaki bilgi birikiminizi artırmanız. Herkese iyi çalışmalar.

Leave a Reply

Your email address will not be published. Required fields are marked *