$http : uzak sunucu ile haberleşmek için kullanılan bir servistir. Veri gönderme yada veri okuma işlemleri $http ile gerçekleştirilir.
veri.json dosyası içindeki veriler okunacak. Örneğe başlamadan önce bu dosyayı aşağıdaki verilerle oluşturun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
[ { "ad": "Zülfa", "soyad": "Süleymanoğlu", "yas": "65" }, { "ad": "Muid", "soyad": "Şen", "yas": "69" }, { "ad": "Özçelik", "soyad": "Ulu", "yas": "28" }, { "ad": "Anı", "soyad": "Kürtoğlu", "yas": "82" }, { "ad": "İsrac", "soyad": "Altıntaş", "yas": "31" }, { "ad": "Kınıkaslan", "soyad": "Tulay demirtaş", "yas": "27" } ] |
SCRIPT: $http ile veri.json sayfasında bulunan json tipindeki veriyi okuyup model oluşturmak için $scope.personeller özelliği oluşturulacaktır. Aşağıdaki HTML kodlarında ilse personeller içindeki personel bilgileri satır satır satır tablo içine yerleştirilecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> var app = angular .module("persModul", []) .controller("persController", function ($scope, $http) { /*başka sayfadaki veriyi okuma için kullanıyoruz.*/ $http.get("veri.json") .then(function (gelen) { /*gelen değişkeni içindeki veriye data özelliği ile ulaşılır*/ /*$scope.personeller özelliğine gelen veriyi yerleştirip modeli oluşturmuş olduk. */ $scope.personeller = gelen.data; }); }); </script> |
HTML: ng-repeat ile verileri satır satır listelidik. ng-repeat’in ne olduğunu merak ediyorsanız, bu makaleyi okuyabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body ng-app="persModul"> <div ng-controller="persController"> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>YAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.ad }} </td> <td> {{ personel.soyad }} </td> <td> {{ personel.yas }} </td> </tr> </tbody> </table> </div> </body> |
[divider]
SCRIPT & HTML KODU
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular .module("persModul", []) .controller("persController", function ($scope, $http) { /*başka sayfadaki veriyi okuma için kullanıyoruz.*/ $http.get("veri.json") .then(function (gelen) { /*gelen değişkeni içindeki veriye data özelliği ile ulaşılır*/ /*$scope.personeller özelliğine gelen veriyi yerleştirip modeli oluşturmuş olduk. */ $scope.personeller = gelen.data; }); }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>YAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.ad }} </td> <td> {{ personel.soyad }} </td> <td> {{ personel.yas }} </td> </tr> </tbody> </table> </div> </body> </html> |
selam… crross oring request hatası alıyorum. neden acaba. client olarak json dosyasına ulaştığım için mi acaba
Güvenlik gerekçesi ile dışarıdan istekte bulunmana izin verilmediği için alıyorsunuz.
URL adresine dikkat edin. Şu şekilde hata yapıyor olabilirsiniz.
Orn. https://www.yazilimbilisim.net istek yaptığınız adres
URL adresiniz https://yazilimbilisim.net gibiyse hata alabilirsiniz.
[…] Konu 17: AngularJS $http Servis Kullanımı […]