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

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

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

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

مرحله ۱ – یک کلاس جداگانه ایجاد کنید که دارای تزئین تزریقی است. تزئین تزریقی اجازه می دهد تا عملکرد این کلاس در هر ماژول 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"; 
   } 
}

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

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

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

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

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

@Component({ 
   selector: 'my-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 در انگولار ۲