Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup Angular Paris - Feature Modules

240 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Meetup Angular Paris - Feature Modules

  1. 1. Les Feature Modules Angular
  2. 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. 3. Qu’est-ce qu’un Module ?
  4. 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. 5. Et les Feature Modules ???
  6. 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. 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. 8. Lazy Loading
  9. 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. 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. 11. Déléguer le routing au feature module 11 Syntaxe : chemin/vers/fichier#NomDuModule Angular chargement le module lorsqu’il sera necessaire.
  12. 12. Les services et le lazy loading
  13. 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. 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. 15. Import depuis un module racine 15 Import en utilisant la méthode forRoot() Les services sont fournis par le Feature Module
  16. 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. 17. Demonstration
  18. 18. Merci pour votre attention ! 18 Sources : https://github.com/Seloris/meetup-featureModule

×