http در AngularJS

http یک سرویس AngularJS  برای خواندن داده ها از سرور است.

http$ در AngularJS

سرویس http$ یکی از متداول ترین سرویس های مورد استفاده در برنامه AngularJS است. این سرویس یک درخواست به سرور ارسال می کند و بر اساس آن پاسخی از سرور را دریافت میکند.

مثال زیر ایجاد یک درخواست ساده به سرور و نمایش آن در header است:

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>

متد های AngularJS

در مثال بالا از متد get. که از سرویس http$ گرفته شده ، استفاده شده است.

متد get. میانبری از سرویس http$ است. چندین متد میانبر وحود دارد:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

متد های بالا همگی میانبر هایی هستند که توسط http$ فراخوانی می شوند:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySuccess(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
}); 

مثال بالا سرویس http$ را با یک شی به عنوان آرگومان اجرا می کند.

شی  HTTP را مشخص می کند ،  url را ، آنچه باید در موفق بودن یا شکست باید انجام شود.

مشخصه ها

پاسخ از سمت سرور یک شی می باشد که می تواند دارای یکی از مشخصه های زیر باشد.

• .configشی ای برای تولید یک responese یا پاسخ
• .dataیک رشته یا شی که پاسخ را از سرور حمل میکند
• .headersیک متد برای دریافت اطلاعات header استفاده می شود
• .statusیک عدد که وضعیت HTTP را مشخص می کند.
• .statusTextیک رشته که وضعیت HTTP را بر می گرداند.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statusText;
    });
}); 

برای هندل کردن خطاها یک متد then به تابع خود اضافه میکنیم :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        //First function handles success
        $scope.content = response.data;
    }, function(response) {
        //Second function handles error
        $scope.content = "Something went wrong";
    });
}); 

JSON

دیتایی که شما از طریق response دریافت می کنید معمولا با فرمت JSON هستند .

JSON روش خوبی برای انتقال داده ها می باشد و در AngularJS و سایر برنامه های مربوط به JavaScript بسیار راحت قابل استفاده است.

به عنوان مثال : در سرور ما فایلی داریم که شی JSON شامل اطلاعات 15 مشتری را بر میگرداند. رکورد ها در درون آرایه قرار می گیرند:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>

توضیح مثال : این برنامه یک کنترلر بنام customersCtrl  تعریف میکنیم که داری اشیای scope$ و html$ می باشند.

http$ یک شی از نوع XMLHttpRequest  می باشدکه دیتای خارجی را درخواست می کند.

http.get$ داده های JSON را از درون فایل Customer.php می خواند.

با موفقیت در خواندن داده ها ، کنترلر مشخصه های مربطو را ایجاد می کند و در درون متغیر myDate قرار می دهد.