- 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
Modulariser son application
Compétences évaluées
- Modulariser son application
Question 1
Quel feature module déclaré ci-dessous peut être importé par AppModule afin d'utiliser LogoComponent dans AppComponent ?
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LogoComponent } from './components/logo/logo.component'; @NgModule({ declarations: [ LogoComponent ], imports: [ CommonModule, ] }) export class LogoModule { }
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LogoComponent } from './components/logo/logo.component'; @NgModule({ declarations: [ LogoComponent ], imports: [ CommonModule, ], exports: [ LogoComponent ], }) export class LogoModule { }
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LogoComponent } from './components/logo/logo.component'; @NgModule({ imports: [ CommonModule, ], exports: [ LogoComponent ], }) export class LogoModule { }
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LogoComponent } from './components/logo/logo.component'; @NgModule({ imports: [ CommonModule, LogoComponent ], exports: [ LogoComponent ], }) export class LogoModule { }
Question 2
Votre application contient un FooterComponent qui est inséré uniquement dans AppComponent (via sa balise
<app-footer>
).En suivant les pratiques d'architecture conseillées dans ce cours, dans quel module déclareriez-vous FooterComponent ?
CoreModule
SharedModule
AppModule
AuthModule
Question 3
Voici le template de SpeakerComponent :
<div *ngIf="speaker$ | async as speaker"> <a [routerLink]="speaker.id">Goto Speaker Page</a> <input type="text" [(ngModel)]="speakerName"> <button (click)="onSubmitSpeaker()">Submit</button> </div>
Quel module ci-dessous compilera correctement ?
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ SpeakerComponent ], imports: [ CommonModule, FormsModule ], exports: [ SpeakerComponent ] }) export class SpeakerModule {}
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ SpeakerComponent ], imports: [ CommonModule, ReactiveFormsModule, RouterModule ], exports: [ SpeakerComponent ] }) export class SpeakerModule {}
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; @NgModule({ declarations: [ SpeakerComponent ], imports: [ CommonModule, FormsModule, RouterModule ], exports: [ SpeakerComponent ] }) export class SpeakerModule {}
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ SpeakerComponent ], imports: [ CommonModule, ReactiveFormsModule, HttpClientModule ], exports: [ SpeakerComponent ] }) export class SpeakerModule {}
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