08_AngularJs_$http_Kullanımı

Merhaba arkadaşlar, bu yazımda $http servisini anlatacağım.

$http => $http hizmeti, tarayıcının XMLHttpRequest nesnesi veya JSONP aracılığıyla uzak HTTP sunucularıyla iletişimi kolaylaştıran temel bir
AngularJS hizmetidir.

Şimdi $http servislerinden $http.get() metodunu örnek ile inceleyelim ve $http servisini anlayalım:

İndex.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <script src="../../resources/js/angular.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="../../resources/css/bootstrap.min.css">
</head>
<body ng-app="App">
  <div class="container" ng-controller="AppController">
    <table class="table">
      <thead>
        <th>id</th>
        <th>login</th>
        <th>url</th>
      </thead>
      <tbody>
        <tr ng-repeat="user in users">
          <td>{{user.id}}</td>
          <td>{{user.login}}</td>
          <td>{{user.url}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<thead>

<th>login</th>

</thead>

<tbody>

<td>{{user.login}}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

ng-repeat direktifi kullanılarak $scope nesnesine bağlı olan users listesi döndürülüyor ve table elementi içerisinde yazdırılıyor.

App.js

var app = angular.module('App', []);
app.controller('AppController', ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/users').then(successCallback, errorCallback);
  function successCallback(response) {
    $scope.users = response.data;
  }
  function errorCallback(error) {
      console.log("Error => "+error);
  }
}]);

var app = angular.module('App', []);

app.controller('AppController', ['$scope', '$http', function($scope, $http) {

$http.get('https://api.github.com/users').then(successCallback, errorCallback);

function successCallback(response) {

$scope.users = response.data;

}

function errorCallback(error) {

console.log("Error => "+error);

}

}]);

Modül tanımlaması yapıldı. Controller içerisine $scope ve $http bağımlılıkları-nesneleri ekleniyor.

$http servisinin get() metoduna parametre olarak json uzantısı döndüren api url’i verdik. then() metodu ile get() metodundan sonra yapılacak işlemler yapılır. Eğer işlem başarılıysa successCallback metodu çalışır. Eğer işlem başarısız ve hatalıysa errorCallback metodu çalışır.

Burada işlem başarılı bir şekilde gerçekleştiğinden successCallback metodu çalışır ve response nesnesi servisimizden geri döndürülür. Response nesnesinin datasını users değişkenine atıyorum ve index.html sayfamızda yazdırıyorum.

Bu yazıyı burada bitiriyorum diğer yazılarımda görüşmek üzere….

Bir cevap yazın Cevabı iptal et