نحوه استفاده از سرویس http در angular

یکی از مهمترین و پرکاربردترین سرویس های انگولار، سرویس http می باشد که برای ارتباط با سرور مورد استفاده قرار می گیرد و به کمک این سرویس می توان اطلاعاتی را به سرور (جهت ذخیره سازی در پایگاه داده) ارسال و یا اطلاعاتی را از سرور (جهت نمایش در صفحه) دریافت نمود.

نحوه استفاده

سرویس http دارای متدی به نام get می باشد که یک آدرس را به عنوان پارامتر دریافت می کند. این آدرس یک آدرس api می باشد که توسط برنامه نویس در تکنولوژی های سمت سرور مانند: node.js, asp.net mvc, php و ... پیاده سازی شده و در اختیار شما قرار می گیرد. در مثال زیر یک api به آدرس زیر قابل دسترس می باشد.

https://beno.biz/api/test/helloworld

آدرس این api به عنوان پارامتر به متد get ارسال می شود و پس از فراخوانی این متد، می بایست متد then نیز فراخوانی شود.

در متد then یک function به همراه یک پارامتر ورودی (مانند response) تعریف می شود که کلیه اطلاعات استخراج شده توسط api، درون این متغیر قرار می گیرد و به وسیله دستور زیر قابل استفاده می باشد.

response.data

بنابراین کدهای کامل استفاده از سرویس http به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <h2>{{message}}</h2>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope, $http) {
        $http
          .get("https://beno.biz/api/test/helloworld")
          .then(function (response) {
            $scope.message = response.data;
          });
      });
    </script>
  </body>
</html>

در صورتیکه که برنامه فوق را اجرا کنید مشاهده می کنید که یک پیغام توسط api استخراج شده و در صفحه نمایش داده می شود. در پروژه های واقعی می توان اطلاعاتی مانند لیست محصولات، لیست سفارش ها، لیست کاربران و ... را به وسیله سرویس http استخراج و همانند مثال فوق در صفحه نمایش داد.

متدها

سایر متدهای این سرویس عبارتند از:

  • get
  • delete
  • head
  • jsonp
  • patch
  • post
  • put

پر استفاده ترین و پرکاربردترین متد، get می باشد که جهت استخراج اطلاعات مورد استفاده قرار می گیرد.

نمایش اطلاعات در جدول

معمولا api ها اطلاعاتی بیش از متن ساده را بر می گردانندو اغلب آرایه ای از اطلاعات را بر از پایگاه داده استخراج کرده و به برنامه بر میگردانند. لیست مشتریان، لیست محصولات، سفارش های کاربر و ... همگی از این نوع می باشند که بهترین گزینه برای نمایش آنها، استفاده از یک جدول می باشد. برای تمرین این بخش یک api در آدرس زیر وجود دارد که با فراخوانی آن می توانید لیستی از محصولات را مشاهده نمایید.

https://beno.biz/api/test/products

نحوه نمایش اطلاعات در قالب یک جدول، به شکل زیر می باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <h2>Product List</h2>
      <table>
        <tr ng-repeat="x in list">
          <td>
            {{x.Name}}
          </td>
          <td>
            {{x.Color}}
          </td>
          <td>
            {{x.Price}}
          </td>
        </tr>
      </table>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope, $http) {
        $http
          .get("https://beno.biz/api/test/products")
          .then(function (response) {
            $scope.list = response.data;
          });
      });
    </script>
  </body>
</html>

در این مثال اطلاعات استخراج شده از api درون متغیر list قرار گرفته اند و توسط ng-repeat اطلاعات موجود در آن در سطرهای مختلف جدول نمایش داده می شوند.

در صورتیکه قصد داشته باشید جدول شما شکل ظاهری بهتری داشته باشد، می توانید استایل زیر را نیز به آن اضافه کنید.

<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }

  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }

  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>

پس از اعمال کردن استایل، خروجی به شکل زیر خواهد بود.

جداول در انگولار