Développer des applications web robustes avec Angular et TypeScript
Cette formation approfondie s’adresse aux développeurs, architectes et chefs de projets souhaitant maîtriser Angular, le framework robuste et performant de Google dédié au développement d’applications web modernes et évolutives.
Elle couvre l’ensemble des fondamentaux du framework : syntaxe Angular, architecture modulaire, composants, services, formulaires, routing, gestion HTTP et outils CLI. Un accent particulier est mis sur l’intégration de TypeScript, les bonnes pratiques modernes en JavaScript (ES6+), l’injection de dépendances, ainsi que les tests unitaires avec Jasmine, Karma et Protractor.
En parallèle, les participants bénéficieront d’un aperçu de la migration depuis AngularJS, de la configuration avancée des projets Angular et de l’application des concepts de TDD/BDD pour une meilleure qualité logicielle.
Est-ce pour vous ?
Architectes, développeurs et chefs de projets web.
Préalables
• Bonnes connaissances des technologies du Web et des outils modernes de développement Front-End
• Connaissances de JavaScript
Ce que vous saurez faire
- ✓ Maîtriser les fondamentaux JavaScript modernes (ES6+) et TypeScript pour structurer des applications Angular
- ✓ Concevoir des applications Angular complètes avec composants, modules, services et injection de dépendances
- ✓ Mettre en œuvre le routing, les formulaires et les échanges HTTP pour des applications dynamiques
- ✓ Utiliser Angular CLI et les outils associés pour automatiser le développement, le build et l’optimisation
- ✓ Tester et fiabiliser les applications avec Jasmine, Karma et les bonnes pratiques TDD/BDD
Contenu de la formation
1 Développer avec JavaScript : rappels
- Présentation des bonnes pratiques ECMAScript 5
- Présentation générale de ES7/ES6/ES2015
- Nouveautés syntaxiques : portée, "template string", "arrow functions", les promesses
- Le développement JavaScript Objet avec la syntaxe de class
- Le patron de conception observer/observable (ES7)
- La librairie RX.js
- Outils indispensables: Babel, Traceur et Typescript
- Ypescript en détail
- ES6/2015: approche modulaire
- ES7: gestion des traitements asychrones: await async
- "Modules Loaders" : Webpack, “import/export”
2 Passer d'AngularJS 1.x à Angular
- Comparaison des concepts
- Processus de migration
- Structure d'une application Angular
- Les principaux modules d'Angular
- Principe de l'injection de dépendance
- Classification des directives : composant, attribut, structure
- Les décorateurs : définition des hiérarchies
3 L'utilitaire ng ou @angular/cli
- Utilisation de l'utilitaire en ligne de commande
- Scaffolder une structure de projet
- Configuration des utilitaires de tâches
- Lancer un serveur de développement/production (build)
- Compilation Ahead of Time
- La notion de “Tree Shaking”
- BootStrap d'application
4 Définition de composants
- Comprendre les Web Components
- Angular Compiler : Change Detection
- Syntaxe des templates : interpolation/expression, "Binding" et filtres
- Directives de transformation : ngIf, ngFor, ngSwitch…
- Variables locales et variables de Template
- Classe de composants
- Directives de configuration : selector, provider
- Événements utilisateur et événements logiques personnalisés : EventEmitter
5 Classifications des composants applicatifs
- Module, RouterModule, SharedModule
- Component, Directive, Pipe, Service, Guard
- Présentation de l'injection de dépendances
- Création de services injectables
- Classification des services
- Configuration de l'injecteur
- Les décorateurs
- @Host, @ContentChild, @ViewChild
- JavaScript Pure function, PurePipe
6 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 et configuration de routes dans l'arbre des composants
7 Tests unitaires
- Configurer l'environnement de test
- Présentation de Karma et de Jasmine
- Écrire les tests avec Jasmine
- Écrire 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".
📌 Informations pratiques
Nos formations sont offertes à Montréal ou Québec, en présentiel ou en classe virtuelle. Les dates et lieux sont précisés lors de votre choix de session ci-dessous. Si vous avez des questions, consultez notre FAQ.