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:
