Merhaba arkadaşlar. Bu yazımızda AngularJS kullanarak metin belgesinden en basit şekilde nasıl veri çekebileceğimizi göstereceğim. Aşağıdaki örneğimizde içinde verilerimiz (öğrenci bilgileri) olan .txt uzantılı bir metin belgesi kullanacağız. Veri kaynağı olarak metin belgesi de olsa, veri tabanı nesnesi de olsa sonuçta veriler bir dizi içerisinde geleceği için bir önemi yok. İlerleyen zamanlarda veri tabanından çekerek de bu işlemin yapılışını gösterebilirim. Fakat şimdilik örneklerimizde .txt dosyası üzerinden yürüyeceğiz.
$http AngularJS servislerinden biridir ve veri okumak için kullanılır. $http servisi sunucuya bir istek yollar ve karşılığında bir cevap döndürür. Bu cevap başarılı olabilir, başarısız olabilir. Biz de bu durumlara göre işlem yaptıracağız.
[js] var app = angular.module(‘uygulama’, []);
app.controller(‘ogrenciController’, function($scope, $http) { var url = “veriler.txt”;
$http.get(url).then(function(response) { $scope.ogrenciler = response.data; }, function (response) { alert(“Bir şeyler ters gitti”); }); }); [/js]
Veriler.txt İçeriği
[plain] [ { “AdSoyad” : “Ahmet Yılmaz”, “OgrenciNo” : 101, “Not” : “80” },
{ “AdSoyad” : “Sümeyye Kurt”, “OgrenciNo” : 201, “Not” : “70” },
{ “AdSoyad” : “Mehmet Ali Yanyatan”, “OgrenciNo” : 191, “Not” : “75” },
{ “AdSoyad” : “Kazım Üzmez”, “OgrenciNo” : 111, “Not” : “77” },
{ “AdSoyad” : “Caner Canbaz”, “OgrenciNo” : 338, “Not” : “98” } ] [/plain]
HTML İçerisinde Listeleme
[xhtml]
[/xhtml]
Açıklama
Öncelikle HTML dosyamızda kullanmak için bir modül oluşturduk. Modülün ismini “uygulama” yaptık. İstediğiniz ismi verebilirsiniz fakat HTML sayfanızda ister div içerisinde olsun ister html etiketlerine olsun ng-app="" kısmına gireceğiniz isim aynı olmalı. Yani eğer uygulama yazdıysak modül oluştururken, HTML sayfamızda ng-app=“uygulama” olmalıdır, aksi takdirde AngularJS aktif olmayacaktır.
Daha sonra hangi controller üzerinde çalışacağımızı belirttik. Öğrencilerle işlem yaptığımız için ogrenciController yazdım. Sonuna Controller koymamın sebebi, bunun bir standart haline gelmesidir. MVC yapısına sahip olan teknolojilerde eğer model ise model, controller ise controller yazılarak belirtilir.
url adında bir değişken oluşturduk ve dosyamızı yani “veriler.txt” metin belgemizi belirttik. $http servisi yukarıda da belirttiğim gibi bir istek alır ve sonuç döndürür. Biz de get ile dosyamızı $http servisimize istek olarak belirttik ve gelen sonuca bakmak için .then metodunu kullandık. Burada ince bir nokta var. .then metodu isteğe başarılı bir şekilde cevap gelirse bu method içerisindeki fonksiyon kodları çalıştırılır. Aksi takdirde diğer fonksiyon çalışacaktır. Bunu .success metodu ile de gerçekleştirebilirdik. İlla bu yöntem kullanılacak diye bir kural yok tabii :)
Neyse son olarak HTML sayfamızda listeleme işlemlerine geçelim. ng-repeat=“ogrenci in ogrenciler” özelliği bildiğimiz foreach döngüsüdür. etiketlerini döngüye sokuyoruz, ne kadar öğrenci var ise o kadar etiketi olacaktır. Daha sonra etiketleri içerisinde ogrenci elemanının özelliklerini yazdırıyoruz. İşte bu kadar :) Sonuç aşağıdadır;
