Formation Angular 2+ - Développement d'applications web

Selon les spécialistes qui se sont sérieusement penchés sur la nouvelle version du framework créé par Google, Angular 2+ n'a de commun avec son prédécesseur que son seul nom tant les évolutions qu'il porte sont nombreuses. Et toutes visent à atteindre un seul et unique objectif : développer plus rapidement des applications web de meilleure qualité ! C'est notamment l'un des apport du recours à TypeScript, le langage de programmation libre et open-source développé par Microsoft. A l'issue de ces 3 journées de formation, les participants seront à même de développer des applications web plus performantes avec Angular 2+.

Introduction

• Outils et IDE
• Packaging, npm
• Webpack
• Installation node.js / npm
• Installation angular-cli

TypeScript et ES6

• Installation TypeScript
• Transpiler EcmaScript
• Let, variables locales et constantes
• Typage et types natifs
• Paramètres optionnels, valeurs par défaut
• Classes et interfaces
• Gestion des modules
• Arrow functions

Le framework Angular

• Contexte
• Présentation générale
• Description de l'architecture du framework (MVC, workspaces, configurations, ...)
• Présentation des composantes du framework (modules, composants, directives, services, ...)
• La philosophie « composant »
• Commandes du angular-cli
• L'extension du navigateur Angular DevTools
• Les types de NgModules
• Métadonnées du NgModule
• Contexte de compilation des modules
• Import/Export de modules

Les composants et template

• Métadonnées du composant (selecteur, template, styles, ...)
• Déclarations dans un NgModule
• ViewEncapsulation
• Interpolation / expression
• Property-Binding / Attribute-binding / Class-binding / Style-binding
• Variables locales

Directives

• Directives d'attributs (selecteur, ElementRef, HostListener, @Input)
• Directives de structure (ngIf, ngFor, Symbole *)
• ng-template

Evénements et cycle de vie

• Syntaxe de l'event-binding
• Types d'événement et handlers
• Objet $event
• Property-binding et @Input
• EventEmitter et @Output
• Two way data binding (opérateur banana in a box)
• Cycle de vie d'un composant (ngOnInit, ngOnChanges, ngOnDestroy)

Pipes

• Définition
• Les pipes standards (lowercase, uppercase, currency, decimal, ...)
• Le pipe key-value
• Créer son propre pipe

Services

• Définition
• Création de service
• Injection d'un service
• Providers (+ providedIn) et injectors
• Différence entre injecteur root et injecteur composant

Formulaires

• Control et ControlGroup
• Validations
• Gestions d'erreurs
• Gestion des modifications
• Groupes de champs avec FormBuilder

Observables, RxJS et HttpClient

• Observables
• RxJS
• HTTP providers
• Requêtes
• Transformation des données et observables
• Options de requêtes

Routing

• Concepts de routage
• Router providers et config
• Router directives
• Méthodes de routage et paramètres

Pour aller plus loin...

• Lazy-loading
• Introduction aux tests
• Introduction aux PWA
• Création de librairie
• Librairie de composant : Introduction à Angular-material
• Gérer l'état : Introduction à ngrx