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 4

Angular 4 est désormais disponible. Rassurez-vous, il s’agit toujours du même Angular, on fait le point avec vous à ce sujet. Il s’agit donc du même cours que notre formation Angular 4, dans laquelle vous retrouverez :

  • 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 travaillons d’abord sur un composant d’UI simple pour comprendre les concepts d’Angular, des plus simples aux plus avancés ; puis nous les mettons en pratique en construisant une vraie application web.

Les bons outils Angular

De bons outils sont indispensables pour travailler proprement et efficacement. Des extensions spécifiques existent pour Angular.

  • Code : un éditeur spécialisé en JavaScript
  • Les extensions pour Angular
  • TSLint pour vérifier la qualité du code
  • Gestionnaire de dépendances : npm et le semantic versioning

ES6/ES2015 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, template literals, arrow functions…
  • Classes et interfaces
  • Typage statique
  • 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.

Modules

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.

  • Modules ES6
  • ngModule

Composants : @angular/core

C’est la notion centrale dans Angular 2, mais aussi dans les autres frameworks et même maintenant en JavaScript natif.

  • Décorateurs et sélecteur
  • Vue : template et styles
  • Projection de contenu
  • Récupération d’attributs

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.

  • Interpolation
  • Property binding
  • Classes et styles
  • Pipes (filtres)
  • Conditions et boucles
  • Event binding

Formulaires : @angular/forms

La gestion des événements est intégré à ce système de templating, avec également des outils plus avancés pour les formulaires.

  • User input : 2-way data binding
  • Contrôles et validation

Communication entre composants

Les données doivent transiter d’un composant à l’autre, c’est l’une des difficultés des applications.

  • View et ContentChildren
  • Communication de valeurs : Input
  • Communication d’événements : Output
  • Composants « purs » de présentation vs. composants « impurs » conteneurs

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.

  • Services
  • Providers avancés

AJAX : @angular/http

Communiquer avec une API REST est très simple avec Angular.

  • Rappels de sécurité
  • Module HTTP

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
  • Async pipe
  • Gestion des données transversales (state)

Compléter Angular 2

Vous pouvez ajouter des fonctionnalités au framework.

  • Directives : ajouter des comportements
  • Pipes : ajouter ses propres filtres

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.

  • Configuration des routes
  • Paramètres obligatoires (params)
  • Paramètres optionnels (queryParams)
  • Navigation (routerLink et navigate)
  • Redirections

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
  • Build, minification et tree-shaking avec webpack
  • Polyfills pour la rétro-compatibilité

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.

Angular 4

Notre programme est déjà à jour avec Angular 4, vous pouvez voir la suite en cliquant ici.

Cette formation m'intéresse

Formation Angular 2

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 jour(s) - Prix : 1800€

Je souhaite participer

Nous pouvons intervenir dans votre entreprise.

Durée : 3 ou 4 jour(s)

Obtenir à un devis