Architecture d’une application Angular 2+

L’une des nouveautés d’Angular 2 est de pouvoir organiser son application en modules. Cette nouvelle façon d’architecturer l’application est vraiment au cœur d’Angular et il est important de bien comprendre comment ça marche afin de ne pas être perdu !

La déclaration d’un module

Alors comment se déclare un module ?  Il y a de fortes chances que vous sachiez déjà comment en faire un, car une application Angular 2 est un module en soi. Voici un exemple tiré de la documentation officielle pour vous rafraîchir la mémoire :

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

imports:      [ BrowserModule ],

providers:    [ Logger ],

declarations: [ AppComponent ],

exports:      [ AppComponent ],

bootstrap:    [ AppComponent ]

})

export class AppModule { }

Cependant si votre application est un peu complexe il est conseillé de séparer votre application en plusieurs modules (« feature-module ») et de faire un module partagé par tous (« Shared Module »).

Définitions

Bootstrap : Définit les composants qui vont être chargés au lancement de l’application. Chaque application doit bootstrapper au moins un « component », en général on le nomme AppComponent. Le tableau « bootsrap » doit être utilisé uniquement dans l’AppModule.

Declarations : Contient les « component », « directive » et « pipe » utilisé dans ce module. Ne doit pas contenir de services, d’autres modules, etc. Ne doit pas contenir de composants déclarés dans un autre module !

Exports : Permet de partager des éléments du module (« component, « directive », « pipe »). On peut aussi réexporter des éléments importés d’autres modules. Un élément déclaré ne peut être qu’utilisé qu’au sein du module où il a été déclaré, sauf si ce module l’exporte.

Imports : Permet d’importer des modules et d’utiliser les éléments exportés par ces modules. Eviter des imports inutiles, c’est relativement couteux ! Et oui, pour utiliser les composants d’une librairie il faudra importer ce module de librairie dans chacun de vos modules qui en ont besoin !

Providers : Permet d’enregistrer des services. A noté que contrairement aux éléments (« component », « directive » et « pipe »), chaque service mis en tant que providers dans NgModule est enregistré à la racine de l’application, il n’est pas encapsulé dans le module où il est déclaré.

Cas concret

En suivant les conseils précédents, on obtient cette architecture :

© Deborah Kurata

 

On peut aussi rajouter un « core module » afin d’enregistrer les différents providers de votre application, ce qui permet de s’assurer qu’on ne « provide » pas plusieurs fois le même service.

Remarques sur les modules « mixtes »

Certains modules comme le RouterModule déclarent à la fois des composants et des services. Ces modules doivent donc être importés différemment dans l’AppModule et les feature-module.

Exemple pour le RouterModule :

AppModule

@NgModule({

imports: [RouterModule.forRoot(ROUTES)]

})

class AppModule{}
FeatureModule

@NgModule({

imports: [RouterModule.forChild(ROUTES)]

})

class FeatureModule{}

 

Lorsque votre application grossit, il est intéressant de ne pas charger tous les composants d’un seul coup mais de les charger à la volée selon la navigation de l’utilisateur ! C’est ce que l’on appelle les modules « lazy-load » que nous verrons plus en détails dans un prochain post 😉

En attendant, j’espère que cet article vous aura permis de mieux comprendre le fonctionnement des modules Angular et comment architecturer son application.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s