پیشنهاد می‌شود به شما عزیزان قبل از ورود به این قسمت از آموزش‌های انگولار جی اس سایر قسمت‌های این آموزش را نیز مطالعه فرمایید. برای بر روی دوره‌ی کامل انگولار جی اس کلیک کنید.
سرویس $http در انگولار
سرویس $http در انگولار وظیفه‌ی ارسال درخواست و دریافت پاسخ آن درخواست را دارد.
$http یک درخواست ساده برای سرور ایجاد کنید و نتیجه را در هدر نمایش دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 هستند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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({ method : "GET", url : "welcome.htm" }).then(function mySuccess(response) { $scope.myWelcome = response.data; }, function myError(response) { $scope.myWelcome = response.statusText; }); }); </script> |
خواص سرویس $http
پاسخ از سرور به‌صورت یکشی است که با خواص زیر مقداردهی خواهد شد حال به بررسی هریک از مقادیر خواهیم پرداخت.
.config شیء مورداستفاده برای تولید درخواست می‌باشد.
.data یک رشته یا یک شیء که پاسخ را از سرور دریافت می‌کند.
.headers یک تابع برای استفاده از اطلاعات هدراست.
.status یک شماره تعیین وضعیت HTTP.
.statusText یک رشته تعریف وضعیت HTTP.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div ng-app="myApp" ng-controller="myCtrl"> <p>Data : {{content}}</p> <p>Status : {{statuscode}}</p> <p>StatusText : {{statustext}}</p> </div> < script > 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; }); }); </script> |
برای رسیدگی به خطا، یک توابع دیگر را به روش .then اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{content}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("wrongfilename.htm") .then(function(response) { $scope.content = response.data; }, function(response) { $scope.content = "Something went wrong"; }); }); </script> |
JSON
انتظار می‌رود داده‌هایی که از پاسخ دریافت می‌کنید در قالب JSON باشد.
JSON یک روش عالی برای انتقال داده‌ها است و از AngularJS یا هر JavaScript دیگر استفاده می‌شود.
مثال: در سرور ما یک فایل داریم که یکشی JSON را که حاوی 15 مشتری است را باز می‌کند، همه در آرایه به نام records قرار می‌گیرند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 و $http تعریف می‌شود.
$http یک شیء XMLHttpRequest برای درخواست داده‌های خارجی است.
در مورد موفقیت، کنترل‌کننده یک املاک، myData، در محدوده، با داده‌های JSON از سرور ایجاد می‌کند.
امیدوارم این قسمت از آموزش‌های انگولار هم برای شما عزیزان مفید واقع‌شده باشد.
امیدوارم این قسمت از آموزش‌های انگولار هم برای شما عزیزان مفید واقع‌شده باشد.
برای اطلاعات بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.
موفق باشید
