Cześć, w tym wpisie pobierzemy dane z otwartego api. Użyjemy do tego http://fortunecookieapi.herokuapp.com/v1/cookie. Do dzieła!

Zacznijmy od stworzenia serwisu:

ng g service data

Żeby móc używać nowo utworzonego serwisu musimy go zainicjować w app.module dodając do providerów:

// ...
import {HttpModule} from '@angular/http';
import {DataService} from './data.service';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule {}

W tym momencie możemy napisać ciało serwisu w którym użyjemy wbudowanej w obiekt window funkcji fetch do pobierania danych.

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

@Injectable()
export class DataService {
  constructor() {}

  getFortuneCookie() {
    return window.fetch('http://fortunecookieapi.herokuapp.com/v1/cookie')
      .then(res => res.json())
      .then(json => json[0])
      .then(items => items.fortune.message);
  }
}

Po tym możemy go użyć w app.component.ts.

import {Component} from '@angular/core';
import {DataService} from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  fortuneCookie: string;

  constructor(private dataService: DataService) { }

  getFortune() {
    this.dataService.getFortuneCookie()
      .then(cookie => {
        this.fortuneCookie = cookie;
      });
  }

  title = 'app works!';
}

Pozostała zmiana w html i podpięcie zdarzenia pod przycisk, który będzie pobierał dane z API i wrzucał je na naszą stronę.

<h1>{{title}}</h1>

<button (click)="getFortune()">Click me to see fortune cookie!</button>
<h2>{{fortuneCookie}}</h2>

Po uruchomieniu projektu i kliknięciu przycisku na ekranie powinno się załadować ciasteczko::

Jak widać aplikacja działa. Jednak jej wygląd do najambitniejszych nie należy. W kolejnej części podepniemy darmowy szablon do panelu admina tak by aplikacja nabrała nieco więcej szyku 🙂

Dokładne zmiany można zobaczyć na GitHubie.