הכרות עם Services

למה משמש service באנגולר

Service הוא class רב פעמי ואפשר להשתמש בפונקציות או במשתנים שלו במספר קומפוננטות.

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

נסתכל על מבנה הקבצים הבא:

src 
└── app.module
    │
    ├──  app.component.ts
    │
    └──  app.component.html
         │
         └── <employee-list></employee-list>
             │
             ├── employee-list.component.ts -- employees array
             │
             └── employee-list.component.html
                 │
                 └── <employee-detail></employee-detail>
                     │
                     ├── employee-detail.component.ts
                     │
                     └── employee-detail.component.html

אנחנו קוראים לקומפוננטה של רשימת העובדים.

app.html

<employee-list></employee-list>

ב-class יש לנו את רשימת העובדים שאותה נמשוך לתצוגת העמוד.

employee-list.ts

public employees = [
    {"id": 1, "name": "Jack", "age": 30},
    ...
]

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

employee-list.html

<ul *ngFor="let employee of employees">
  <li>{{ employee.name }}</li>
</ul>

בקומפוננטה הבאה אנחנו שוב צריכים את הרשימה של העובדים, נצטרך שוב לשים אותה ב-class של פרטי העובדים.

employee-detail.html

<ul *ngFor="let employee of employees">
  <li>{{ employee.id }} - {{ employee.name }} - {{ employee.age }}</li>
</ul>

במקרה כזה נרצה להשתמש ב-service שיביא לנו את רשימת העובדים לכל מקום שנצטרך.

Service – a class with a specific purpose

ה-service משמש לשיתוף של מידע, ליצירת פונקציות של לוגיקה באפליקציה שצריך להשתמש בה במקומות שונים ולהתקשרות חיצונית, למשל הבאת מידע מ-DB.

Dependency injection

למה צריך Dependency injection?

נניח שיש לנו מכונית, למכונית יש גלגלים ומנוע.

הבנאי של המכונית קורא לבנאי של המנוע והגלגלים.

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

כל פעם שיהיה שינוי ב-Constructor של class כלשהו שאנחנו משתמשים בו, נצטרך לעדכן את ה-class שמשתמש בו.

הפתרון ליצור dependencies ולהעביר אותם כשבונים את ה-class.

אנחנו מגדירים את ה-class הראשי.

רושמים את ה-service ב-constructor של ה-class.

עכשיו, בכל פעם שיהיה שינוי ב-service, ה-class יתעדכן בהתאם.