Formation Angular 2

Une formation Angular 2 pour les développeurs qui veulent être opérationnels pour construire des applications web.


Mise à jour vers Angular 10

Angular 10 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, notamment :

  • pourquoi une formation Angular 2 ?
  • pourquoi notre formation Angular 2 ?
  • Angular 2 : pour qui ?
  • les objectifs de la formation Angular 2

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.

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

Angular 4, 5, 6, 7, 8, 9 & 10

Notre programme est à jour avec Angular 4, 5, 6, 7, 8, 9 & 10.

Retrouvez le reste du programme dans la formation Angular générique.

Cette formation m'intéresse

Formation Angular

Formation Angular 2

Public : Développeurs

Pré-requis : Connaissance d'un langage de programmation (JavaScript, PHP, Java, C#...)

Prochaines sessions inter :

  • du au
  • du au
  • du au
  • du au
  • du au

De nouvelles dates peuvent être ajoutées en fonction de la demande.

Durée : 4 jours - Prix : 2400€

Je souhaite participer

Compte tenu de la situation, il sera décidé au fil de l'eau pour chaque session si elle a lieu en présentiel à Paris ou à distance, en fonction de l'évolution des règles sanitaires et de la préférence des participants.

Eligible à un financement par votre OPCA (FAFIEC/Atlas, AFDAS...).
Non éligible via le CPF. Pourquoi ?

Session dédiée à votre entreprise, dans vos locaux ou à distance, avec un programme personnalisé :