Développement Web avec Angular 2

Angular comble les faiblesses de JavaScript en lui ajoutant de nouvelles fonctionnalités. Il facilite ainsi la réalisation d'applications web SPA en tirant parti des navigateurs modernes.

Objectifs :

Cette formation vous permettra d'acquérir les compétences nécessaires pour utiliser Angular avec le langage TypeScript pour développer des SPA / RIA / Composants, à l'issue de la formation, vous serez en mesure :

  • De comprendre comment architecturer une SPA avec Angular.
  • De comprendre le paradigme Composant.
  • De maîtriser les directives, Filtres et Data-Binding bi-directionnel.
  • De comprendre la notion de Components et leurs implications.
  • D'écrire des Routes, des services, dialoguer avec un serveur.
Publics
Développeurs front, Architectes front.
 
Taille du groupe : ≤ 10 pers.
Durée

1 jour.


70% de pratique,
30% de cours.
Pré-requis

Connaissances en TypeScript et développement web.

Contenu pédagogique :

Introduction

  • Motivations : développement d’applications SPA / RIA
  • Les alternatives
  • Oublier AngularJS
  • Le paradigme Composant
  • Concepts, architecture et fonctionnalités
  • Ce qu’il faut retenir

Outillage

  • Editeur de texte: Atom
  • Node + NPM
  • Angular CLI

Installation et découverte

  • Génération d’un projet Angular
  • Création d’une application « Hello World »
  • Explications sur le bootstrap
  • Explications sur les libraires externes (RxJS, zone.js)

Les modules

  • Création
  • Utilisation

Les composants

  • Fonctionnement
  • Instanciation, imbrication

Templates

  • Interpolation
  • Binding
  • Héritage
  • Evènements
  • Built-in directives

Création de composant

  • Créer et utiliser un composant
  • Cycle de vie
  • Interface
  • Directive attribut
  • Directive structurelle
  • Hooks sur le cycle de vie

Dialogue entre composants

  • Parent / enfant
  • Avec service

Dialogue entre composants

  • Utilisation de directives existantes
  • Fonctionnement, attributs, widgets
  • Ecriture d’une Directive

Le routage

  • Configuration
  • Navigation
  • Paramètres de l’url
  • Lazy-loading

Les formulaires

  • Utilisation des composants du formulaire
  • Validation des données
  • Paramètres de l’url
  • Traitement des formulaires

La communication serveur

  • Les Requêtes en Angular
  • Les appels AJAX avec HTTP_PROVIDERS
  • Les services REST avec JSONP_PROVIDERS

Annexes/Options

  • Gestion d’évènements personnalisés avec EventEmitter
  • Intégration de WebComponents non Angular
  • Les différents Library Loader
  • Les Animations

Conclusion

  • Bonnes pratiques et retours d’expériences
  • A retenir (les + et les -)
  • Quelques liens