מדריך Angular – הזרקת תלויות Dependency Injection

מדריך Angular – הזרקת תלויות Dependency Injection

לאחר שלמדנו במאמר הקודם על ניהול אירועים – כעת נדבר על נושא של Dependency Injection.

הזרקת תלויות (Dependency Injection) היא אחת מהתכונות המרכזיות והחשובות ביותר של אנגולר. במאמר זה נסקור את היסודות של הזרקת תלויות באנגולר, נבין כיצד היא פועלת ונראה דוגמאות פרקטיות להמחשה. הזרקת תלויות מאפשרת לקומפוננטות לתקשר ביניהן בצורה יעילה ומסודרת תוך שמירה על עקרונות תכנון נכונים.

מהי הזרקת תלויות?

הזרקת תלויות היא תבנית עיצוב שבה תלויות (תצורות, שירותים, או רכיבים אחרים) מוזרקות לקומפוננטה או לשירות בזמן יצירתם במקום ליצור אותן בתוך הקומפוננטה עצמה. הדבר מאפשר להפריד בין היצירה של התלויות לשימוש בהן, מה שמוביל לקוד יותר גמיש וקל לתחזוקה.

כיצד הזרקת תלויות פועלת באנגולר?

באנגולר, הזרקת תלויות מנוהלת על ידי מערכת ה-Injector. ה-Injector הוא מערכת שמחזיקה ומנהלת את התלויות ומאפשרת לקומפוננטות ושירותים לגשת אליהן בצורה אוטומטית. נתחיל בדוגמה פשוטה של הזרקת תלויות בקומפוננטה באנגולר.

דוגמה פשוטה להזרקת תלויות

ניצור שירות פשוט שנקרא LoggerService וקומפוננטה שנקראת AppComponent שמשתמשת בשירות זה.

יצירת השירות

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

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  log(message: string) {
    console.log('LoggerService:', message);
  }
}

שימוש בשירות בקומפוננטה

import { Component, OnInit } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private logger: LoggerService) {}

  ngOnInit() {
    this.logger.log('AppComponent initialized!');
  }
}

הזרקת תלויות מרובות

ניתן להזריק מספר תלויות לקומפוננטה או לשירות. בדוגמה הבאה נוסיף שירות נוסף שנקרא DataService ונראה כיצד להזריק אותו יחד עם LoggerService.

יצירת DataService

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['Data 1', 'Data 2', 'Data 3'];
  }
}

שימוש בשירותים בקומפוננטה

import { Component, OnInit } from '@angular/core';
import { LoggerService } from './logger.service';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private logger: LoggerService, private dataService: DataService) {}

  ngOnInit() {
    this.logger.log('AppComponent initialized!');
    this.data = this.dataService.getData();
  }
}

הגדרת ספקים (Providers)

ניתן להגדיר ספקים (providers) של שירותים ברמת המודול, הקומפוננטה או אפילו ברמת השירות עצמו. ספקים הם אלה שמגדירים כיצד השירותים ייווצרו ויוזרקו. בדוגמה זו נראה כיצד להגדיר ספק ברמת המודול.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoggerService } from './logger.service';
import { DataService } from './data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [LoggerService, DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

הזרקת תלויות בקומפוננטות ילדים

כאשר יש לנו קומפוננטות ילדים, ניתן להזריק את התלויות גם להן. בדוגמה זו נוסיף קומפוננטת ילד שנקראת ChildComponent ונראה כיצד להזריק את LoggerService לתוכה.

יצירת ChildComponent

import { Component, OnInit } from '@angular/core';
import { LoggerService } from '../logger.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  constructor(private logger: LoggerService) {}

  ngOnInit() {
    this.logger.log('ChildComponent initialized!');
  }
}

שימוש בקומפוננטת הילד בקומפוננטת ההורה

<app-child></app-child>

הזרקת תלויות מתקדמת

אנגולר תומכת בהזרקת תלויות מתקדמת הכוללת שימוש בטוקנים (tokens) ובספקים מותאמים אישית. נבחן כיצד להשתמש בטוקנים כדי להזריק ערכים ספציפיים לקומפוננטות ושירותים.

שימוש בטוקנים מותאמים אישית

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

export const API_URL = new InjectionToken('API_URL');

@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule { }

הזרקת טוקנים מותאמים אישית בקומפוננטה

import { Component, Inject } from '@angular/core';
import { API_URL } from './app.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(API_URL) private apiUrl: string) {
    console.log('API URL:', this.apiUrl);
  }
}

סיכום

הזרקת תלויות היא כלי רב עוצמה באנגולר שמאפשר לנהל בצורה יעילה את התלויות בין קומפוננטות ושירותים. במאמר זה סקרנו את היסודות של הזרקת תלויות, ראינו דוגמאות פשוטות ומתקדמות והבנו כיצד להשתמש בהן בקומפוננטות ושירותים באנגולר. חשוב להכיר את היכולות המתקדמות של הזרקת תלויות כדי לכתוב קוד נקי, יעיל וקל לתחזוקה.

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

במאמר הבא נלמד על ראוטינג (Routing) באפליקציית אנגולר

שתפו את הפוסט

דילוג לתוכן