Logo Angular Avancé

Formation Angular Avancé

Notre formation Angular Avancé s'inscrit dans la continuité de la formation Angular. Elle intéressera les développeurs ou les chefs de projets qui souhaitent découvrir des techniques avancées, optimiser les performances de leurs applications, automatiser les tests ou découvrir NgRx, une bibliothèque de gestion de state.

Objectifs pédagogiques / Compétences visées

  • Avoir des notions sur le fonctionnement interne d'Angular
  • Connaître les concepts avancés des composants, du routeur, des services
  • Optimiser les performances de son application
  • Utiliser les techniques avancées comme le rendu côté serveur ou mode hors-ligne
  • Automatiser les tests de son code
  • Découvrir NgRx pour gérer le state de son application

Pré-requis

  • Avoir suivi ou être au niveau de notre formation Angular

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Rappels sur Angular

  • Data Binding, Template et Model
  • Modules
  • Services
  • HttpClient
  • Router

Angular sous le capot

  • Détection de changement
  • Zone.js
  • Compilation JIT vs AOT
  • Les plates-formes
  • Configurer Angular CLI
  • Schematics
  • Builders
  • Modifier la configuration de Webpack

Optimisation des performances

  • Minification et Tree-Shaking
  • Immuabilité
  • ChangeDetectionStrategy Default et OnPush
  • Exécuter du code en dehors de Zone.js
  • Utiliser du Virtual Scroll
  • TrackBy avec ngFor

Composants Avancé

  • ViewChild / ContentChild et Lifecycles correspondant
  • Composants Dynamiques
  • ng-container / ng-template / ngTemplateOutlet
  • TemplateRef

Internationalisation (i18n)

  • Angular CLI vs ngx-translate
  • Utiliser des traductions dans les templates
  • Extraire les clés de traductions
  • Formater les nombres, dates, monnaies
  • Charger les traductions dynamiquement

Jour 2

Techniques Avancées

  • Mettre à jour Angular
  • Rendu côté serveur
  • Mode hors-ligne / ServiceWorker / Applications PWA
  • Créer sa bibliothèque
  • Transformer un composant en WebComponent

RxJS Avancé

  • Les principaux opérateurs : tap, take, filter, map, debounceTime, catchError...
  • Les opérateurs de combinaison : combineLatest, switchMap, withLatestFrom...
  • Les méthodes de création : of, from, fromEvent, throwError, timer...
  • Les subjects : Subject, ReplaySubjet, BehaviorSubject, AsyncSubject

Services Avancé

  • Configurer les providers : useClass, useFactory, useValue, useExisting
  • Tree Shakable Providers
  • Injecter autre chose qu'une classe avec @Inject
  • Modules avec méthodes forRoot / forChild

Angular Router Avancé

  • Les guards : CanActivate, CanActivateChild, CanDeactivate
  • Les resolvers
  • Les modules en Lazy Loading et le guard CanLoad
  • Les événements du Router

Jour 3

Tests Unitaires

  • Les bibliothèques de tests unitaires en JS : Karma, Jasmine, Mocha, Jest...
  • Introduction à Karma + Jasmine
  • Configurer ses modules de tests
  • Tester des composants, directives, pipes, services
  • Les zones async et fakeAsync
  • Tester les services HTTP avec HttpClientTestingModule et HttpTestingController
  • Tester les changements d'URL avec RouterTestingModule
  • Utilisation de ng-mocks

Tests End-To-Ends (E2E)

  • Les bibliothèques de tests E2E en JS : Selenium WebDriver, WebdriverIO, Protractor, CodeceptJS, Cucumber.js, Cypress...
  • Le pattern Page Object
  • Utiliser les sélecteurs CSS ou XPath
  • Simuler des événements
  • Utiliser les environnements pour fournir des données de tests
  • Exécuter ses tests sur Browserstack ou Sauce Labs

Jour 4

State Management sous Angular

  • Qu'est-ce qu'un State ? Intérêts par rapport aux services "classiques"
  • Les concepts de Redux : store, actions, reducers, constants, action creators, selectors, effects
  • Les bibliothèques Redux-like sous Angular : NgRx, NGXS, Akita, Angular Redux
  • Utilisation de Redux DevTools

NgRx

  • Penser et créer son store
  • Les observables dans NgRx
  • Ecrire ses premiers action creators, reducers, selectors
  • Les meta-reducers
  • Gérer les side-effects avec @ngrx/effects
  • S'intégrer au Routeur avec @ngrx/router-store
  • Automatiser ses tests en lien avec NgRx

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 13/03/2020