Complétez vos connaissances sur Angular

8 heures
Moyenne

Licence

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

Être orienté Comparez nos types de formation