در قسمت قبل لیستی از Course ها نمایش دادیم که البته در بدنه Component به Hard Code شده وجود داشتند.
بسمه تعالی
در قسمت قبل لیستی از Course ها نمایش دادیم که البته در بدنه Component به Hard Code شده وجود داشتند.
در پروژه های واقعی اصولن دیتا از سمت سرور ارسال میشود . از لحاظ اصولی Component نباید حاوی Logic های سیستم ما باشد، در نتیجه قرار نیست اینجا کدی بنویسیم که بتواند دیتا را از سمت سرور دریافت و به کامپوننت منتقل کند. اصولن Logic پروژه باید در کلاسهای دیگر کپسوله سازی شود که به سرویس معروفند. خوب پس حالا قصد داریم یک Service در این پروژه Create کنیم و بعد Component دیتا را از طریق آن دریافت نماید.
اسم سرویس را قرار است course بگذاریم ، در نتیجه به فولدرApp میرویم و یک فایل جدید به نام course.service.ts می سازیم. پس حالا با قوانین نامگذاری سرویسها هم آشنا شدید . اسم سرویس ، کلمه سرویس و پسوند فایل که طبیعتا ts می باشد. سرویس هم همانطور که میبینید یک کلاس ساده است.
یک متد به نام GetCourses درون آن به شکل زیر ایجاد میکنیم.
همانطور که مشاهده میکنید یک متد getCourses داریم که یک Array بر میگرداند . آن Array را از داخل Component برداشتم و به عنوان خروجی این متد قرار دادم. خوب مرحله بعدی پیاده سازی یک Dependency Injection در Component و به اصطلاح Consume کردن این سرویس می باشد .
به درون Course Component بر میگردیم. ابتدا باید Service را در کامپوننت Import نماییم.
حالا سرویس در سطح Component قابل استفاده است. حالا وقت ایجاد یک متد سازنده برای کلاس Component است.
متد سازنده کلاس Component را به شکل زیر تغییر میدهیم.
اگر الان پروژه را اجرا کنید، با Error روبرو میشود و لیست Course ها نمایش داده نخواهد شد . باید سرویس را به شکل زیر از طریق Provider تعریف نماییم.
پس از Template باید یک کاما اضافه کرد و از طریق Provider به شکل بالا سرویس را معرفی نمود. حالا درکل بدنه فایل کامپوننت ما به شکل زیر خواهد شد.
حاصل اجرا هم که از نظر ظاهری با پایان قسمت قبلی فرقی نخواهد داشت.
حال ممکن است این سرویس یک RestAPI یا ... را صدا بزند تا Data از دیتابیسی مانند SQL یا MongoDB یا ... به سمت کلاینت ارسال شود . اینها مراحلی است که در قسمتهای بعدتر و جلوتر به همه آنها خواهیم پرداخت .
در بخش بعدی به Directive ها به شکل دیگری نگاه خواهیم کرد و نقش آنها در DOM را هم بررسی خواهیم نمود.
دانلود سورس پروژه