• 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