Formation Developpement Front End – Angular avancé
- Référence : OPS008
- Durée : 5 jours (35 heures)
- Certification : Non
- Eligible CPF : Non
CONNAISSANCES PREALABLES
- Avoir suivi la formation Angular initiation ou maîtriser tous les concepts du programme Angular Initiation
- Connaissances de base en HTML, CSS, JS et Programmation Objet
PROFIL DES STAGIAIRES
- Développeurs front, Développeurs Back, Lead dev
OBJECTIFS
- Maîtriser les concept avancé du framework Angular
- Savoir concevoir des applications Angular de toute taile et optimiser les performances
- Maîtriser l'architecture d'une application modulaire
METHODES PEDAGOGIQUES
- Mise à disposition d’un poste de travail par participant
- Remise d’une documentation pédagogique papier ou numérique pendant le stage
- La formation est constituée d’apports théoriques, d’exercices pratiques et de réflexions
METHODES D'EVALUATION DES ACQUIS
- Auto-évaluation des acquis par le stagiaire via un questionnaire
- Attestation de fin de stage adressée avec la facture
FORMATEUR
Consultant-Formateur expert Développement Internet
CONTENU DU COURS
1 - Rappel et architecture
- Rappel des fondamenteaux Angular
- Architecture modulaire, concepts avancés
- Concevoir des architectures pour l’Agilité
- Components de design vs components de données brutes
- Concevoir pour la maintenabilité, la ré-utilisabilité et l’évolutivité
- TP : concevoir une architecture et optimiser les performances
2 - Tests unitaires, la méthode Test Driven Development
- Appliquer la méthode TDD
- Ecriture d’un test, faire échouer le test, écrire le code, re-factoriser
- Réduire les bugs en utilisant TDD
- TDD vs test unitaires, les bonnes pratiques
- TP : nombreux exemples de tests
3 - Le router, optimisation, concepts avancés
- Le Lazy Loading
- Preloading Strategy
- Les Guards, CanActivate et CanDeactivate, CanLoad
- Les Resolves
- Les Routes enfant
- ActivatedRoute
- Query parameters et Fragments
- Comprendre le ChangeDetection
- TP : Réaliser un Guard, un Resolve, utiliser ActivatedRoute
4 - Composants dynamiques
- Les transclusions, concepts avancés
- ng-content vs ng-templates, bonnes pratiques
- @ViewChild et @ViewChildren
- @ContentChild et @ContentChildren
- Génération de formulaires dynamiques
- Génération de components dynamiques
- Renderer 2
- ngFactory
- TP : Créer un module pour la génération de formulaire dynamique
5 - HttpModule, concepts avancés
- L’authentification
- HttpClient, les interceptors
- Protéger les appels api
- Les environnements de développement
- TP : Créer un module pour l’authentification
6 - Rxjs notions avancées
- Observables chauds vs Observables froids
- Les Subject, BehaviorSubject, ReplaySubject, AsyncSubject
- Rxjs, fonctions et opérators avancés
- of, from, create, pipe, fromEvent, delay, distinct, debounceTime, interval, timer
- map, mergeMap, switchMap,…
- TP : Créer un moteur de recherche avec Rxjs
7 - L'internationalisation
- Angular et le pipe i18n
- Gérer la pluralisation
- TP : Préparer une application Angular pour l’internationalisation
8 - Les PWA
- Générer une PWA
- Manipuler le ServiceWorker
- Créer des applications installables sur mobiles
- Les notifications en local
- Les messages push
- Le mode offline
- TP : Créer une PWA et l’installer sur un mobile
9 - Les stores, Ngrx
- Qu’est-ce que Ngrx ?
- Les avantages de Ngrx
- Quand utiliser Ngrx et pourquoi.
- Actions, Reducers, Selectors, Store, and Effects
- TP : exemples d’utilisation de Ngrx avec Angular