Une formation Angular 2 pour les développeurs qui veulent être opérationnels pour construire des applications web.
Mise à jour d’Angular
Une version plus récente d’Angular est désormais disponible. Rassurez-vous, il s’agit toujours du même Angular, on fait le point avec vous à ce sujet.
Vous trouverez donc plus de détails dans la page générale de la formation Angular.
Programme de la formation Angular 2
La formation Angular 2 s’articule en deux temps : nous créons une application web from scratch avec les concepts de base d’Angular, puis progressivement nous mettons en place les fonctionnalités plus avancées pour aboutir à une vraie Progressive Web App.
Pourquoi Angular ?
Nous commençons par replacer les technologies dans leur contexte, pour avoir conscience de toutes les problématiques auxquelles il faut répondre aujourd’hui, et comprendre en quoi Angular nous aide à cela.
- Contexte et problématiques d’un site web
- Contexte et problématiques d’une application web
- Angular vs. React vs. Vue (spoiler : Angular, c’est mieux !)
- Le point sur les différentes versions d’Angular (spoiler : c’est le même Angular !)
Les bons outils Angular
De bons outils sont indispensables pour travailler proprement et efficacement. Des extensions spécifiques existent pour Angular.
- Visual Studio Code : un éditeur spécialisé en JavaScript
- Les extensions VS Code pour Angular
- TSLint pour vérifier la qualité du code
- Gestionnaire de dépendances : npm et le semantic versioning
- Méthodologie : savoir trouver les différentes documentations
ES6 et TypeScript
Angular 2 s’appuie sur la nouvelle version de JavaScript et sur TypeScript, pour à la fois simplifier la prise en main du framework et passer à une façon de coder plus avancée et plus propre, pour éviter tout risque d’erreur. Vous disposerez aussi d’une autocomplétion complète dans votre éditeur.
- Nouveautés JavaScript : let, const, template literals, arrow functions…
- Classes et interfaces
- Typage statique : pourquoi TypeScript ?
- Typings et autocomplétion
Afin de ne pas perdre trop de temps sur ces bases, il vous sera indiqué de bien suivre nos guides de préparation avant votre formation.
Composants : @angular/core
C’est la notion centrale dans Angular 2, mais aussi dans les autres frameworks et même maintenant en JavaScript natif.
- Pourquoi des composants ?
- Décorateur et sélecteur
- Vue : template et styles
- Encapsulation
Injection des dépendances
L’autre difficulté, c’est de pouvoir interagir avec d’autres classes, par exemple pour récupérer des données. Angular 2 résout ça avec un système d’injection très simple.
- Pourquoi des services ?
- Services et interfaces
- Injection de dépendances
AJAX : @angular/http
Communiquer avec une API REST est très simple avec Angular, quel que soit le langage utilisé côté serveur.
- Rappels de sécurité : pourquoi les méthodes HTTP ?
- Module HTTP
Router Angular 2 : @angular/routing
Gérer la navigation dans l’application en JavaScript natif est très laborieux. Le module de routing d’Angular 2 vous simplifie grandement la tâche.
- Pourquoi du routing côté client plutôt que côté serveur ?
- Configuration des routes
- Paramètres de route
- Navigation (routerLink et navigate)
- Redirections
- Problématiques de SEO
Modules d’UI
Rapidement, vous voudrez factoriser vos composants pour pouvoir les réutiliser facilement dans différents projets.
- Export des composants
- Pipes (filtres)
- Directives
Templating & data-binding : @angular/common
Angular 2 y ajoute un système de templating à la fois simple et puissant. Avec la particularité que, comme nous sommes côté front, ce templating sera dynamique, en s’adaptant automatiquement et en temps réel aux changements de valeurs.
- Pourquoi du templating côté client plutôt que côté serveur ?
- Interpolation
- Property binding
- Classes et styles
- Conditions et boucles
- Event binding
- Problématiques de sécurité : XSS
Communication entre composants
Les données doivent transiter d’un composant à l’autre, c’est l’une des difficultés des applications.
- Projection de contenu
- View et ContentChildren
- Communication de valeurs : Input
- Communication d’événements : Output
- Cycle de vie des composants
Formulaires : @angular/forms
Les formulaires ont un fonctionnement spécifique, directement pris en charge par Angular.
- User input : 2-way data binding
- Problématiques de sécurité : contrôles et validation
Modules de services
Certains services auront besoin d’être transversaux à l’application.
- Providers
- Rassemblement des exports dans un point d’entrée
Stockage local et authentification
Une application doit évidemment stocker des données en local pour pouvoir fonctionner hors ligne. Angular 2 vous laisse vous débrouiller avec les APIs natives, qui sont simples mais pas forcément optimales. Notre formateur a développé un module pour améliorer cet aspect.
- Problématiques de sécurité : cookies vs. stockage local
- localStorage & IndexedDB
- Authentification : JSON Web Token (JWT)
- Gardes
Mise en production et performances : @angular/compiler-cli
C’est la grande force d’Angular 2 : booster les performances pour que l’application se charge le plus rapidement possible.
- Compileur offline Angular 2 : AoT
- Problématiques de performances : build, minification et tree-shaking avec webpack
- Problématiques de compatibilité : polyfills et transpilation
- Variables d’environnement
A noter qu’Internet Explorer, c’est fini. Nous n’abordons donc plus la rétro-compatibilité avec IE.
Autres versions d’Angular
Notre programme est à jour avec les nouvelles versions d’Angular.
Retrouvez le reste du programme dans la formation Angular générique.
