Les Feature Modules
Angular

Mais qui sommes nous ?
William KLEIN
Développeur Web @InfiniteSquare
Auteur Angular
wklein@infinitesquare.com
wi_klein
willovent
Daniel DJORDJEVIC
Développeur Web @InfiniteSquare
Auteur Angular
ddjordjevic@infinitesquare.com
seloriss
Seloris

Qu’est-ce qu’un Module ?

Module Angular
4
Organiser et Consolider les éléments de notre application
(composants, directives, pipes, services, etc…)
Décorateur @NgModule
declarations
imports
providers
bootstrap
exports

Et les Feature
Modules ???

Et les Feature Modules ???
6
Améliore la lisibilité et la maintenabilité du code
 En structurant naturellement l’application
Améliore les temps de chargement de l’application grâce au Lazy Loading
 En déférant le chargement des modules
Regroupement des éléments d’un même scope fonctionnel

Les Feature Modules
7
Les features module doivent être agnostique de la platforme
 Import de CommonModule et non BrowserModule
La propriété exports permet d’exposer les éléments du module

Lazy Loading

Qu’est-ce que le lazy loading?
9
L’application est divisée en un ensemble de feature modules
 On ne charge que les modules nécessaires au lancement de l’application
 Les modules sont ensuite chargés à la demande
Des paquets moins gros donc chargés plus rapidement

Exporter les routes du feature module
10
Chaque feature est responsable de ses routes
(définies dans un module de routing)
Ne pas appeler RouterModule.forRoot mais plutôt
RouterModule.forChild
Import du module de routing dans le feature module
Automatique avec @angular/cli
ng g m mafeature --routing

Déléguer le routing au feature module
11
Syntaxe :
chemin/vers/fichier#NomDuModule
Angular chargement le module
lorsqu’il sera necessaire.

Les services et
le lazy loading

Les services et le lazy loading
13
Les services ne sont pas scopés à un module,
Sauf si celui-ci est lazy loadé.
Plusieurs instances d’un même
service peuvent être créées alors
que ce n’est pas le comportement souhaité
AppModule
AuthModule FeatureModule
AuthService
import
Lazy load
AuthService 2
AuthService 1

Solution : ModuleWithProviders
14
Les services ne sont plus declarés dans le Module, mais dans un
ModuleWithProviders
 Permet deux méthodes d’import

Import depuis un module racine
15
Import en utilisant la méthode forRoot()
Les services sont fournis par le Feature Module

Import depuis un Feature Module
16
Import en utilisant la méthode classique
Les services ne sont pas fournis, on utilise les courants

Demonstration

Merci pour votre attention !
18
Sources : https://github.com/Seloris/meetup-featureModule