Formation Angular

Public concerné

Développeur, chef de projet, agence web ou webmaster

Niveau requis

Maîtriser HTML/CSS, connaître Javascript

Programme

• PARTIE 1 Rappels sur javascript ES6/7 et orienté objet
• Les class et l'instanciation d'objets
• L'accessibilité des membres, l'encapsulation et les accesseurs, l'héritage
• Savoir créer un modèle de données via les class
• Les principales implémentations ES6/7 (Arrow functions, Spread operator, Paramètres rest, Template strings, Import et Export)
• PARTIE 2 Typescript
• Qu'est-ce que Typescript ?
• Utiliser les types natifs
• Créer vos modèles de données avec les interfaces
• Interface ou class pour typer vos donnnées ?
• PARTIE 3 Components, data-binding, template, directives et events
• Le component racine, déclaration et structure - définition du décorateur de class
• data-binding, property-binding et change detection, comment ça marche ?
• A l'abordage du template HTML et des syntaxes
• Gérer les événements utilisateur
• Les directives de structure *ngIf et *ngFor
• Les directives ngClass et ngStyle
• Le cycle de vie d'un component
• Travaux pratiques : créer un component enfant, afficher des données, gérer des évènements et utiliser les directives de structure
• PARTIE 4 Les pipes
• Qu'est-ce qu'un pipe et comment il fonctionne ?
• Travaux pratiques : utilisation des pipes natifs Angular
• Travaux pratiques : création d'un Custom pipe
• PARTIE 5 Les services
• Travaux pratiques : partager des fonctionnalités entre les components
• Notion de gestion d'état dans une application front-end
• Travaux pratiques : partager l'accès aux données entre les components
• Comment utiliser un service dans un component grâce à l'injection de dépendance ?
• Pourquoi et quand utiliser les services ?
• PARTIE 6 Pratique : création d'une application web
• Créer un nouveau projet et ajouter Bootstrap (les 3 méthodes)
• Scaffolder une application en components et en services via le CLI Angular
• Communiquer de l'information entre les components avec @Input et @Output
• Communiquer de l'information entre les components avec un Service
• Utiliser HttpClient pour Faire des requêtes de type GET/POST/PUT/DELETE
• Mise en place du routing avec la class Router
• PARTIE 7 Gestion des formulaires
• FormControl et FormGroup
• TDF versus DDF : Template Driven Form et Data Driven Form
• Validation et gestion d'erreur personnalisée
• Gestion de l'envoi des données du formulaire
• Travaux Pratiques : ajout d'un formulaire dans l'application
• PARTIE 8 Notions avancées : state, performance et conception modulaire
• Qu'est-ce que le state d'une application et pourquoi le gérer ?
• Mettre en place une stratégie de gestion du state
• Travaux pratiques : gérer simplement le state de l'application avec RxJS et les services
• Les autres solution existantes pour gérer l'état de l'application
• Conception modulaire d'une application, pourquoi ?
• Le lazy-loading versus le eager-loading
• Travaux pratiques : créer un nouveau module et mettre en place du lazy-loading
• PARTIE 9 Bonnes pratiques, déploiement, rappels généraux et QCM
• QCM online
• Rappels sur les étapes de développement de la création au déploiement
• Compiler une application Angular pour la production et la déployer
• Rappels des bonnes pratiques
• Session questions/réponses avec le formateur

Modalités pratiques

Travaux pratiques
Création d'une application fil rouge avec les derniers standards : standalone components, l'API Signal pour gérer la réactivité, la syntaxe de control flow.

Méthodes pédagogiques
Chaque nouveau concept théorique sera appliqué immédiatement de façon pratique.

Modalités d'évalutation

En cours de formation, par des études de cas ou des travaux pratiques. Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou un examen Airskill.