آموزش سرویس ها در انگولار ۲

آموزش سرویس ها در انگولار ۲

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

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

هنگام ایجاد یک سرویس، مراحل کلیدی زیر باید انجام شود.

مرحله ۱ – یک کلاس جداگانه ایجاد کنید که دارای تزئین تزریقی است. تزئین تزریقی اجازه می دهد تا عملکرد این کلاس در هر ماژول Angular JS تزریق و مورد استفاده قرار گیرد.

@Injectable() 
   export class classname {  
}

مرحله ۲ – بعد در ماژول برنامه کامپوننت یا ماژولی که می خواهید از سرویس در آن استفاده کنید ، باید آن را به عنوان ارائه دهنده درComponent decorator تعریف کنید.

@Component ({  
   providers : [classname] 
})

بیایید به یک مثال در مورد چگونگی دستیابی به این هدف نگاه کنیم. در ادامه مراحل مربوط به آن آمده است.

مرحله ۱ – یک فایل ts برای سرویس به نام app.service.ts ایجاد کنید.

مرحله ۲ – کد زیر را در پرونده ایجاد شده در بالا قرار دهید.

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

نکات زیر باید در مورد برنامه فوق ذکر شود.

• دکوارتور تزریقی از ماژول زاویه ای/اصلی وارد شده است.
• ما در حال ایجاد یک کلاس به نام appService هستیم که با تزئین تزریق تزئین شده است.
• ما یک تابع ساده به نام getApp ایجاد می کنیم که یک رشته ساده به نام “سلام جهان” را برمی گرداند.

مرحله ۳ – در فایل app.component.ts کد زیر را قرار دهید.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

نکات زیر باید در مورد برنامه فوق ذکر شود.

ابتدا ماژول appService خود را در ماژول appComponent وارد می کنیم.

سپس ما سرویس را به عنوان ارائه دهنده در این ماژول ثبت می کنیم.

در سازنده یک متغیر به نام _appService از نوع appService تعریف می کنیم تا بتوان آن را در هر جایی از ماژول appComponent فراخوانی کرد.

به عنوان مثال در ngOnInit lifecyclehook ، تابع getApp سرویس را فراخوانی کرده و خروجی را به ویژگی مقدار کلاس AppComponent اختصاص می دهیم.

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را رفرش کردید، خروجی زیر را دریافت خواهید کرد.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲
20. آموزش کنترل های شخص ثالث در انگولار ۲
21. آموزش نمایش داده ها در انگولار ۲
22. آموزش مدیریت رویدادها در انگولار ۲
23. آموزش تبدیل داده ها در انگولار ۲
24. آموزش Pipe سفارشی در انگولار ۲
25.  آموزش ورودی کاربر در انگولار ۲
26. آموزش Lifecycle Hooks در انگولار ۲
27. آموزش ظروف تو در تو در انگولار ۲