-

Angular Js’de $Http Kullanımı, Filtreleme ve Sıralama İşlemleri

Angular Js $htpp servis, uzak http serverlar ile bağlantı kurulmasını sağlar. Server ile iletişim kurup istek yapar ve sonucunda data gelir. $http servis tek bir input objesi alır, kullanımı aşağıdaki gibidir.

$http({

method: ‘GET’,

url: ‘https://restcountries.eu/rest/v2/all/’

});

Yukarıdaki uzun kullanım yerine get, post, put, delete için kısayol kullanımları bulunur. Kısayol kullanımı $htpp.get() şeklindedir.  $http servis promise objesi döner yani  fonksiyon asenkron olarak çalışır ve data tek seferde gelmez. Bu nedenden ötürü gelen datayı bir objeye direkt setleyemiyoruz, bunun yerine then() metodu kullanılır. Then() metodu başarılı ve başarısız olduğu durumlarda alacağı aksiyonu içeren fonksiyonları parametre olarak alır.

$htpp servis kullanılacak ise controller oluşturulacağı aşamada, $scope parametresinin yanına $http parametresi eklenerek tanımlanır.

countryApp.controller(‘CountryCtrl’,function($scope,$http){}

$http kullanımı ile ilgili göstereceğim örnek için ülke listesi getiren bir servis buldum, bunu örnek olması açısından internette rastgele aratarak buldum. Ülke listesi getiren servis aşağıda göründüğü gibi json formatında data getirmiş olacaktır;

angular0

Ülke listesi getiren servisi aşağıdaki gibi çağırıyorum;

$http.get(‘https://restcountries.eu/rest/v2/all/’).then(onSuccess, onError);

Tabi ki onSucess ve onError metodlarını da tanımlamam gerekiyor. Bunların içerisinde başarılı ve başarız olduğu durumda alınması gereken aksiyonları belirtiyorum.

Js kodu aşağıdaki gibi olacaktır;

angular1

Datayı servisten çekip countries objesine setledikten sonra, servisten gelen ülke ismi, başkent, nüfus gibi bilgileri bir tabloda göstermeyi hedefliyorum. Bu bilgileri gösterirken kolonun üzerine tıklandığında sıralama işlemi yapması için servisten gelen ülke ismi kolon başlığını link olarak aşağıdaki gibi ekleyip, linke basıldığında sortField=’name’ ifadesini kullarak  isme göre sıralamasını sağlıyorum. Ayrıca servisten gelen ülkeler arasında arama yapabilmek için custom filtreleme yapıyorum. Ekrana bir textbox ekleyip bunu query ismi ile modelliyorum, döngünün içinde filter:query dediğimde textboxa yazılan değere göre filtreleme yapmış olur. Bütün kolonlar arasında arama yapması istenirse ng-model=”query” denmelidir, belirli kolonlar arasında arama yapılması isteniyorsa da ng-model=”query.name” şeklinde belirtilebilir. Döngünün yazıldığı yere data ilk yüklendiğinde belirli bir alanın sıralı gelmesi istenirse orderBy kullanılabilir, orderBy:’name’ olarak kullanılabilir, bunun defaultu ascending dir(artan), orderBy:’-name’ dendiğinde ise descending(azalan) olacaktır. Bu örnekte ben custom sıralama kullandım. orderBy hakkında detaylı bilgisi buradan alabilirsiniz.

angular2

angular3

Çıktı;

angular4

Örneğin kodlarının tamamına aşağıdaki codepen linkinden erişilebilir;

http://codepen.io/deryagunduzozmen/pen/gmMOxW

 

Kaynaklar:

  1. https://docs.angularjs.org/api/ng/service/$http
  2. http://csharp-video-tutorials.blogspot.com.tr/2015/11/http-service-in-angularjs.html
  3. https://restcountries.eu/

 

Category: Angular JS

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

*