Υποενότητα 14.1: Angular και Reactive programming - Πρακτική

Εισαγωγή

Σε αυτήν την υποενότητα, θα πάρετε την πρώτη σας εμπειρία με τα παρατηρήσιμα- Observables στο Angular. Θα τροποποιήσετε τις υπηρεσίες για να χρησιμοποιήσετε Observables.
Στη συνέχεια, θα ενεργοποιήσετε τις συνιστώσες - components να εγγραφούν -  subscribe στα observables που θα τα χρησιμοποιήσετε για να λάβετε τα δεδομένα. Θα :

• Χρησιμοποιήσετε παρατηρήσιμα - observables στην εφαρμογή Angular 
• Λάβετε δεδομένα με την εγγραφή - subscribing στα observables στις components.

Για να δημιουργήσουμε εφαρμογές με αναδραστικό προγραμματισμό  - reactive programming, θα χρησιμοποιήσουμε τη βιβλιοθήκη RxJS. Αυτή η βιβλιοθήκη περιλαμβάνεται από προεπιλογή στο Angular :

Ενημέρωση Υπηρεσιών

Ανοίξτε τοn dish.service.ts και ενημερώστε τις μεθόδους του ως εξής:

...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
...
@Injectable()
export class DishService {
 constructor() { }
 getDishes(): Observable<Dish[]> {
   return Observable.of(DISHES).delay(2000);
 }
 getDish(id: number): Observable<Dish> {
   return Observable.of(DISHES.filter((dish) => (dish.id === id))[0]).delay(2000);
 }
}

Δείτε : 

• Την εισαγωγή  { Observable } from 'rxjs/Observable';
  • Tην εισαγωγή μερικών τελεστών - operators που χρειαζόμαστε στην υπηρεσία dish service. Χρησιμοποιούμε αυτούς τους τελεστές μόνο για να ελέγξουμε ότι τα παρατηρήσιμα λειτουργούν.

• import 'rxjs/add/operator/delay'
• import 'rxjs/add/observable/of'

Επίσης, ενώ δοκιμάζετε τα observables  πρέπει να λάβετε υπόψη τα παρακάτω:

• • Αν θέλετε να εκπέμπεται μόνο μία τιμή από το  Observable, θα χρησιμοποιήσετε τη μέθοδο  of και αυτό θα πάρει οποιαδήποτε value από εκεί. 
  • Η καθυστέρηση  delay(2000) θέλουμε να καθυστερήσουμε την εκπομπή της τιμής κατά δύο δευτερόλεπτα
  • Το  Observable<Dish[]> στην μέθοδο getDishes. Επιστρέφει  Observables μιας Dish array αντί για την ίδια την Dish array. Θα τροποποιήσουμε την υπηρεσία για να επιστρέψει Observables, και θα ενημερώσουμε τις components για να χρησιμοποιούν τα Observables. Ο λόγος είναι ότι όταν αναβαθμίζουμε τις υπηρεσίες μας για να χρησιμοποιήσουμε την υπηρεσία HTTP και να μεταβούμε σε διακομιστή για να φέρουμε τα δεδομένα, στο Angular, οι  HTTP methods επιστρέφουν Observables. Και οι υπηρεσίες μπορούν απλά να περάσουν τα Observables στις components, να τους επιτρέψουν να εγγραφούν σε αυτά και να χρησιμοποιήσουν τα δεδομένα που έλαβαν. 
  • Τη return Observable.of(DISHES) για την επιστροφή των Dishes. 

Ενημέρωση menu.component.ts

Ενημερώστε το menu.component.ts ως εξής για να εγγραφείτε - subscribe στο observable που επιστρέφεται από την υπηρεσία:

ngOnInit() {
  this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
 }

Έτσι, όταν πηγαίνετε στο component.ts του μενού, θα παρατηρήσετε ότι υπάρχει μια κόκκινη γραμμή κάτω από this.dishes. Αυτό συμβαίνει επειδή τώρα το dishService.getDishes () επιστρέφει observable και όχι μια Dish array. Έτσι, στο  this.dishes = this.dishService.getDishes();  έχετε ένα observable που έχει ανατεθεί σε μια dish array object, το οποίο είναι εσφαλμένο.

Πώς θα επαναρυθμίσουμε αυτόν τον κώδικα;

Εγγράφουμε - subscribe τη  MenuComponent να "παρατηρεί " το Observable. Η menu component είναι τώρα σε θέση να χρησιμοποιήσει τις τιμές Observable που εκπέμπονται από το Observable.

Έχουμε λοιπόν τα dishService.getDishes, και, στη συνέχεια, την μέθοδο εγγραφής που είναι "δεμένη" σε αυτήν. Όταν καλείται η εγγραφή τα dishes θα σας παραδοθούν επειδή η μέθοδος getDishes επιστρέφει το παρατηρήσιμο- observable Observable.of(DISHES) .  Επομένως, αυτό είναι αυτό που χρησιμοποιούμε ως parameter dishes  στην αριστερή πλευρά της arrow function dishes => this.dishes = dishes. Χρησιμοποιούμε την arrow function για να εκχωρήσουμε την παράμετρο στο this.dishes. Το this.dishes είναι η μεταβλητή του menu.component.ts για την οποία έχουμε ήδη δηλώσει τον τύπο της ως  Dish[] και χρησιμοποιείται επίσης στο menu.component.html στον διαρθρωτικό οδηγό * ngFor.

Ενημέρωση dishdetail.component.ts

Ομοίως ενημερώστε το dishdetail.component.ts για να εγγραφείτε στα observables από τη service.

ngOnInit() {
  this.dishservice.getDish(id).subscribe(dish => this.dish = dish);
 }

Εδώ η διαδικασία είναι παρόμοια με αυτό που κάναμε στο μενού components.ts, αλλά τώρα παίρνουμε μόνο το επιλεγμένο dish που προέρχεται από το φίλτρο που εφαρμόζεται στη array.

Τα αποτελέσματα

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Όπως μπορείτε να δείτε το περιεχόμενο των σελίδων εμφανίζεται με καθυστέρηση δύο δευτερολέπτων.

Κάντε μια  Git commit με το μήνυμα "Angular RxJs Introduction".