Υποενότητα 14.3: Angular HTTP Client - Πρακτική

Εισαγωγή

 Σε αυτήν την υποενότητα, θα μάθετε να χρησιμοποιείτε το Angular HTTP client για να κάνετε αιτήματα για δεδομένα σε ένα διακομιστή, να τα αποκτήσετε και να επεξεργαστείτε την απάντηση. 

Θα δούμε πώς μπορούμε να αξιοποιήσουμε τον πελάτη HTTP ο οποίος θα μας επιστρέψει ένα παρατηρήσιμο. Έχουμε ήδη αναμορφώσει την εφαρμογή μας, ειδικά την υπηρεσία, για να μπορέσουμε να προσφέρουμε παρατηρήσιμα στοιχεία στις συνιστώσες μας. Και μέσα στις συνιστώσες, έχουμε εγγραφεί σε αυτά τα παρατηρήσιμα. Έτσι, το μεγαλύτερο μέρος της ρύθμισης για τη λήψη δεδομένων από την υπηρεσία στη συνιστώσα είναι ήδη εκεί.

Ξεκινώντας με το HttpClientModule

Πρέπει να εισαγάγετε το HttpClientModule στο app.module.ts προσθέτοντας στο αρχείο τα ακόλουθα:

...
import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
 ... 
 imports: [
 ... , 
 HttpClientModule
 ],
...

Αφού εισαγάγατε το HttpClientModule στο AppModule, μπορείτε να εμβάλετε - inject το HttpClient σε κλάσεις της εφαρμογής  όπως γίνεται στη σελίδα "Ενημέρωση της Dish service".

Ρύθμιση της διεύθυνσης URL του διακομιστή βάσης

Δημιουργήστε ένα νέο αρχείο με όνομα  baseurl.ts στον κοινόχρηστο - shared φάκελο και ενημερώστε τα περιεχόμενά του ως εξής:

export const baseURL = 'http://localhost:3000/';

Σημειώστε την εξαγωγή της σταθεράς που ονομάζεται   baseURL  που έχει οριστεί σε http://localhost:3000. Θυμηθείτε ότι αυτή είναι η βασική διεύθυνση URL στην οποία είναι προσβάσιμος ο διακομιστής JSON.

Εισαγάγετε baseURL και ενημερώστε την ιδιότητα του παρόχου- provider AppModule του διακοσμητή@NgModule :

...
import { baseURL } from './shared/baseurl';
...
@NgModule({
...
providers: [...
LeaderService,
{provide: 'BaseURL', useValue: baseURL}],
...

Το Angular παρέχει έναν τρόπο παροχής τιμών στην υπόλοιπη εφαρμογή, ρυθμίζοντας το app module.

Σημειώστε την εισαγωγή { baseURL } from './shared/baseurl';

Αυτή η τιμή μπορεί πλέον να διατεθεί στην υπόλοιπη εφαρμογή μεταβαίνοντας στους παρόχους και προσθέτοντας {provide: 'BaseURL', useValue: baseURL}],. 

Ενημέρωση της Dish Service

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

...
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { Dish } from '../shared/dish';

@Injectable()
export class DishService {
 constructor(private http: HttpClient) { }
 getDishes(): Observable<Dish[]> {
 return this.http.get<Dish[]>(baseURL + 'dishes');
 }
 getDish(id: number): Observable<Dish> {
 return this.http.get<Dish>(baseURL + 'dishes/' + id);
 }
}

Σημειώστε την εμβολή του HttpClient στην κλάση DishService

Η DishService ζητά τα δεδομένα JSON από το διακομιστή και τα ανακτά με μια μέθοδο get()  στο HttpClient, this.http.get<Dish[]>().

HttpClient.get  δημιουργεί ένα παρατηρήσιμο- Observable με το ρυθμισμένο αίτημα GET και όταν υπάρξει εγγραφή στο Observable (στην περίπτωση μας σε μια component), το αίτημα GET εκτελείται στο διακομιστή.

Ενημέρωση της Menu Component

Ανοίξτε το menu.component.ts και ενημερώστε το ως εξής:

import { Component, OnInit, Inject } from '@angular/core';
...
 constructor(private dishService: DishService,
 @Inject('BaseURL') public BaseURL) { }
...

MenuComponent, εισάγει το DishService και καλεί τη μέθοδο  getDishes ().

Ανοίξτε το menu.component.html και ενημερώστε το ως εξής:

src="{{BaseURL + dish.image}}"

Τώρα ο λόγος για τον οποίο εγχύσαμε το BaseURL μέσα στη συνιστώσα είναι ότι, στο πρότυπο, παίρνουμε το dish.image. Αυτό το dish.image πρέπει να ληφθεί από το json-server. Επομένως, πρέπει να ενημερώσουμε την πηγή να είναι BaseURL + dish.image. Προκειμένου αυτό να λειτουργήσει σωστά, πρέπει να περικλείσουμε το src μέσα σε εισαγωγικά.

Ενημέρωση της Dishdetail Component

Ανοίξτε το  dishdetail.component.ts και ενημερώστε το ως εξής:

import { Component, OnInit, Inject } from '@angular/core';
...
 constructor(private dishService: DishService,
 @Inject('BaseURL') public BaseURL) { }
...

Ανοίξτε το  dishdetail.component.html και ενημερώστε το ως εξής:

src="{{BaseURL + dish.image}}"

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

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο jsonServer  και τρέξτε json-server --watch db.json -d 2000. Αυτό θα προκαλέσει καθυστέρηση 2 δευτερολέπτων προτού ο διακομιστής στείλει την απάντηση για το αίτημα. Ο διακομιστής θα εμφανίσει το αρχείο db.json για την εφαρμογή σας. Μπορείτε να παρακολουθήσετε το διακομιστή στη διεύθυνση URL του προγράμματος περιήγησης localhost:3000 

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

Η σελίδα του έχει ανοιχτεί από τον json-server.  Εάν διακόψετε τον διακομιστή, δεν υπάρχει διαθέσιμο περιεχόμενο στη σελίδα. Σε αντίθεση, η σελίδα about παίρνει τα δεδομένα από την εφαρμογή, έτσι αυτή δεν επηρεάζεται από τη διακοπή του διακομιστή.

In the next assignment, you will enable the server to serve the about page.

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

• See more about Angular HTTpClient
• See more about the HttpClient.get method