Développement Web avec Angular

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