AngularJS $http Servis Kullanımı

DumanInc · 1 Eki 2021

$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

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="

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

"></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>

AngularJS $http Servis Kullanımı

DumanInc

Web Development

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular