Formation Angular 2

Une formation Angular 2 pour les développeurs/ses qui veulent être opérationnel/le/s pour construire des applications web.


Mise à jour vers Angular 7

Angular 7 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

Modules et architecture

Un des rôles principaux d’un framework est de vous permettre d’être modulaire, pour pouvoir organiser et réutiliser votre code. C’est le concept un peu subtil dans Angular, notre formateur a donc rédigé un article sur Medium à ce sujet.

  • Imports / exports ES6
  • Les différentes types de NgModule
  • Comment architecturer son application ?
  • MVC ? MVP ? MVVM ?
  • Composants pages vs. composants de présentation
  • Quand importer un NgModule ?

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)

Asynchronicité : rxjs

Les traitements asynchrones sont une des grandes difficultés en JavaScript. L’ES6 a déjà simplifié cela, mais Angular 2 a fait le choix d’aller encore plus loin avec RxJS, qui permet de mettre en place des fonctionnalités avancées très simplement.

  • Promises vs. Observables
  • Programmation fonctionnelle et réactive
  • Les principaux opérateurs RxJS
  • Async pipe
  • Gestion des données transversales (state)

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

Angular 4, 5, 6 & 7

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

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/ses

Pré-requis : Bases de JavaScript

Prochaines sessions à Paris chez
openska

  • du au
  • du au
  • du au

Durée : 3 jours - Prix : 1800€

Durée : 4 jours - Prix : 2400€

Je souhaite participer

Nous pouvons intervenir dans votre entreprise.

Durée : 3 ou 4 jours

Obtenir à un devis