• 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 de  Metadata  .

    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 nombre  students  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