سرویس ها در انگولار (Services)

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

بگذارید تعریف بالا را یکم ساده تر بیان کنم:

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

حالا ما برای استفاده از سرویس ها باید با دو مفهوم Injector و Provider آشنا بشیم.

مفهوم Injector

در انگولار مفهومی به نام Injector‌ به عنوان ابزاری جهت دسترسی به سرویس‌ها معرفی شد.
در واقع با استفاده از Injector می‌توان یک وابستگی را به یک کامپوننت تزریق کرد.

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

برای دسترسی به این نمونه باید با مفهومی به نام provider آشنا شوید.

مفهوم Provider

به انگولار می‌گوید که چگونه یک کلاس را ایجاد کن! یعنی دقیقا فرمان تولید یک نمونه از کلاس را به صورت اتوماتیک برای سرویس فراهم می‌کند.
یعنی یک service provider به عنوان بستری برای تولید خودکار نمونه از یک کلاس معرفی می‌شود.

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

مثلا ما میخواهیم در تمام صفحاتمون ساعت و تاریخ جاری را در بالای صفحه داشته باشیم، روند این کار را در ادامه باهم انجام میدهیم:

ابتدا من یک کامپوننت جدید با نام services ساختم و میخواهم به این کامپوننت ساعت و تاریخ را با استفاده از سرویسی که در ادامه میسازم تزریق کنم.

به منظور ایجاد یک سرویس باید از خط فرمان دستور زیر را استفاده کنید:

ng g service (نام برای سرویس )
ng g service myservice

با این خط کد دو فایل برای ما ایجاد می شود:

CREATE src/app/myservice.service.spec.ts

CREATE src/app/myservice.service.ts

محتوای فایل myservice.service.ts:

در کد بالا ماژول Injectable از angular/core وارد شده و شامل یک متد با نام Injectable@ و یک کلاس با نام MyserviceService است. تابع مربوط به سرویس در این کلاس ایجاد خواهد شد.

قبل از استفاده از سرویس ایجاد شده باید آن را به فایل app.module.ts اضافه کنیم. مانند نمونه زیر:

در کد فوق سرویس ایجاد شده را import کرده و سپس MyserviceService را به بخش providers اضافه کرده ایم.

حالا در myservice.service.ts، یک تابع برای نمایش ساعت و تاریخ روز جاری ایجاد می کنیم.

در کد فوق یک تابع با نام showTodayDate که یک نمونه از کلاس Date باز می گرداند را ایجاد کرده ایم.

حال برای دسترسی به این تابع در سایر کامپوننت ها می توانید به صورت زیر عمل کنید.

برای دسترسی به اجزای سرویس مورد نظر باید آن را import کنید و در بخش constructor سرویسی که ساختیم را معرفی کنیم.

(تابع ngOnInit به صورت پیشفرض در زمان ایجاد شدن کامپوننت فراخوانی می شود و تاریخ را با استفاده از تابع showTodayDate می گیرد و در متغیر todayDate قرار می دهد.)

حال به راحتی می توانیم آن را در فایل html نمایش دهیم:

خروجی به شکل زیر است:

به همین راحتی :)

حالا ما می توانیم با روش بالا در هر کامپوننتی این سرویس را اضافه و استفاده کنیم.

برای تکمیل کردن این بخش یک توضیح کلی در ارتباط با ساختار درختی سرویس‌ها و انگولار خدمت شما مطرح می‌کنم.

ساختار درختی Injector در سرویس‌ ها

سرویس ‌ها نیز همانند کامپوننت‌ ها می‌توانند دارای فرزند باشند و روابط والد و فرزندی بین ‌آنها نیز برقرار است اما قبل از بررسی این موضوع یک ساختار درختی برای ارتباط بین کامپوننت‌ها و سرویس‌ها در نظر می‌گیریم.

در بالاترین رده‌ی ممکن AppModule وجود دارد که در آن تمام سرویس ‌ها، تمام دستور ها و تمام کامپوننت‌ها در دسترس است. یعنی بالاترین سطح ممکن در یک نرم‌افزار انگولاری مربوط به این کلاس است.

در مرحله‌ی بعدی AppComponent‌ ها به عنوان بالاترین سطح معرفی می‌شوند که در آن‌ها تمام سرویس‌ها در دسترس هستند اما در این سطح سرویس ‌ها برای یکدیگر در دسترس نخواهند بود.

مرحله‌ی آخر به Any Other Component ختم می‌شود که یک نمونه از کلاس سرویس درون یک کامپوننت و تمام کامپوننت‌های فرزند آن در دسترس است.

پایان//

امیدوارم از این مقاله راضی باشید...