Developpement Front End – Angular avancé

LiveOnLine Certifiant
  • 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
cookie