Angular - Développement Web - eLearning

Angular - Développement Web - eLearning

Cette formation certifiante Angular vous aidera à maîtriser le développement web front-end avec Angular. Acquérez des connaissances approfondies sur les concepts Angular, tels que la facilitation du développement d'applications web monopages, l'injection de dépendances, le typescript, les composants, les directives, les pipes, les formulaires, le routage et les tests.

Caractéristiques du programme :

• Cours et matériel en anglais
• Accès pendant 1 an à la plateforme d'e-learning à votre rythme, 24 h/24 et 7 j/7
• Niveau débutant à intermédiaire pour les développeurs web en herbe
• 20 heures d'apprentissage en ligne à votre rythme
• 50 heures d'étude recommandées
• 2 projets à la fin du cours
• Pas d'examen à la fin du cours, mais les étudiants recevront une attestation de formation

Prérequis :

Il n'y a pas de prérequis pour suivre cette formation certifiante Angular.

Public cible :

Une formation certifiante Angular est idéale pour les personnes qui souhaitent acquérir ou perfectionner leurs compétences dans Angular, un framework JavaScript populaire pour la création d'applications web dynamiques. Voici les personnes qui pourraient en bénéficier le plus :

• Développeurs UI
• Chefs de projet techniques
• Développeurs web full-stack
• Spécialistes de l'assurance qualité
• Étudiants qui souhaitent apprendre le développement UI front-end

Principaux résultats d'apprentissage :

À l'issue de cette formation Angular en ligne, vous serez en mesure de :

• Comprendre la conception des applications monopages et comment Angular facilite leur développement
• Séparer les couches modèle, vue et contrôleur de votre application et les implémenter à l'aide d'Angular
• Maîtriser les expressions, les filtres et les portées Angular
• Créer des formulaires Angular
• Écrire des directives Angular
• Tester unités et tester de bout en bout vos applications Angular
• Développer une interface utilisateur interactive et dynamique à l'aide de Bootstrap

Programme

Programme à votre rythme

Leçon 01 - Applications monopages

• Présentation
• Introduction aux applications monopages (SPA)
• Pourquoi utiliser Angular ?
• Configuration de l'environnement de développement
• Architecture des applications Angular
• Première application Angular

Leçon 02 - TypeScript et ESNext

• Présentation du module et introduction à TypeScript
• Configuration de l'environnement pour écrire en TypeScript
• Déclarations de variables (var, let et const)
• Types - Primitives
• Types - Types de référence et types spéciaux
• Opérateurs - Spread et backticks
• Opérateurs - Destructure et Rest
• Classes
• Interface
• Fonctions fléchées
• Modules
• Fetch
• Async ou await

Leçon 03 - Décorateurs

• Introduction au module et aperçu des modules Angular
• Que sont les décorateurs
• Les modules Angular et le décorateur @NgModule
• Déclarations
• Importations et exportations

• Providers, bootstrap et composants d'entrée
• Mécanisme de démarrage des applications Angular

Leçon 04 - Décorateur de composants

• Introduction au module
• Composants Angular et décorateur @Component
• Création d'un composant Angular à l'aide de l'interface CLI Angular et sur StackBlitz
• Métadonnées du décorateur de composants
• Encapsulation de la vue - Émulée, ShadowDom, Aucune
• Liaison de données - Interpolation de chaînes
• Liaison de propriétés
• Liaison d'événements
• Décorateurs de propriétés @Input et @Output
• Liaison de données bidirectionnelle
• Liaison d'attributs
• Liaison de classes
• Liaison de classes
• Introduction aux hooks de cycle de vie dans Angular
• Utilisation des hooks de cycle de vie dans Angular
• Requêtes de vue - Vue enfant, vues enfants, contenu enfant, contenu enfants
• Modification du mécanisme de détection dans Angular. ZoneJS, NgZones

Leçon 05 - Routage Angular

• Introduction au routage
• Implémentation du routage dans une application Angular
• Création d'une liste d'utilisateurs. Préparation du routage enfant
• Abstraction du lien utilisateur vers un composant distinct
• Implémentation des routes enfants
• Correspondance de chemin et types de route
• Introduction aux gardes de route dans Angular
• Gardes CanActivate et CanActivateChild dans Angular
• Garde CanDeactivate dans Angular
• Préchargement des données pour un composant à l'aide de Resolve

Leçon 06 - Injection de dépendances

• Introduction à la section
• DI en tant que modèle, DI en tant que framework et types de fournisseurs
• Injection de dépendances hiérarchiques
• Introduction aux services dans Angular
• Récupération de données à partir d'une API Rest à l'aide de HttpClient
• Opérations CRUD à l'aide de HttpClient, HttpParams et HttpHeaders
• Observables et opérateurs dans les observables - Map, Retry, Catch
• Behavior Subject et partage de données à l'aide de Behavior Subjects

Leçon 07 - Directives approfondies

• Introduction à la section
• Introduction aux directives
• Directives structurelles intégrées
• Directives d'attribut intégrées
• Création de directives d'attribut personnalisées
• Création de directives structurelles personnalisées
• Introduction aux pipes dans Angular
• Utilisation des pipes intégrées
• Création de pipes personnalisées dans Angular
• Pipes pures et impures dans Angular
• Réexamen des décorateurs
• Création de décorateurs personnalisés dans Angular
• Création d'un décorateur de classe de hook de cycle de vie personnalisé
• Création d'un décorateur de propriété personnalisé dans Angular

Leçon 08 - Formulaires dans Angular

• Introduction à la section
• Types de stratégies de création de formulaires dans Angular
• Création rapide de longs formulaires Bootstrap à l'aide de VS Code et Emmet
• Ajout de FormControl(s) à un formulaire basé sur un modèle à l'aide de la directive ngModel
• Obtenir la représentation JavaScript d'un formulaire à l'aide de la directive ngForm
• Désactiver le bouton Soumettre d'un formulaire à l'aide du drapeau $invalid du formulaire
• Obtenir la représentation JavaScript d'un formulaire dans la classe TypeScript
• Ajouter des cases à cocher, des boutons radio et une liste de sélection à votre formulaire basé sur un modèle
• Créer des sous-sections dans le formulaire à l'aide de la directive NgModelGroup
• Étapes pour implémenter un formulaire réactif dans Angular
• Création rapide d'un formulaire Bootstrap pour notre formulaire réactif à l'aide d'Emmet
• Création d'un formulaire réactif dans la classe TypeScript et connexion à la template
• Ajout de validations de formulaire à un formulaire réactif
• Ajout ou suppression dynamique de FormControl(s) ou FormGroup(s) à l'aide de FormArray(s)
• Ajout de validations personnalisées synchrones à votre formulaire réactif
• Ajout de validations personnalisées asynchrones à votre formulaire réactif
• Réinitialisation de la valeur d'un formulaire

Leçon 09 - Utilisation de bibliothèques tierces

• Introduction à la section
• Création d'un projet Angular CLI avec SCSS comme style de base
• Introduction de Material Design Bootstrap dans votre projet Angular CLI
• Ajout d'une barre de navigation dans votre en-tête
• Ajout de boutons Material Design
• Ajout de cartes
• Utilisation des menus déroulants et des champs de formulaire Material Design
• Introduction d'Angular Material dans votre projet Angular CLI au-dessus de MDB
• Ajout de boutons radio, de boutons coulissants, de curseurs, de barres de progression et de boutons rotatifs Introduction à Firebase
• Création d'une application à l'aide de la console Firebase
• Configuration de votre projet Angular CLI pour prendre en charge Firebase
• Interaction avec la base de données en temps réel Firebase à l'aide des méthodes AngularFireList
• Ajout et lecture de données à partir de la base de données en temps réel dans Firebase
• Mise à jour et suppression de données à partir de la base de données en temps réel dans Firebase

Créer une application web de liste de produits dans Angular

• Implémenter la fonctionnalité CRUD dans Angular et créer une application Angular avec les fonctionnalités suivantes :
• Formulaire produit, liste de produits, affichage, suppression et mise à jour des produits de la liste.