در این مقاله در باره سرویس Http آنگولار بیشتر توضیح داده ایم.
در مقاله سرویس ها در آنگولار جی اس درباره سرویس های Http به اختصار صحبت کردیم و قول دادیم که در مقاله این این بحث را پی بگیریم در این مقاله به تشریح سرویس http خواهیم پرداخت
سرویس $http یک سرویس خواندن اطلاعات از سرور است.
سرویس $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>
مشاهده نتیجه
متدها:
مثال بالا از متد .get برای سرویس $http استفاده کرده است.
متد .get یک shortcut method در سرویس $http است .سرویس های دیگر از نوع shortcut methods وجوددارند:
.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 را برای یک شیئ پردازش خواهد کرد. در این مثال برای موفقیت در خوانش یک آدرس و برای خطای آن شرط های تعیین شده است.
ویژگی ها
پاسخگویی از سمت سرور یک شیئ خواهد بود که این ویژگی ها را در برخواهد داشت.
.config: این شیئ برای ایجاد درخواست استفاده میشود.
.data: یک رشته و یا یک شئی ، که پاسخ سرور را دریافت می کند.
.headers: یک عملگر برای استفاده از اطلاعات get 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:
اطلاعاتی که از سرور برای شما ارسال میشود با فرمت JSON است .
JSON بهترین روش برای ارسال داده ها میباشد. و استفاده از آن در آنگولار و سایر javascript ها ساده است.
مثال: بعنوان مثال در سرور ما فایلی از شئی JSON داریم که دارای 15 مشتری است که در آرایه ای به نام records نگه داری میشود.
مثال :
دستورالعمل ng-repeat برای ایجاد حلقه در یک آرایه بسیار مناسب است:
<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 و $http را بهمراه تعریف این کنترلر استفاده کرده ایم.
$http یک شیئ XMLHttpRequest است که برای یک داده خارجی درخواستی را ارسال کرده است.
متد $http.get() داده های JSON را از سایت https://www.w3schools.com/angular/customers.php میخواند اگر این عملیات با موفقیت همراه بود کنترلر یک ویژگی ایجاد خواهد کرد ، myData ، که در متد scope با داده های JSON از سرور خوانده میشود.
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد