Cześć, w tym wpisie dodamy routing do naszej aplikacji oraz zrefaktorujemy nieco nasz serwis odpowiedzialny za komunikację z API.

Router

Na początku musimy zrobić:

  • stworzyć komponenty do których będzie prowadził router
  • zaimportować moduł Routera w app.module.ts
  • stworzyć tablice routów w której będzie url do strony oraz komponent

Otwórzmy terminal i wygenerujmy kilka komponentów. Pozwoli nam to na stworzenie nowych komponentów.

ng generate component TaskList
ng generate component FortuneCookie
ng generate component Dashboard

Po takiej operacji komponenty powinny zostać zaimportowane automatycznie do pliku app.module.ts.

Teraz pora na import modułu Routera i stworzenie odpowiednich routów:

//...
import {RouterModule, Routes} from '@angular/router';
//...

const appRoutes: Routes = [
  {path: '', component: DashboardComponent},
  {path: 'TaskList', component: TaskListComponent},
  {path: 'FortuneCookie', component: FortuneCookieComponent}
];

@NgModule({
  //...
  imports: [
    // ...
    RouterModule,
    RouterModule.forRoot(appRoutes)
  ],
  // ...
})
//...

Po wejściu na dany adres URL aplikacja przekieruje nas do odpowiedniego komponentu.

Następnie, należy dodać dyrektywę <router-outlet> do pliku app.component.html. Będzie w niej wyświetlana treść odpowiedniego komponentu. Plik app.component.html służy nam tu jako layout strony.

<md-sidenav-container>
    //...
    <main class="app__content">
        <router-outlet></router-outlet>
    </main>
</md-sidenav-container>

 

Porządkowanie

Plik serwisu na razie będzie miał tylko jedną metodę odpowiedzialną za pobieranie danych z podanego url. Użyjemy do pobierania danych zewnętrznego modułu axios, który został już wielokrotnie sprawdzony i można go polecić.

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

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

  getData(url: string) {
    return axios.get(url);
  }
}

Powinniśmy zmienić metodę getFortuneCookie aby dostosować ją do nowego providera (dostawcy danych) i przenieść ją do nowoutworzonego komponentu fortune-cookie.ts:

  //...
  getFortune() {
    this.dataService.getData('http://fortunecookieapi.herokuapp.com/v1/cookie')
      .then(({data}) => {
        const {fortune} = data[0];

        this.fortuneCookie = fortune.message;
      });
  }
  //...

 

Jak zwykle wszystko zmiany można zobaczyć tutaj.