Merhaba, sıra geldi AngularJS’ in belki de data-binding’ ten sonraki en developer dostu özelliğine 🙂 karşınızda Filters!!!

Neden böyle dedim ?

En başa dönersek, taa http://angulartr.com/angularjs-nedir/ AngularJS’ in ne olduğunu anlattığım konuya. Eski zamanlarda yani Jquery, https://lodash.com/, vb kütüphaneleri projemize dahil ederek, javascript (ES5)’ in hantallığı, API’ sinin yetersizliğinden şikayet edip, çözüm aradığımız zamanlarda, işler ne kadar gına getiriciydi. Özellikle uygulamanızın front-end’i yüklüyse, backend ten pek çok case’ e göre gelen datayı doldur boşalt yapmak tam bir amelelikti. Her zaman kullanıcıya mavi ekran verecek bir senaryo gerçekleşme ihtimali vardı. Bu da yaptığınız işten soğumaya, ya bunun mantıklı bir ele alınışı olamazmı demenize sebep oluyordu. Taki AngularJS’ in data-binding yapısı ile bu karmaşıklıktan kurtulana kadar. Artık bu işleri AngularJS Framework ile ele alıp, sağlam bir yapı oluşturuyoruz. Detaylı bilgiler : http://angulartr.com/angularjs-binding/

Şimdi ise filter kavramı ile tanışıyoruz. Filter’ da bizi pek çok amelelikten kurtaracak bir servis.

Filter nasıl kullanılır, örnekleri vb. konularda kaynak bilgiyi Angular’ ın kendi sitesindeki https://docs.angularjs.org/api/ng/filter/filter ve https://docs.angularjs.org/guide/filter sayfalarından alabiliriz.

Örnek 1;

Uygulamanızın view’ ında pek çok yerde, backend’ ten timestamp olarak gelen tarih’ i, kullanıcının okuyabileceği şekilde basmanız gerekiyor. Bunu normalde, internetten bulduğunuz bir metodu projenize dahil edip, veri geldiği anda parse edip, DOM’ a yerleştirerek yapmak ilk akla gelen çözüm olacaktır. Keza 10larca başka çözüm de uygulayabilirsiniz. Ama kritik nokta şu, uyguladığınız heryerde bir parse işlemini yapacak yönlendirmeyi yazmak zorundasınız. Lakin bu işi direk view’ da tek bir işlemde daha sağlıklı olacaktır.

Nasıl mı ?

JS Bin on jsbin.com

timestampToDate adında bir filter tanımladık, return function (timestamp) kısmında timestamp değişkeninde, filtereleyeceği değeri ele alıyor, gerisi ise filter ne yapacaksa o işi yapıyor ve elde ettiği sonucu return ediyor. Filter’ ın ne yaptığına takılmayın, konumuz bu değil. Ardından ben bu filter’ ı kullanmak istediğim her modelde | işaretinden sonra yazıyorum ve kullanıyorum. Bu kadar basit.

Kendi bu şekilde custom filter yazabildiğimiz gibi dahili filterlarıda kullanabiliriz.

JS Bin on jsbin.com

Angular’ ın dahili date filtresini kullandık.

Şimdiye kadar hep bir modeli transform ettik. Fakat filterlar verileri order etmeye de yarıyor.

Aşağıdaki örnekte, verilerimizi ng-repeat ile loop ederken, objelerin country değerlerini alfabetik olarak sıralayarak bu işlemi gerçekleştiriyoruz.

JS Bin on jsbin.com

Şimdiki örneğimizde ise, birden çok filtreyi aynı anda nasıl kullanabileceğimiz göreceğiz.

JS Bin on jsbin.com

İsimleri country ye göre alfabetik olarak order ederken, arama modeline bağlı input a bir harf girerseniz, bu girilen değerin, repeat edilen dizide eşleşmeyen değerleri siliniyor. Keza aynı zamanda isimler uppercase filtresi ile büyük harfe çevriliyor.

Umarım filtreler hakkında temel kavramları kavramışsınızdır.

Leave A Comment

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