W poprzednim wpisie utworzyliśmy aplikację w Angular2 z pomocą Angular CLI. W tym wpisie stworzymy prosty serwis do pobierania danych z API oraz wyświetlimy wynik naszej pracy w przeglądarce. Do komunikacji wykorzystamy paczkę Angular2 – HTTP (@angular/http).
HTTP Module
Http Module nie należy do rdzenia Angular2. Jest dodatkowym modułem wykorzystywanym do komunikacji w sieci. Aby go wykorzystać należy zaimportować paczkę @angular/http
.
Generowanie serwisu
Na początku pracy wygenerujemy serwis, w którym będzie logika odpowiedzialna za komunikację z backendem: ng g s product
.
Importujemy serwis w odpowiednim module oraz dodajemy go do providers
.
Pobieranie danych
Do pobierania listy produktów wykorzystamy metodę list()
. Tworzymy zatem publiczną metodę o tej nazwie, która zwracać będzie nam Observable: public list():
Observable<Product[]>
Następnie wykorzystujemy @angular/http
i metodę get()
w parametrze, której podajemy URL do naszego endpointa:
this.http.get(this.listUrl)
Dzięki metodzie map()
z biblioteki rxjs
uzyskamy Observable. Tamteż możemy sparsować dane, które otrzymujemy do formatu JSON:
Warto też obsłużyć wyjątek i poinformować użytkownika o ewentualnym niepowodzeniu:
Wykorzystanie serwisu
Zwieńczeniem naszej pracy będzie wykorzystanie serwisu w komponencie product-list
.
Tworzymy metodę getProducts()
, w której wykorzystamy stworzoną wcześniej metodę list()
z product.service
. Robimy na niej subscribe()
i przypisujemy wynik do zmiennej products
.
Wyświetlenie danych
Na koniec możemy wypisać nasze dane np za pomocą dyrektywy ngFor
:
W Chromie nasze produkty przedstawiają się następująco: