- 8 heures
- Moyenne
Ce cours est visible gratuitement en ligne.
course.header.alt.is_video
course.header.alt.is_certifying
J'ai tout compris !Mis à jour le 31/03/2022
Communiquer avec les serveurs
Compétences évaluées
- Communiquer avec les serveurs sur Angular
Question 1
Vous avez le service suivant :
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Metadata } from '../models/metadata.model'; @Injectable({ providedIn: 'root' }) export class MetadataService { constructor(private http: HttpClient) {} }
Vous devez implémenter une méthode pour une requête GET, à l'URL
'/api/metadata'
, qui retourne un tableau deMetadata
.Quelle implémentation ci-dessous est la bonne ?
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Metadata } from '../models/metadata.model'; @Injectable({ providedIn: 'root' }) export class MetadataService { constructor(private http: HttpClient) {} getMetadata(): Metadata[] { return this.http.get<Observable<Metadata[]>>('/api/metadata'); } }
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Metadata } from '../models/metadata.model'; @Injectable({ providedIn: 'root' }) export class MetadataService { constructor(private http: HttpClient) {} getMetadata(): Observable<Metadata[]> { return this.http.get<Observable<Metadata[]>>('/api/metadata'); } }
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Metadata } from '../models/metadata.model'; @Injectable({ providedIn: 'root' }) export class MetadataService { constructor(private http: HttpClient) {} getMetadata(): Metadata[] { return this.http.get<Metadata[]>('/api/metadata'); } }
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Metadata } from '../models/metadata.model'; @Injectable({ providedIn: 'root' }) export class MetadataService { constructor(private http: HttpClient) {} getMetadata(): Observable<Metadata[]> { return this.http.get<Metadata[]>('/api/metadata'); } }
Question 2
Le component ci-dessous injecte le service créé dans la question précédente :
import { OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { MetadataService } from '../services/metadata.service'; import { Metadata } from '../models/metadata.model'; export class MetadataComponent implements OnInit { metadata$!: Observable<Metadata[]>; constructor(private metadata: MetadataService) {} ngOnInit() { this.metadata$ = this.metadata.getMetadata(); } }
Dans le template, quelle implémentation ci-dessous est correcte ?
<app-metadata-item *ngFor="let item of metadata$" [metadata]="item"></app-metadata-item>
<app-metadata-item *ngFor="let item | async of metadata$" [metadata]="item"></app-metadata-item>
<app-metadata-item *ngFor="let item of metadata$ | async" [metadata]="item"></app-metadata-item>
<app-metadata-item *ngFor="let item of metadata$" [metadata]="item | async"></app-metadata-item>
Question 3
La requête ci-dessous retourne un tableau de type
Mentor[]
:getMentors(): Observable<Mentor[]> { return this.http.get<Mentor[]>('/api/mentors/all'); }
Quel Observable ci-dessous émettra le
Mentor
avec le nombrestudents
le plus élevé ?On présume que tous les
import
nécessaires sont faits.const mentor$ = this.getMentors().pipe( map(mentors => mentors.map(mentor => mentor.students)), map(mappedMentors => mappedMentors[0]) );
const mentor$ = this.getMentors().pipe( map(mentors => [...mentors].sort((a, b) => a.students - b.students)), map(sortedMentors => sortedMentors[sortedMentors.length - 1]) );
const mentor$ = this.getMentors().pipe( map(mentors => [...mentors].sort((a, b) => b.students - a.students)), map(sortedMentors => sortedMentors[sortedMentors.length - 1]) );
const mentor$ = this.getMentors().pipe( map(mentors => [...mentors].sort((a, b) => a.students - b.students)), map(sortedMentors => sortedMentors[0]) );
Et si vous obteniez un diplôme OpenClassrooms ?
- Formations jusqu’à 100 % financées
- Date de début flexible
- Projets professionnalisants
- Mentorat individuel
Trouvez la formation et le financement faits pour vous