021-28423015
021-28423015

http در AngularJS

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

http$ در AngularJS

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

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

مثال http در AngularJS
<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$ فراخوانی می شوند:

مثال http در AngularJS
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 را بر می گرداند.

مثال http در AngularJS
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 به تابع خود اضافه میکنیم :

مثال http در AngularJS
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 مشتری را بر میگرداند. رکورد ها در درون آرایه قرار می گیرند:

مثال http در AngularJS
<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 قرار می دهد.


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط