In this exercise you have to make a simple application using Http, Observable and the map-operator from RxJS.
In the application will we use a webservice from http://ergast.com to retreive information about year 2019 Formula 1 drivers and present the information about the drivers in a view like this:
Step 1 - Create a new project - F1SimpleHttpService.
Create a new project - F1SimpleHttpService - in your favorite Angular folder (ng new F1SimpleService, no routing in this project, select CSS).
Step 2 - (index.html)
We want to use Bootstrap 4, so update the index.html file (Hint: look at the index.html page from the previous exercise - MovieRouter)
In this project will we use a webservice from Ergast.com to retrieve information about this sesons F1 Drivers.
If you open your Browser and insert: http://ergast.com/api/f1/2019/drivers.json - will you get the following information:
Our first task is to create a interface Driver (or IDriver) with properties given by the json-file from Ergast.
Driver-object with information about "Fernando Alonso":
{"driverId":"alonso","permanentNumber":"14","code":"ALO","url":"http:\/\/en.wikipedia.org\/wiki\/Fernando_Alonso","givenName":"Fernando","familyName":"Alonso","dateOfBirth":"1981-07-29","nationality":"Spanish"}
Step 3 - Interface Driver
Create a new Interface Driver, with properties given by the sample above.
(Hint: ng g i Driver, and insert: export interface Driver { driverId: string; permanentNumber: string; code; string; givenName: string; ... }).
Step 4 - Import HttpClientModule in AppModule
Since you in the next steps has to create a Service that uses the HttpModule you have to add the following import-statement in the App.Module:
import { HttpClientModule } from '@angular/common/http';
And update the array of imports in the metadata section (@NgModule ) for the AppModule with HttpClientModule:
imports: [
BrowserModule,
HttpClientModule
],
Step 5.1 - F1SimpleService
Create a new Service: F1SimpleServicer (Hint: ng g s F1Simple - notice: Service is automatically appended to the name).
Step 5.2 - F1SimpleService (f1-simple.service.ts)
Besides the import of Injectable from @angular/core you have to import HttpClient from @angular/common/http, Observable from rxjs, map from rxjs/operators and your new interface Driver:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Driver } from './driver';
Step 5.3 (f1-simple.service.ts)
Inject the HttpClient Service in the constructor to the class.
constructor(private httpClient: HttpClient) { }
Step 5.4 (f1-simple.service.ts)
Make a local interface IDriverData that match the Ergast.com json-file:
interface IDriverData {MRData: {DriverTable: {Drivers: Driver[]; }; }; }
Step 5.5
Create a method getDrivers( ), the return-type of the method must be Observable<Driver[ ]> and should return the result of calling get<IDriverData> on the httpClient-service:
public getDrivers(): Observable<Driver[]> { return this.http.get<IDriverData>(`http://ergast.com/api/f1/2019/drivers.json`).pipe(...) ; }
The pipe( ) should take the following map as argument:
Step 6.1 - SimpleHttpServiceComponent
Create a new Component: SimpleHttpService. (Hint: ng g c SimpleHttpService)
Step 6.2
The component must import the Driver-interface and the F1SimpleService:
import { Driver } from '../driver';
import { F1SimpleService } from '../f1-simple.service';
Step 6.3
Add F1SimpleService as Provider in the component-decorator: providers: [F1SimpleService]
Step 6.4
Add a property drivers of the type Driver[ ] to the class.
Step 6.5
Inject the F1SimpleService in the constructor to the class and call the service-metod getDrivers( ) to get the Observable object with all the Drivers.
Notice: The Observable stream is cold until you call the subscribe( ) - method on the stream.
The callback function to subscribe should assign the data to the property drivers:
constructor(service: F1SimpleService) { service.getDrivers().subscribe(response => this.drivers = response); }
Step 7 - SimpleHttpServiceComponent - Template
Use the directive: *ngFor in the template to list information about all the drivers.
Make a proper styling (use Bootstrap) and test the webapp.
Congratulation!
Rock and roll - Angular! - now with HttpService!
/ Henrik H