Cześć,

Dzisiaj stosunkowo krótki wpis o tym jak połączyć serwer napisany w poprzednim poście z frontendem napisanym w angularze 2.

Lista zadań

Musimy pobrać listę zadań z backendu, więc zacznijmy od implementacji metody w komponencie task-list.component.ts do pobierania zadań. Chcemy by aplikacja pobierała dane tuż po wejściu na stronę /TaskList więc idealnym miejscem na zawarcie logiki odpowiedzialnym za pobieraniem danych z serwera jest metoda ngOnInit implementująca interfejs OnInit. Do pobierania danych użyjemy serwisu wcześniej utworzonego serwisu DataService. 

export class TaskListComponent implements OnInit {
  tasks: Array<any> = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData(`http://localhost:8000/tasks`)
      .then(({data}) => {
        console.log(data);
        this.tasks = data.tasks
    });
  }
}

W lini drugiej tworzymy zmienną lokalną tasks, która przechowuje tablice zadań. Na razie tablica ma elementy typu ‚any’ jednak w tym miejscu wykorzystajmy możliwości TypeScriptu i utwórzmy model Task.ts, który będzie przechowywał informacje o strukturze pojedyńczego zadania. Task ma 3 pola:

  • text – będzie przechowywać treść zadania
  • frequency – będzie przechowywać ilość powtórzeń danego zadania niezbędne do zaliczenia zadania jako wykonane w okresie tygodnia
  • week – będzie przechowywać tydzień w formacie: ‚DDMMYYYY-DDMMYYYY’
export interface Task{
  text: string;
  frequency: number;
  week: string;
}

Do tego możemy zauważyć że w linii 7 używamy wpisanej na stało nazwy serwera, który w przyszłości zmieni na produkcyjny. Więc przenieśmy nazwę hosta do stałych do pliku constants.ts:

export const HOST =  'http://localhost:8000';

Po zmianach treść komponentu TaskList będzie wyglądać następująco:

// ...
export class TaskListComponent implements OnInit {
  tasks: Array<Task> = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData(`${HOST}/tasks`)
      .then(({data}) => {
        console.log(data);
        this.tasks = data.tasks
    });
  }
}

Do tego zróbmy podstawową tabelkę umożliwiającą wyświetlanie danych pobranych z serwera:

<table>
  <thead>
    <th>Tekst</th>
    <th>Ile razy</th>
    <th>Tydzień</th>
  </thead>
  <tbody>
    <tr *ngFor="let task of tasks">
      <td>{{task.text}}</td>
      <td>{{task.frequency}}</td>
      <td>{{task.week}}</td>
    </tr>
  </tbody>
</table>

W 8 linijce używamy do iterowania po tablicy tasks dyrektywy *ngFor. Gwiazdka przed dyrektywą oznacza że modyfikuje HTML. Jest to odpowiednik z Angulara 1.x ng-repeat.

Po uruchomieniu frontendowego i backendowego serwera i wejściu na /TaskList nic się nie wyświetla a w konsoli wyświetla się błąd:

XMLHttpRequest cannot load http://localhost:8000/tasks. No ‚Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‚http://localhost:3000’ is therefore not allowed access.

Oznacza on że na serwerze uruchomiony jest CORS. Nie umożliwia pobierania danych przez localhost:3000. Możemy to zmienić i na razie umożliwić serwerowi odpowiedź dla zapytań dla wszystkich domen poprzez ustawienia tego konfiguracji serwera. Do pracy na teraz to wystarczy.

//...
server.connection({
  host: 'localhost',
  port: 8000,
  routes: { cors: { origin: ['*'] } }
});
//...

Po zapisaniu pliku i ponownym uruchomienia backendu możemy zobaczyć że dane już pobierajają się prawidłowo. Tabelka na razie nie jest ostylowana ale poprawimy to w kolejnym wpisie 🙂

To na dzisiaj tyle 🙂 Wszystkie zmiany jak zwykle na moim GitHubie.