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

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

Reference : ANGFG

4

jours - 2480 € HT Télécharger la fiche
Prochaines sessions

Nous consulter.

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 et délais d’accès

Bulletin d'inscription à retourner complété

Public visé

Architectes, développeurs et chefs de projets Web.

Pré-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 ».