AngularJS'de Expression Filtreleri ve Filter Metodu | Turkish Tutorial
English
Expression Filter and Filter Method in AngularJS
Earlier in the tutorials, we gave information on how JSON data could be transferred and data communication.
In this tutorial, we will give you some information about the AngularJS expression filtering feature, which makes it easier to manage the representation of this data in appearance, and how to read and modularize the view during programming.
What are Filters in AngularJS?
Fiıtreler can be thought of as functions that extract, organize or change the format of the Javascript data managed by AngularJS according to the system situation. In AngularJS, we have filters that we can use to manipulate (manipulate) our view data, but we can also create appropriate filters for our own needs.
Filters can be specified after the expression after the expression, or can be used with the $ filter () method on the AngularJS variable.
Currently Available Filters
As we talked about, AngularJS has a default expression filter that is suitable for general use. See examples of how they are used and what they do;
lowercase and uppercase filters
It is used to make the entire text in the view larger or smaller.
Türkçe
AngularJS'de Expression Filtreleri ve Filter Metodu
Eğitimlerin önceki bölümünde, JSON verilerinin görünüme nasıl aktarılacağı ve veri iletişimi üzerine bilgiler verdik.
Bu eğitimde ise, görünümde bu verilerin gösterimini yönetmemizi kolaylaştıran AngularJS'in expression filtreleme özelliği hakkında ve programlama sırasında görünümü nasıl okunur ve modüler şekiıde tutacağımız üzerine biıgiler vereceğiz.
AngularJS'de Filtreler Nedir?
Fiıtreler, AngularJS tarafından yönetilmekte olan Javascript verilerini sistemin durumuna göre ayıklayan, düzenleyen veya formatını değiştiren fonksiyonlar olarak düşünülebilir. AngularJS'de, view verilerimizi manipüle (yönlendirme) etmek için kendiliğinden kullanabileceğimiz filtreler bulunurken kendi ihtiyaçlarımıza uygun filtreler de oluşturabiliriz.
Filtreler expression sonrasında gelen işaretinden sonra belirtilebilir veya AngularJS değişkeni üzerinde $filter() metodu ile kullanılabilir.
Halihazırda Kullanılabilir Filtreler
Bahsettiğimiz gibi, AngularJS'e genel kullanıma uygun, öntanımlı expression filtreleri bulunmakta. Bunların nasıl kullanıldığını ve ne işe yaradıklarını birer örnekler görelim;
lowercase ve uppercase Filtreleri
Görünümdeki yazının tamamını büyük veya küçük yapmak için kullanılir.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Tamamı Küçük:</b> {{kelime | lowercase}}<br>
<b>Tamamı Büyük:</b> {{kelime | uppercase}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.kelime = "PatAtEs";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Tamamı Küçük:</b> {{kelime | lowercase}}<br>
<b>Tamamı Büyük:</b> {{kelime | uppercase}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.kelime = "Merhaba Dünya Büyük Küçük DenemeSİ";
});
</script>
</body>
</html>
Aynı ömeği, expression bastırırken eklemek yerine, Javascript üzerinde nasıl eklediğimizi görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Tamamı Küçük:</b> {{kucukKelime}}<br>
<b>Tamamı Büyük:</b> {{buyukKelime}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $filter){
var kelime = "PatAtEs";
$scope.kucukKelime = $filter('lowercase')(kelime);
$scope.buyukKelime = $filter('uppercase')(kelime);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Tamamı Küçük:</b> {{kucukKelime}}<br>
<b>Tamamı Büyük:</b> {{buyukKelime}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $filter){
var kelime = "Merhaba Dünya Büyük Küçük DenemeSİ";
$scope.kucukKelime = $filter('lowercase')(kelime);
$scope.buyukKelime = $filter('uppercase')(kelime);
});
</script>
</body>
</html>
Bu örnek, bir önceki örnek ile aym çıktıyı verecektir.
Verdiğimiz ikinci örneğin kullanılması, oluşturduğumuz uygulamanın görünüm ve kontrol tarafındaki ayrımı daha kolaylaştırdığından yazdığımız kod daha geliştirilmeye yatkın (maintainable) olacaktir. Bu açıdan $filter kullanmak çok daha mantıklı bir seçimdir. Diğer bir yandan ise, ilk verdiğimiz örnekteki gibi, görünümde expression yansıması yaparken filtreleri kullanmak, kod için okunakılıık kazandıracağından, tek kişilik bir geliştirme ortamı için daha verimli bir seçim olacaktır.
Örneğimizde dikkat ederseniz $filter özelliğini kullanmak için kontrol metodumuza $filter özelliğini inject ettik.
json Filtresi
Bu öntanımlı filtre ile, Javascript değişkenlerini görünümde JSON string'i olarak yazdırabilirsiniz. örneğimizde nasıl yapıldığını görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Kişi Objesi string Halinde JSON:</b><br>
{{kisi | json}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.kisi = {
isim: "Erdem",
soyisim: "hasancı",
yas: "17"
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>Kişi Objesi string Halinde JSON:</b><br>
{{otomotiv | json}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.otomotiv = {
marka: "Opel",
model: "Corsa",
yil: "2015"
};
});
</script>
</body>
</html>
Kişi objesini JSON string'i halinde ekran görüntümüzde görebilirsiniz.
Not: Pratik olarak, sisteme kazandıracağı mekaniksel bir faydası olmasa da, json filtresi objelerin değerleri ve hata saptama (debug) konusunda geliştiricilere yardımcı olabiliyor.
number, date, currency Filtreleri
Sayıların görünümlerini veya durumlarını değiştirmemizi sağlayan bu filtreleri açıklamaları ile bir örnek içerisinde görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<b>normalSayi:</b> {{normalSayi}}<br>
<b>virgulluSayi:</b> {{virgulluSayi}}<br>
<b>kusuratsizSayi:</b> {{kusuratsizSayi}}<br>
---<br>
<b>unixTime:</b> {{unixTime}}<br>
<b>tarih:</b> {{tarih}}<br>
<b>saat:</b> {{saat}}<br>
<b>tarihSaat</b> {{tarihSaat}}<br>
---<br>
<b>normalPara:</b> {{normalPara}}<br>
<b>dolarTipi:</b> {{dolarTipi}}<br>
<b>turkLirasiTipi:</b> {{turkLirasiTipi}}<br>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $filter){
var sayi = 53684.84;
$scope.normalSayi = sayi;
$scope.virgulluSayi = $filter("number")(sayi);
$scope.kusuratsizSayi = $filter("number")(sayi, 0);
var unixZamani = 1288323623006;
$scope.unixTime = unixZamani;
$scope.tarih = $filter("date")(unixZamani, "MM/dd/yyyy");
$scope.saat = $filter("date")(unixZamani, "hh:mm");
$scope.tarihSaat = $filter("date")(unixZamani, "MM/dd/yyyy hh:mm");
var para = 3250.00;
$scope.normalPara = para;
$scope.dolarTipi = $filter("currency")(para, "USD$");
$scope.turkLirasiTipi = $filter("currency")(para, "TRY");
});
</script>
</body>
</html>
Örneğimizde 3 farklı öntanımlı filtre ve kullanımlarım görebilirsiniz.
Not: Unix Zamam (unix time stamp), 1970'den itibaren günümüze kadar sayılan bir saniye sayacıdır. Çoğu uygulama ve sistemde zaman belirleyici bir stamp olarak kullanılır.
Posted on Utopian.io - Rewarding Open Source Contributors