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 {}

Modulariser son application

Compétences évaluées

Question 1

Question 2

Question 3