Formation à la certification Angular, e-learning et certificat

Formation à la certification Angular

Ce cours de certification en Angular vous aidera à maîtriser le développement web front-end avec Angular. Acquérir une connaissance approfondie des concepts Angular, tels que la facilitation du développement d'applications web à page unique, l'injection de dépendance, les typescript, les composants, les directives, les tuyaux, les formulaires, le routage et les tests.

Offre: En plus de cette formation pratique en ligne, nous vous offrons un accès gratuit à nos sessions de cours en ligne. Vous disposez de 90 jours pour réserver des sessions de formation en ligne gratuites, qui sont toujours organisées à des heures flexibles. En plus de votre formation en ligne et si vous le souhaitez, vous aurez la possibilité d'interagir avec le formateur et les autres participants. Ces sessions de formation en ligne seront également enregistrées, afin que vous puissiez les conserver.

Qu'est-ce qui est inclus ?

• 50 heures d'apprentissage mixte
• 20 heures d'auto-apprentissage en ligne
• 30 heures de formation avec instructeur
• Cours gratuit d'introduction à JavaScript
• Flexibilité dans le choix des cours
• Certificat d'achèvement reconnu par l'industrie

Public cible

• Développeurs d'interface utilisateur
• Chefs de projets techniques
• Développeurs web complets
• Spécialistes de l'assurance qualité
• Architectes
• Étudiants souhaitant apprendre le développement d'interface utilisateur front-end

Objectifs de la formation

• Comprendre la conception des applications à page unique et comment Angular facilite leur développement
• Séparer les couches modèle, vue et contrôleur de votre application et les mettre en œuvre avec Angular
• Maîtriser les expressions, les filtres et les champs d'application d'Angular
• Construire des formulaires Angular et écrire des directives Angular
• Tester unitairement et de bout en bout vos applications Angular
• Développer des interfaces utilisateurs interactives et dynamiques avec Bootstrap

Détails et critères de certification

• Avoir suivi au moins 85 % du cours ou avoir assisté à une session complète.
• Réussite et évaluation du projet

Programme

Leçon 01 - Applications à page unique

• Vue d'ensemble du cours
• Introduction aux applications à page unique (SPA)
• Pourquoi avons-nous besoin d'Angular ?
• Mise en place de l'environnement de développement
• Architecture des applications Angular
• Première application Angular

Leçon 02 - TypeScript et ESNext

• Introduction au module et à TypeScript
• Configuration de l'environnement pour écrire TypeScript
• Déclarations de variables (var, let et const)
• Types - primitives
• Types - types de référence et types spéciaux
• Opérateurs - propagation et backticks
• Opérateurs - Destructure et Rest
• Classes
• Interfaces
• Fonctions pour les flèches
• Modules
• Récupérer
• Async ou await

Leçon 03 - Les décorateurs

• Introduction au module et vue d'ensemble des modules Angular
• Qu'est-ce qu'un décorateur ?
• Les modules Angular et le décorateur @NgModule
• Déclarations
• Entrée et sortie
• Fournisseurs, bootstrap et composants d'entrée
• Mécanisme d'amorçage pour les applications Angular

Leçon 04 - Décorateur de composants

• Introduction au module
• Les composants Angular et le décorateur @Component
• Créer un composant Angular avec Angular CLI et sur StackBlitz
• Métadonnées pour les décorateurs de composants
• Vue d'encapsulation - Emulated, ShadowDom, None
• Liaison de données - Interpolation de chaînes de caractères - {{ }}
• Liaison des propriétés - []
• Liaison d'événements - ()
• Décorateurs de propriété @Input et @Output
• Liaison de données bidirectionnelle - [()]
• Liaison d'attribut - [attr.]
• Liaison de classe - [class.]
• Liaison de classe - [style.]
• Introduction aux crochets de cycle de vie dans Angular
• Utilisation des crochets de cycle de vie dans Angular
• Vue de la requête - vue de l'enfant, vue de l'enfant, contenu de l'enfant, vue du contenu de l'enfant
• Changer le mécanisme de détection dans Angular. ZoneJS, NgZones

Leçon 05 - Le routage avec Angular

• Introduction au routage
• Implémentation du routage dans une application Angular
• Créer une liste d'utilisateurs. Poser les bases du routage pour les enfants
• Abstraire le lien de l'utilisateur dans un composant séparé
• Implémentation du routage pour les enfants
• Correspondance des chemins et types d'itinéraires
• Introduction à la protection des routes dans Angular
• Protections CanActivate et CanActivateChild dans Angular
• Désactiver les protections dans Angular
• Prélèvement de données pour un composant avec Resolve

Leçon 06 - Injecter des dépendances

• Introduction à la section
• DI en tant que modèle, DI en tant que cadre et types de fournisseurs
• Injection hiérarchique de dépendances
• Introduction aux services dans Angular
• Récupérer des données d'une API Rest avec HttpClient
• Opérations CRUD avec HttpClient, HttpParams et HttpHeaders
• Observables et opérateurs dans les observables - Map, Retry, Catch
• Thèmes comportementaux et partage de données à l'aide de thèmes comportementaux

Leçon 07 - Plongée dans les directives

• Introduction aux sections
• Introduction aux directives
• Directives structurelles intégrées
• Directives intégrées pour les attributs
• Création de directives d'attributs personnalisées
• Création de directives structurelles personnalisées
• Introduction aux tuyaux dans Angular
• Utiliser les tuyaux intégrés
• Créer des tuyaux personnalisés dans Angular
• Pipes propres et impurs dans Angular
• Les décorateurs dans Angular
• Construire des décorateurs personnalisés dans Angular
• Construire un décorateur personnalisé pour les enregistreurs de classe de crochet de cycle de vie
• Construire un décorateur de propriété personnalisé dans Angular

Leçon 08 - Les formulaires dans Angular

• Introduction aux sections
• Types de stratégies pour construire des formulaires dans Angular
• Créer rapidement de longs formulaires Bootstrap en utilisant VS Code avec Emmet
• Ajouter un contrôle de formulaire à un formulaire piloté par un modèle avec la directive ngModel
• Obtenir la représentation de l'objet JavaScript d'un formulaire avec la directive ngForm
• Désactiver le bouton de soumission d'un formulaire avec le drapeau $invalid du formulaire
• Obtenir la représentation de l'objet JavaScript d'un formulaire dans la classe TypeScript
• Ajouter des cases à cocher, des boutons radio et une liste déroulante à un formulaire basé sur un modèle
• Créer des sous-sections dans le formulaire en utilisant la directive NgModelGroup
• Étapes de mise en œuvre d'un formulaire réactif dans Angular
• Créer rapidement un formulaire Bootstrap pour notre formulaire réactif en utilisant Emmet
• Créer un formulaire réactif dans la classe TypeScript et le lier au modèle
• Ajouter des validations à un formulaire réactif
• Ajouter ou supprimer dynamiquement des FormControl(s) ou FormGroup(s) en utilisant des FormArray(s)
• Ajouter des validations personnalisées synchrones à votre formulaire réactif
• Ajouter des validations personnalisées Assync à votre formulaire réactif
• Réinitialiser la valeur d'un formulaire

Leçon 09 - Utiliser des bibliothèques tierces

• Introduction à la section
• Créer un projet Angular CLI avec SCSS comme style de base
• Introduire Material Design Bootstrap dans votre projet Angular CLI
• Ajouter une barre de navigation à l'en-tête
• Ajouter des boutons à Material Design
• Ajouter des cartes
• Utiliser des listes déroulantes et des entrées de formulaire en Material Design
• Introduire Angular Material dans votre projet Angular CLI au-dessus de la MDB
• Ajouter des boutons radio, un curseur, une barre de progression et un spinner Introduction à Firebase
• Créer une application en utilisant la console Firebase
• Configurer votre projet Angular CLI pour supporter Firebase
• Interagir avec la base de données en temps réel Firebase via les méthodes d'AngularFireList
• Ajouter et lire des données dans la base de données en temps réel de Firebase
• Mettre à jour et supprimer des données de la base de données en temps réel dans Firebase

Projet final

Construire une application web pour les listes de produits en Angular. Implémentez la fonctionnalité CRUD dans Angular et construisez une application Angular avec les fonctionnalités suivantes :

• Formulaire de produit
• Liste de produits
• Visualiser, supprimer et modifier les produits de la liste