Avoir plusieurs modules dans son application - Découvrir angular–Mon premier projet

Maintenant que tout parait être mis en place (en fait, il manque encore beaucoup de choses pour notre application de gestion des clones), on va organiser notre code.
Avoir plusieurs modules, répartis en fonction des grandes fonctionnalités va aider notre code à être organisé.

C’est parti voyons ensemble comment organiser mieux notre code !

Tout d’abord, on organise par fonctionnalité, ou par grande idée.
Ici, nous avons traité des informations, des pages autour des clones. Ainsi, nous aurons un Module dédié au clone.

=> Première étape : créer un dossier appelé clones.

Zoom sur des Modules utilisés par nos Modules

BrowserModule

Dans le Module AppModule, nous avons référencé et utilisé le module BrowserModule.

Ce Module sert pour référencer les autres modules, il est donc utile pour le Module de démarrage.

CommonModule

Le Module CommonModule est référencé et utilisé dans les modules enfants.

Il exporte les directives ngIf, et ngFor, ainsi que les pipes d’Angular.

Routes et Modules

Vu que Angular a pensé les Modules comme des entités séparées, nous devons chercher à séparer au maximum : SRP (Séparation des responsabilités).

Et donc, cela induit que chaque Module a ses propres routes.

Nous allons donc créer un Module dédié aux routes des clones.

NOTE: si vous utilisez le snippet proposé par Visual Code, il vous proposera un RouterModule.forRoot(routes). Or, nous sommes dans un sous-module de route, donc il faut utiliser le RouterModule.forChild(routes) !

import { NgModule } from ‘@angular/core’;

import { RouterModule, Routes } from ‘@angular/router’;

import { MoreDetailCloneComponent } from ‘../clones/more-detail-clone.component’;

import { CloneListComponent } from ‘../clones/clone-list/clone-list.component’;

const routes: Routes = [

{ path: ‘clones’, component: CloneListComponent},

{ path: ‘clone/:id’, component: MoreDetailCloneComponent}, // no slash to start url

];

@NgModule({

imports: [RouterModule.forChild(routes)], // forChild because childs routes

exports: [RouterModule]

})

export class ClonesRouteConfigModule {}

NOTE : cela va nous permettre de clarifier le RouteConfig.ts de base :

import { NgModule } from ‘@angular/core’;

import { RouterModule, Routes } from ‘@angular/router’;

import { NotFoundExceptionComponent } from ‘../not-found-exception/not-found-exception.component’;

const routes: Routes = [

{ path:  », redirectTo: ‘clones’, pathMatch: ‘full’ },

{ path: ‘**’, component: NotFoundExceptionComponent}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule] // need to export to be used by AppModule !

})

export class RouteConfigModule {

}

Appeler un Module dans le Module parent

L’appel d’un Module réalisé par nous se fait à l’identique d’un module déjà présent dans Angular.

@NgModule({

imports: [

BrowserModule,

ClonesModule, // declaring before RouteConfig to be sure routes will be ok

RouteConfigModule // global routes

],

declarations: [

AppComponent,

HighlightDirective,

NotFoundExceptionComponent

],

bootstrap: [

AppComponent//moduleracineaudémarrage

]

})

export class AppModule {

}