Angular : Développement avancé

• Approfondir la maîtrise d’Angular
• Mettre à jour son application depuis les versions précédentes
• Optimiser vos applications web
• Savoir réutiliser des fonctionnalités en créant une librairie pour Angular
• Gestion de monorepo + micro frontends

‍

‍

Profil du stagiaire

• Développeurs
• Architectes

Prérequis

• Connaissance de HTML, CSS
• Une bonne expérience avec Angular

‍

Rappels

• Typescript
• Angular
• Tests

Reactive forms

• FormControl et FormGroup
• Formulaires décomposés avec FormBuilder
• Validateurs personnalisés
• Validateurs asynchrones

Lazy loading

• Améliorer les performances de démarrage
• Route integration : loadChildren
• Preloading
• Modules partagés

Change detection

• Optimisation de performance dans le cas du Data-binding, détection de changement
• OnPush
• Mode manuel : Change Detector Ref
• zone.js et NgZone
• trackBy pour *ngFor

Route guards et resolve

• Les différents types de Guards
• CanActivate, CanActivateChild : protéger une route
• CanDeactivate : sécuriser la sortie
• Pre-fetching avec resolve

Animations

• États et transitions
• Animations avec le routeur

Material avancé

• Étude et mise en oeuvre de quelques composants
• Nouveautés Angular 10 & 11
• Création de vos propres librairies Material à l'aide du CDK
• Material & CDK

Composants et Directives avancés

• Comprendre les cycles de vie
• Composant avec projection de contenu (ng-content)
• HostBinding / HostListener
• ViewChild / ContentChild

Techniques de manipulation du DOM avancées

• Hooks et cycles de vie
• Composant avec projection de contenu (ng-content, ng-container, ngTemplateOutlet, ...)
• Utiliser le Renderer
• Accéder à la vue : host
• HostBinding / HostListener
• Principe d'encapsulation
• Manipuler le DOM via le renderer : ViewChild / ContentChild

RxJS avancé

• Rxjs 6 : nouveautés et breaking changes (pipeable operators), compatibility package
• Multicast observables - behavior, replay ou async subjects
• Operators: instance VS static, categories
• Créer son propre opérateur
• Composition d'opérateurs : pipeable operators, pure / impure operator pipes
• WebSocket : utilisation du built-in Websocket Subject

Internationalisation

• Internationalization : i18n marker
• Gestion des textes à traduire
• Gestion du pluriel

State management avec @ngrx

• Redux pattern
• Reducers
• Actions
• Effects
• Selectors

Les tests

• Tests unitaires
• Wiremock
• Tests fonctionnels (E2E)

Server-side Rendering : Angular Universal

• ServerModule
• Moteur back-end (Node.js et autres)
• @nguniversal/express-engine

Architecture frontend

• Modules
• Code organisations

Aller en prod la checklist

Tests e2e avec cypress

Chaque point est accompagné de travaux pratiques

• Stage Pratique : 60% Pratique, 40% Théorie
• Discussion autour des cas organisationnels des participants
• Vérification de la compréhension au fur et à mesure de l’avancement dans le référentiel, par des réflexions collectives et des exercices
• Travaux pratiques

Sont fournis aux stagiaires :

• Support en FR, format en accès en ligne
• Liste de sources d’informations additionnelles

Formation à distance : L’outil Zoom sera utilisé pour la partie Visio-Conférence.

• Feuilles d’émargement
• Questions orales ou écrites (QCM)
• Mises en situation
• Formulaires d'évaluation de la formation

‍

La formation est ponctuée d’une attestation de fin de formation délivrée par Elitek au client. Y seront précisés les objectifs pédagogiques, le nombre d’heures total de la formation, la validation des acquis et la date.

• Taux de satisfaction : nous disposons d'un nombre insuffisant de données*

^{*Moyenne des notes attribuées par un apprenant de la formation au cours des 12 derniers mois}