Exercise: Angular part 6 (Formula 1 - HttpService)

Idea: Introduction to Angular (HttpService - Observer/Subscribe).
Background: The Ultimate Angular-cli Reference and Angular.io (Http Client) Reactivex.io (Observer)

Relateret billede

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":


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: [

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
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.

Rock and roll - Angular! - now with HttpService!

/ Henrik H