یادگیری Angular با مثال – سرویس http$

یادگیری Angular با مثال –  سرویس http$

مقدمه

 

امروزه ارتباط بین برنامه ها از طریق API با یکدیگر امری عادی است. به عنوان مثال وقتی کاربر محصولی را می خواهد از فروشگاه اینترنتی خریداری کند، سایت می بایسد از API بانک استفاده کند تا مشخصات کارت خریدار را شناسایی کند (البته قصد نداریم یک فروشگاه اینترنتی درست کنیم). در این مثال خواهیم دید که Angular چطور درخواست HTTP به یک API را ایجاد می کند و مسئولیت رسیدگی APIهای JSON را بر عهده دارد.

 

شروع

 

در اینجا می خواهیم از سایت JSONPlaceholder که محتوای آماده ای را در قالب JSON برای ما فراهم می کند. ما قصد داریم یک برنامه بسیار ساده درست کنیم که کاربر بتواند لیست اسامی چند نویسنده را مشاهده کند و با کلیک بر روی هر کدام، پست های نویسنده انتخاب شده را مشاهده کند.

 

[button type=”success” size=”lg” link=”http://www.baboon.ir/uploads/2015/12/angular-http/index.html”] [fa type=”globe”] دمو [/button]

 

در سایت JSONPlaceholder آدرس های متفاوتی وجود دارد که هر کدام محتوای خاصی را در قالب JSON فراهم می کند:

 

 

اگر از Google Chrome استفاده می کنید از پلاگین JSONView استفاده کنید تا ساختار JSON را مرتب و قابل خواندن مشاهده کنید:

 

http در Angular

 

قبل از اینکه شروع به ساخت برنامه ساده خود کنیم، بد نیست که به این مثال توجه کنیم! به عنوان مثال اگر بخواهیم لیست پست های نویسنده ای با آی دی 8 را مشاهده کنیم می توانیم از مسیرهای زیر استفاده کنیم:

 

 

برای اطلاعات بیشتر پیشنهاد می شود به سایت JSONPlaceholder مراجعه کنید.

 

app.js

 

برای شروع در دایرکتوری پروژه خود فایلی به نام app.js ایجاد کنید تا اسکریپت های خود را اضافه کنیم.

همانطور که از قسمت های قبل یاد گرفته ایم با استفاده از اسکریپت زیر برنامه آنگولار خود را با نام myApp تعریف می کنیم:

 

 

تعریف Service

 

حال یک service با userObj تعریف می کنیم تا آن را به Controller برنامه خود تزریق کنیم:

 

 

همانطور که مشخص است در متغیر urlBase آدرس سایتی که محتوای json را فراهم می کند را اضافه می کنیم. در ادامه متدهای getAllUsers و getUserById را تعریف کرده ایم که به ترتیب، وظیفه خواندن لیست نویسنده ها از آدرس /users و خواندن پست ها بر اساس آی دی نویسنده بر عهده دارند. خواندن این داده های json را از طریق http.get$ انجام می دهیم.

 

تعریف Controller

 

 

در کد فوق، ما کنترولر myCtrl را تعریف کرده ایم که ماژول های $scope و $http و همچنین سرویس userObj که تعریف کرده بودیم را به Controller برنامه خود تزریق کرده ایم.

 

 

ما ابتدا از طریق userObj به متد getAllUsers دسترسی پیدا می کنیم تا لیست اسامی نویسنده ها را در متغیر data قرار دهیم. در تکه کد فوق، اگر عملیات درخواست HTTP به درستی انجام شود و داده ها به درستی برگشت داده شوند، متد success اجرا می شود. اگر اینطور نباشد خطا را با متد error نمایش می دهد.

 

 

به همین ترتیب تابع userInfo را تعریف می کنیم که دارای پارامترهای $id و event است. مقدار $id به متد getUserById منتقل می شود تا بر اساس آی دی، پست های نویسنده را نمایش دهد.

 

 

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

 

index.html

 

حال فایل index.html را در ریشه پروژه اضافه کنید و HTMLهای ساده همراه با دایرکتیوها را به فایل اضافه کنید:

 

 

در این مثال نیز مثل بیشتر مثال های قبل برای اینکه ظاهر برنامه خوب به نظر برسد از Bootstrap استفاده کرده ایم، پس توجه داشته باشید که مجبور به استفاده فریم ورک Bootstrap نیستید و فقط می تواند بر روی منطق برنامه تمرکز کنید.

 

همانطور که مشاهده می کنید دایرکتیو های فوق به توضیح خاصی نیاز نیست چون در قسمت های قبل با آنها آشنا شده ایم.

 

style.css

 

امیدوارم در این مثال نیز توانسته باشم اندکی از کاربردهای AngularJS را به شما انتقال دهم. در قسمت بعد قصد داریم با استفاده از APIهایی که Instagram برای ما فراهم می کند یک گالری عکس ساده درست کنیم.


  • ژورا

    سلام آقا پاتریک
    سایت و مطالب فوق العادس اگر به روز کنی و کات نکنی.
    بنظرت یادگیری انگولار 1 با توجه به اینکه انگولار 2 کاملا متفاوت هست و بزودی پشتیبانی از اون قطع میشه، کار درستی هست؟
    خیلی ممنون

    • پاتریک

      سلام آقا ژورا
      خواهش می کنم مرسی که مطالب را دنبال می کنید. بله حتما ادامه می دهم 😉
      آنگولار ۱ قرار نیست جایی بره، پشتیبانیش قطع نمی‌شه!
      بنظرم از انجایی که نسخه ۲ متفاوت و بهتره، این کاملا به فرد بستگی خواهد داشت که نسخه ۱ را هم یاد بگرید. بنظرم به عنوان برنامه نویسی داشتن پس زمینه ای از نسخه ۱ بهتر خواهد بود. با این حال به شما بستگی داره ژورا جان 😉

      مرسی 🙂

  • سلام
    آموزش های Angular.js نسخه دو را هم منتشر میکنید؟

    • پاتریک درآواکیانس

      حتما 😉