Angular, développement d'applications web

• Identifier et utiliser les spécifications EcmaScript 6 (ES6)
• Développer plus rapidement et tester des applications web Angular avec JavaScript et TypeScript
• Identifier et utiliser les fondamentaux du Framework Angular et ses nouveautés
• Organiser et modulariser ses développements avec Angular
• Utiliser les API AngularIntégrer les tests unitaires au développement
• Identifier les bonnes pratiques de développement et de mise en production

Identifier et utiliser les spécifications ECMAScript ES13

• JS, EcmaScript et TypeScript
• Notion de Single Page Application
• Les Framework JS (Vue, React, Angular)
• Démonstration :
  • Installation de l'environnement de travail
  • Code en direct (live-coding)

Savoir développer plus rapidement et tester des applications web Angular avec JavaScript et TypeScript

• Commandes Angular-CLI et scaffolding
• Structure d'un workspace Angular et outils intégrés
• Ecosystème Angular et librairies annexes
• Environnement de développement (IDEs et extensions utiles)
• Pratique :
  • Création d'un workspace Angular
  • Utilisation des commandes Angular CLI

Identifier et utiliser les fondamentaux du framework Angular et ses nouveautés

Les workspaces Angular

• Le principe des workspaces
• Le fichier de configuration angular.json

Les syntaxes de base avec Angular

• Le bootstrapping
• Les modules
• Les components et standalone components
• Les templates
• Le data binding
• Les directives
• Les blocs control-flow (@for, @if …)
• Les Pipes
• Les services
• Pratique :
  • Création de components et components standalone
  • Découvrir les directives de comportement (hidden, class, ...)
  • Créer une directive, Découvrir les directives de structures (*ngIf, *ngFor, ...)
  • Créer un pipe

Organiser et modulariser ses développements avec Angular

• Rappels sur le principe des modules Angular
• Installation et utilisation de librairies (utilisation d'une librairie de composants graphiques)
• Création de modules et patterns connus (Shared Module pattern)
• Communication entre components
• Fonctionnalités de Routing et chargement de modules
• Pratique :
  • Installer Angular Material et créer un thème ou module pour regrouper les éléments graphiques
  • Découper son application en plusieurs modules à partir d'un diagramme UML
  • Créer un Shared Module pour partager les fonctionnalités transverses de son application

Utiliser les API Angular

• Formulaires
  • Template driven forms vs Reactive Forms
  • Événements unifiés de changement d'état des formControl (reactive forms)
• SIGNALS et RxJS
  • Découverte des APIs Signals, RxJS et interopérabilité
  • Communication entre composants transverses (services et subjects, signals)
• Services
  • Notion d'injection de dépendance
  • Utiliser le module HttpModule
  • Créer et utiliser ses propres services
• Pratique :
  • Création d'un Reactive Form
  • Consommation d'une API REST (introduction RxJS)

Savoir intégrer les tests unitaires au développement

• Outils et API de test Angular (Protractor, Karma, Testbed, etc.)
• Ecrire des tests
• Outils annexes (Angular DevTools, Extensions VSCode ou autres IDEs)
• Pratique :
  • Tester un composant
  • Tester un service

Identifier les bonnes pratiques de développement et de mise en production

• Outils de documentation
• Mises à jour Angular
• Pratique : Générer une documentation à partir de la JS DOC et d'outils comme COMPODOC