AngularJS Filtreleri Ve Kullanımı

AngularJS’de kolaylık sağlayan ve kod yazma derdinden kurtarıp daha anlaşılır projeler geliştirmemize yardımcı olan filtreleri bu makalede incelemeye çalışacağız.

AngularJS Filtreleri ve Kullanımı

AngularJS Filtre kullanım sözdizimi örnek olarak şu şekildedir.

Syntax

Bazı filtre kullanımlarına ve çıktı sonuçlarına bakalım

Tarih Formatlama(date)


Karakter Büyütme(uppercase)


Karakter Küçültme(lowercase)


Belli sayıda karakter gösterme(limitTo)


Repeat Döngüsünü Sınırlama(limitTo)

Repeat döngüsünü sınırlamadan kasıt sql’de olduğu gibi top 1-2 şeklinde istenildiği kadar kayıt çekilmesi şeklinde buradaki amacıda repeat döngüsünün işlem yapacağı kayıt sayısı sınırlandırılmış oluyor. Alttaki döngüde ise 2 tane kayıt için döngü işlemi yapılacağı belirtilmiş.

Sıralama(orderBy)

Yine sql’den örnek verecek olursak istediğiniz alan’a göre kayıtların sıralanması sağlanıyor buradada orderBy filtresine sıralama yapılacak alan belirtiliyor yalnız dikkat edilmesi gereken bir durum var eğer sıralamayı azalan şeklinde yapmak isterseniz alan adının başına - karakteri koyun alttaki örnekte olduğu gibi.


Para Birimi Filtresi(currency)

Bu filtre sayesinde para birimi değerlerinizi farklı para birimi işareti ve kesir boyutunu ayarlamak için değişiklik yapabilmekteyiz.

Syntax

Örnek

Sonuç


Number

Syntax

Örnek

HTML

Javascript

Sonuç


Kendi Filter Tanımlamalarım

Array Nesnemizi Birleştirip(join) Gösterebiliriz.

Mevcut bir array nesnenizi birleştirip tek bir string nesnesi olarak göstermek için html tarafında angular blokları arasında nasıl çözüm üretebiliriz aslında üretilecek birçok çözüm var ama en sağlıklısı hangisi olacak şimdi düşünelim javascript kodları angular blokları arasında çalışıyor o zaman ben neden join işlemini direkt bu bloklar arasında yapmıyımki kafamı neden yoruyorum hemen başlayalım.

İlk Yöntem

Şöyle bir kod bloğu ile array nesnesinin array fonksiyonlarından olan join fonksiyonu ile boşluk ayracı kullanarak birleştirme işlemini hızlıca gerçekleştirdim.

Bu üstteki kodu bir düşünelim 10’larca belkide yüzlerce yerde belli zaman aralıklarında array nesnelerini birleştirip gösterme ihtiyacınız oldu sürekli bunu yapacağız o zaman ama sizce sağlıklımı? neden değil hem gösteriyorsun hemde soruya boğuyorsun bizi amacın ne dediğinizi duyar gibiyim 🙂

O zaman cevaba geçebiliriz bence hiç sağlıklı değil nedeni ise 100’lerce yerde kullanıldığını varsayalım hatta olasılığı bu kadar yükseltip ohhh o zaman ben kullanabilirim diyenler çıkmasın bu kirli koda ortak olmak istemiyorum o yüzden 2 defa dahi bu kod tekrar ederse hiç sağlıklı bir durum değil nedenlerinin en başında bir kere yönetim var neden peki şöyle oradaki arrayi ben tanımladım ve o array dolu ama sizin $scope nesneniz içerisindeki array’in her zaman bir array olarak geleceğinin garantisi varmı? undefined, null olursa ne olacak direkt exception hiç hoş bir durum değil kullandığınız her yerde revizeye gitmeniz gerektiği konusunda sinyaller almaya başladınız değilmi işte yönetim zorluğu, clean code olmayışı, kod tekrarı oluşu ve daha bir sürü nedenden dolayı bu yöntemi eliyoruz direkt.

İkinci yöntem

$scope nesnesine bir fonksiyon tanımlayıp bu fonksiyonu angular blokları arasında kullanırım o zaman diyebilirmiyiz hatta $rootScope’a tanımlar ve tüm controller’larımda kullanırım diyebiliriz belkide hemen örnek bir kodumuza bakalım.

Üstteki kodda angular module tanımı sonucunda eriştiğimiz run fonksiyonu callback’i ile $rootScope nesnesine erişiyor ve bu $scope nesnesine join adında bir fonksiyon tanımlıyoruz ve join fonksiyonu ile aynı module’den üretilmiş controller tanımı(ng-controller='') arasında angular blokları içerisinde şu şekilde kullanabiliriz.

üstteki kodu herhangi bir controller tanımım arasında angular blokları içerisinde rahatça kullanabiliyoruz ve ilk yöntem’e göre biraz daha okunaklı ve anlaşılır oldu değilmi o durumda doğru yöntem bu diyebilirmiyiz? hmmmmm…. hayır her ne kadar temiz gözüksede bence yinede sağlıklı değil neden derseniz bazı kodlamaların standart’a oturması sizin geliştirme sürenizi o kadar kısaltıyorki eğer framework’ler kullanıyorsanız örnek olarak şuan bizim angular’ı kullandığımız gibi o zaman framework’ü daha iyi hazmedebilmek ve yeteneklerini en üst düzeyde kullanabilmek kendi tanımlamalarınızda framework tanımlamalarını kullandığınız gibi olursa gözünüz kapalı kod yazar kodlama hız artışı, okunabilir kod artışı gibi birçok şeye sahip olabilirsiniz ve sonuç olarak ikinci yöntemide önermiyorum.

Üçüncü yöntem

O zaman kesin üçtür diyenleri duyuyorum kulaklarım çınlıyor şuan 🙂

Peki üçüncü yöntem nedir üçüncü yöntem angular custom filter tanımı tabikide ikinci yöntemin son paragraflarında aslında mesajı verdim. Dediğim gibi framework’e ayak uydurursanız hem framework’ü gerçek anlamda çok daha iyi hazmedebiliyor olursunuz hemde şu join fonksiyonu acaba özel controller’im içindemiydi yoksa rootScope’amı tanımladım hemen kontrol edip öyle yazmaya devam edeyim v.s. sizi engelleyecek cümleler silsilesi ile uğraşmamak için angular filter’ı tanımlayacağız böylelikle yönetim tek yerde olacak ve nasıl kullanılacağı ile hiçbir sıkıntımız olmayacak çünkü angular’ın makale girişinde yer alan onlarca filter kullanımında olduğu gibi kullanacağız bizde kendi filter tanımımızı o zaman artık kendi filter tanımımıza geçebiliriz.

Gördüğünüz üzere kendi özel angular filter tanımızı yaptık şimdi üç yöntemin yer aldığı kodu ve sonucu topluca görelim ve bitirelim.

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. saykopat dedi ki:

    Çok teşekkür ederim faydalı oldu

Bir cevap yazın

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