Formation Angular, maîtriser le Framework Front-End de Google migration et développement


Formation Angular, maîtriser le Framework Front-End de Google migration et développement

Catalogue : Technologies Web



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".
Travaux pratiques
Migrer un script ES5/ES6. Mise en œuvre de l'environnement avec TypeScript.
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.
Démonstration
Migrer une application AngularJS 1.x vers Angular.
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.
Travaux pratiques
Structurer, "scaffolder" un projet 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.
Travaux pratiques
Création de composants.
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.
Travaux pratiques
Création de composants et de directives personnalisées.
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.
Travaux pratiques
Mise en œuvre des cycles de validation de formulaire. Consommation d'une API REST.
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".
Travaux pratiques
Développement d'une application à partir de tests unitaires. Mise en œuvre du Test Driven Developpement.

 

Fiche de la formation



 Cible :

Architectes, développeurs et chefs de projets Web.


 Prérequis :

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


 Durée : 4 jours

 Type : Stage pratique


 Contactez-nous