جلسه یازدهم – سرویس http در انگولار جی اس

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

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

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

متدهای سرویس $http

مثال بالا از متد 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  : شی مورد استفاده برای تولید درخواست.
data  : یک رشته یا یک شیء، پاسخ از سرور را دارا می باشد.
header : یک تابع برای استفاده از اطلاعات هدر است.
status : یک شماره که وضعیت HTTP را مشخص می کند.
statusSet : یک رشته که وضعیت 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

داده هایی که از پاسخ دریافت می کنید در قالب JSON هستند. فرمت JSON یک راه خوب برای انتقال داده ها است و در AngularJS یا هر کد JavaScript دیگری استفاده می شود.

مثال: فرض کنید روی سرور ، یک برنامه بنام customer.php وجود دارد که داده ها را با فرمت JSON بصورت زیر تولید می کند:

{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
},
{
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
},
{
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
},
{
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
},
{
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
},
{
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
},
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}

قطعه کد زیر در انگولار جی اس ، لیست مشتریان را از سرور دریافت کرده و نمایش می دهد:

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