[wpms_breadcrumb reverse="0"]
Formation numérique - Framework et PHP

Angular, maîtriser le Framework Front-End de Google

Reference : ANGFG
4 jours - 2480 € HT
Prochaines sessions
  • Le 08/10/2019
  • Le 22/10/2019
  • Le 05/11/2019
  • Le 19/11/2019
  • Le 03/12/2019
  • Le 17/12/2019
Angular, maîtriser le Framework Front-End de Google
Objectifs

  • Organiser, modulariser et tester ses développements JavaScript
  • Maîtriser les fondamentaux du Framework Angular
  • Créer rapidement des applications Web complexes
  • Savoir intégrer les tests unitaires au développement
  • Connaître les bonnes pratiques de développement et de mise en production

Pré requis

  • Bonnes connaissances des technologies du Web et des outils modernes de développement Front-End. Connaissances de JavaScript.

Modalités pédagogiques

Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques

Inscription

Programmes de Angular, maîtriser le Framework Front-End de Google

Développement JavaScript : rappels

  • Bonnes pratiques ECMAScript 5.
  • ES7/ES6/ES2015, présentation générale.
  • Nouveautés syntaxiques : portée, « template string », « arrow functions », les promesses…
  • Le développement JavaScript Objet avec la syntaxe de class.
  • Le pattern observer/observable (ES7).
  • La librairie RX.js : opérateur clés pour la manipulation d’observable.
  • Outils indispensables. Babel, Traceur et Typescript.
  • Typescript en détail, configuration.
  • ES6/2015 approche modulaire.
  • ES7 gestion de l’asynchronicité : await async.
  • « Modules Loaders » : Webpack, « import/export ».

Migrer d’AngularJS 1.x à Angular

  • Comparaison et « topographie » des concepts.
  • Préparer la migration. Structure d’une application Angular.
  • Les modules Angular, « core » et principaux modules.
  • Principe de l’injection de dépendance.
  • Classification des directives : composant, attribut, structure.
  • Les décorateurs : définition des hiérarchies.

L’utilitaire ng ou @angular/cli

  • Utilisation de l’utilitaire en ligne de commande.
  • Scaffolder une structure de projet : anatomie et dépendance.
  • Configuration des utilitaires de tâches.
  • Configuration et commandes clés.
  • Lancer un server de développement/production (build).
  • Compilation Ahead of Time. La notion de « Tree Shaking ».
  • Gestion des modules : bonnes pratiques.
  • BootStrap d’application.

Définition de composants

  • Comprendre les Web Components. (standard, concepts, shadow DOM, scoped CSS…).
  • Cycle de vie dans l’application.
  • Angular Compiler : Change Detection.
  • Syntaxe des templates : interpolation/expression, « Binding » et filtres.
  • Directives de transformation : ngIf, ngFor, ngSwitch…
  • Définition syntaxique, le symbole (*).
  • Variables locales et variables de Template.
  • Classe de composants. Directives de configuration : selector, provider.
  • Evénements utilisateur et événements logiques personnalisés : EventEmitter.

Classifications des composants applicatifs

  • Module, RouterModule, SharedModule.
  • Component, Directive, Pipe, Service, Guard.
  • Principe de l’injection de dépendances.
  • Création de services injectables. Classification des services.
  • Configuration de l’injecteur.
  • Les décorateurs et leurs propriétés en détails.
  • @Host, @ContentChild, @ViewChild.
  • JavaScript Pure function, PurePipe.

Gestion des formulaires, « Routing » et requête HTTP

  • FormControl et FormGroup.
  • TDF versus DDF : Template Driven Form et Data Driven Form
  • Validation et gestion d’erreur personnalisée.
  • Liaison de données via HTTP.
  • Gestion et configuration des échanges HTTP au niveau applicatif.
  • Création de routes.
  • Intercepter les paramètres de routage et wildcard.
  • Ciblage, « router-outlet » événements de routage.
  • Gestion de routes dans l’arbre des composants.
  • Configuration des « Guard » pour le l’initialisation des routes.

Tests unitaires. Bonnes pratiques et outils

  • Configurer l’environnement de test.
  • Présentation de Karma et de Jasmine.
  • Ecrire les tests avec Jasmine.
  • Ecrire des tests d’intégration avec protractor.
  • Couverture du code. Indices du code-coverage.
  • BDD Behaviour Driven Developpemnt, TDD Test Driven Developpement.
  • Cas de test : pipe, composant, application.
  • Angular « Coding guide Style ».