Slides de présentation du talk sur les Feature Modules Angular, le 15/02/18

1. Les Feature Modules
Angular

2. 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

3. Qu’est-ce qu’un Module ?

4. 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

5. Et les Feature
Modules ???

6. 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

7. 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

8. Lazy Loading

9. 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

10. 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

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

12. Les services et
le lazy loading

13. 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

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

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

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

17. Demonstration

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