שיעור 19 באנגולר – Services

מהו Service באנגולר ?

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

איך יוצרים service באנגולר ?

  • ניצור מחלקה חדשה, מקובל לשים services בתיקיה שנקראת services
  • כדי ה- service שלנו יוכל להיות מוזרק לקומפוננטות ( Depency Injection ) , אז אנחנו צריכים לעשות import   של Injectable , שמאפשר למחלקה להיות מוזרקת בהמשך.
  • ובסופו של דבר, נרשום את ה- service ברשימת הספקים הקיימים, שנמצאת במערך ngModule
  • אם עשינו את כל אלו – נוכל להזריק ולהשתמש ב- service בכל קומפוננטה שנרצה.

איך יוצרים service באמצעות כלי שורת הפקודה angular cli ?

  • נקליד :
ng g service MY_SERVICE_NAME

דוגמא בסיסית ל-service באנגולר

  • בקטעי קוד הבאים רואים service פשוט שמחזיר מערך של מידע.
  • ה-service נרשם כספק במערך ה-providers בקובץ app.module.ts ( וכמובן מיובא שם )
  • ה- service מוזרק לתוך קומפוננט ( וכמובן מיובא שם )  בקונסטרקטור
  • המידע מה-service עובר למשתנה בקומפוננט, ומוצג על המסך עם לולאה של אנגולר.
---------- the service file --------------
import { Injectable } from '@angular/core';

@Injectable()

export class BasicService {
 users:string[];

 constructor() {
 this.users = ["Bubu","Koko","Moko"];
 }

 getUsers(){
 return this.users;
 }
}


---------- app.module.ts -----------------

...
...
import { BasicService } from './services/basicService2/basic.service';

...
...
providers: [
 ...
 ...
 
 BasicService
 ],

---- קובץ הקומפוננט --------------------

import { Component, OnInit } from '@angular/core';
import { BasicService } from './../../services/basicService2/basic.service';

@Component({
 selector: 'app-just-another-component',
 template:` 
 
 <h1>Hi</h1>
 <ul>
 <li *ngFor="let user of users">
 {{ user}}
 </li>
 </ul>
 
 `
})
export class JustAnotherComponentComponent implements OnInit {

 users:string[];

 constructor(public basicService:BasicService ) { 

 this.users = this.basicService.getUsers();

 }

 ngOnInit() {
 }

}

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *