Δημιουργία Υπηρεσίας στο Angular

Ας ξεκινήσουμε τη μελέτη των υπηρεσιών δημιουργώντας τη δική μας. Για να το κάνουμε αυτό, στο φάκελο test/src/app θα φτιάξουμε το αρχείο data.service.ts. Αφήστε την υπηρεσία μας να είναι υπεύθυνη για την εμφάνιση ορισμένων δεδομένων στην οθόνη.

Ας φτιάξουμε μια κλάση για την υπηρεσία μας:

export class DataService {
	
}

Τώρα χρειαζόμαστε τον decorator Injectable. Η εφαρμογή του θα επιτρέψει στην κλάση της υπηρεσίας να μπορεί να εγχυθεί στην κλάση του component. Θα μιλήσουμε για την εγχύτηση στο επόμενο μάθημα. Για τώρα ας εισάγουμε τον απαραίτητο decorator:

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

export class DataService {
	
}

Ας τον εφαρμόσουμε στην κλάση μας:

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

@Injectable()
export class DataService {
	
}

Τώρα ας φτιάξουμε την κλάση μας ώστε να περιέχει κάποια δεδομένα. Συνήθως στις εφαρμογές Angular τα δεδομένα φορτώνονται από τον διακομιστή, αλλά εμείς για εκπαιδευτικούς λόγους θα χρησιμοποιήσουμε έναν πίνακα. Ας τον φτιάξουμε σε μια ιδιωτική ιδιότητα:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Ας γράψουμε τώρα μια μέθοδο για την ανάκτηση των δεδομένων:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Η υπηρεσία μας είναι έτοιμη. Στο επόμενο μάθημα θα τη συνδέσουμε με την κλάση του component.

Δημιουργήστε τη δική σας υπηρεσία, που θα επιστρέφει έναν πίνακα αντικειμένων με προϊόντα:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]