AngularJS ile Basit Rest Service Erişimi

            AngularJS kullanarak hava durumu uygulaması nasıl olur.

Başla

Basit bir hava durumu uygulaması yapalım. Neler Kullandık ?

1. AngularJS
2. Bootstrap

Sonunda girilen şehrin hava durumunu veren basit bir uygulama olacak.

Uygulamanın çalışır hali için

plnkr.co

Hava durumunu şehir adına göre çektik.
Daha fazlası için openweathermap

Veriyi aşağıdaki fonksiyonla çekiyoruz.

$scope.sehirBul = function(sehir){ /*ng-click ile çağrılacak fonksiyon*/
         $scope.seh = sehir;
         //APPID=84bec579f4652ecefedd0e883dcdaa0a openweathermap.org sitesine üye olup sınırlı ücretsiz API KEY alıp URL sonuna ekleyerek kullanabilirsiniz.
         $http.get("http://api.openweathermap.org/data/2.5/weather?q="+sehir+"&units=metric&APPID=84bec579f4652ecefedd0e883dcdaa0a").success(function(data){
        $scope.dat = data;
        $scope.iconUrl = 'http://openweathermap.org/img/w/'+$scope.dat.weather[0].icon+ '.png';
         });
       };

Fonksiyon başarılı bir şekilde çalıştığında aşağıdaki gibi Json formatında veri elde ediyoruz.

{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}

İlk amacımız temp:289.5 değerini çekmek olsun.

Veri bir ağaç şeklindedir. İlk parantezleri kök kabul edin {} ve her değerin virgül ile ayrıldığını görün.

coord, sys, weather, main vb. ağacın aynı seviye anahtarlarıdır. Her birinin kendi içinde verileri var. Örneğin cod: 200 dediğimizde cod anahtarının verisi 200' dür. Ama anahtarların verisi birden fazla da olabilir. Örneğin bizim kullanacağımız main anahtarının; temp, humidity, pressure gibi verilere başkanlık ettiği görülüyor. Ağaç üzerinde nokta (.) ile ilerleyeceğiz.

Şimdi temp değerine ulaşalım. Servis sağlayıcısından gelen Json formatlı veriyi data değişkenine attık. Bu değişkeni ilk parantezler olarak görebiliriz. Ve data.main.temp ile değere ulaşırız.

Veriyi incelediğimizde weather anahtarının diğerlerinden farklı olarak bir diziye başkanlık ettiği görülüyor. Bu nedenle icon değerine ulaşmamız için data.weather[0].icon demeliyiz.

Bitir