Angular - Développement Web - eLearning

Angular - Développement Web - eLearning

Cette formation de certification 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 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 :

• Le cours et le matériel sont en anglais
• Accès d'un an à la plateforme d'apprentissage en ligne à rythme libre 24 heures sur 24, 7 jours sur 7
• Débutant - intermédiaire pour les développeurs web en herbe
• 20 heures d'apprentissage en ligne à votre rythme
• 50 heures de temps d'étude recommandées
• 2 projets de fin de cours
• Flexibilité dans le choix des cours
• Pas d'examen pour le cours mais l'étudiant recevra une certification de fin de formation
• Bonus de classe virtuelle en direct lorsqu'elle est disponible

Bonus : 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 horaires 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.

Prérequis :

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

Public cible :

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

Principaux acquis de la formation

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

• Comprendre la conception des applications monopages et la manière dont 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, filtres et portées Angular
• Construire des formulaires Angular
• Écrire des directives Angular
• Tester unitairement et de bout en bout vos applications Angular
• Développer une interface utilisateur interactive et dynamique à l'aide de Bootstrap

Programme du cours :

Programme d'autoformation :

Leçon 01 - Applications monopages

• Présentation du cours
• 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

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

Leçon 03 - Décorateurs

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

• Fournisseurs, bootstrap et composants d'entrée
• Mécanisme de bootstrap d'application Angular

Leçon 04 - Décorateur de composant

• Introduction au module
• Composants Angular et décorateur @Component
• Création d'un composant Angular à l'aide de l'interface de ligne de commande Angular et sur StackBlitz
• Métadonnées du décorateur de composant
• Encapsulation de vue - Émulé, ShadowDom, Aucun
• 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
• Afficher les requêtes - Afficher l'enfant, Afficher les enfants, Contenu enfant, Contenu enfants
• Modifier le 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
• Récupération du lien utilisateur dans un composant distinct
• Implémentation des routes enfant
• 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 GET à 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
• Sujet de comportement et partage de données à l'aide de sujets de comportement

Leçon 07 - Directives Approfondissement

• Introduction à la section
• Introduction aux directives
• Directives structurelles intégrées
• Directives d'attributs intégrées
• Création de directives d'attributs 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
• Revisite des décorateurs
• Création de décorateurs personnalisés dans Angular
• Création d'un hook de cycle de vie personnalisé Décorateur de journalisation de classe
• Création d'un décorateur de propriété personnalisé dans Angular

Leçon 08 - Formulaires dans Angular

• Introduction à la section
• Types de formulaires Stratégies de création dans Angular
• Création rapide de longs formulaires Bootstrap à l'aide de VS Code et d'Emmet
• Ajout de FormControl(s) à un formulaire piloté par modèle à l'aide de la directive ngModel
• Obtention de la représentation de l'objet JavaScript d'un formulaire à l'aide de la directive ngForm
• Désactivation du bouton d'envoi d'un formulaire à l'aide de l'indicateur $invalid du formulaire
• Obtenir la représentation de l'objet JavaScript d'un formulaire dans la classe TypeScript
• Ajouter une case à cocher, des boutons radio et une liste de sélection à votre formulaire piloté par 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éer rapidement un formulaire Bootstrap pour notre formulaire réactif à l'aide d'Emmet
• Créer un formulaire réactif dans la classe TypeScript et le connecter au modèle
• Ajouter des validations de formulaire à un formulaire réactif
• Ajouter ou supprimer dynamiquement des FormControl ou des FormGroup à l'aide de FormArray
• Ajouter des validations personnalisées synchrones à votre formulaire réactif
• Ajouter des validations personnalisées asynchrones à votre formulaire réactif
• Réinitialiser la valeur d'un formulaire

Leçon 09 - Utilisation de 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 dans l'en-tête
• Ajouter des boutons Material Design
• Ajouter des cartes
• Utiliser les menus déroulants et les champs de formulaire Material Design
• Introduire Angular Material dans votre projet Angular CLI en haut de MDB
• Ajouter des boutons radio, des boutons à bascule, des curseurs, des barres de progression et des spinners Introduction à Firebase
• Créer une application à l'aide de la console Firebase
• Configurer votre projet Angular CLI pour qu'il prenne en charge Firebase
• Interagir avec la base de données en temps réel Firebase en utilisant les méthodes de AngularFireList
• Ajouter et lire des données de la base de données en temps réel Firebase
• Mettre à jour et supprimer des données de la base de données en temps réel Firebase

Programme de cours virtuel en direct :

Leçon 01 - Fonctionnalités de TypeScript

• Introduction
• Introduction à TypeScript
• Introduction aux types de données
• Let vs Const
• Introduction aux fonctions
• Introduction aux paramètres
• Introduction aux classes

Leçon 02 - Fonctionnalités d'Angular

• Histoire d'Angular
• Comprendre Angular
• Configurer l'application Angular
• Blocs de construction Angular
• Observables
• Introduction aux formulaires réactifs
• Introduction à la communication avec le serveur

Leçon 03 - Ngmodule

• Modules Angular
• Module de routage
• Module de fonctionnalités
• Module de partage
• Organiser systématiquement les composants de l'application

Leçon 04 - Ng Tests unitaires et observables

• Introduction aux tests automatisés
• Types de tests automatisés
• Introduction aux outils de test
• Introduction au banc d'essai
• Gestion des dépendances entre les composants
• RxJS - Observables

Leçon 05 - Bootstrap

• Objectifs d'apprentissage
• Expliquer le Responsive Web Design (RWD)
• Comprendre le système de grille Bootstrap
• Apprendre les composants Bootstrap
• Quiz
• Principaux points à retenir

Leçon 06 - Liaison et événements

• Objectifs d'apprentissage
• Qu'est-ce que le modèle de gabarit ?
• Comment fonctionne la liaison angulaire et le type de liaisons
• Comprendre les directives intégrées d'Angular
• Notions de base sur Webpack et SystemJS
• Quiz
• Points clés

Leçon 07 - Injection de dépendances et service

• Objectifs d'apprentissage
• Comprendre l'injection de dépendances (DI)
• Comprendre l'interface de programmation d'applications DI
• Expliquer un service
• Décrire comment créer un service
• Expliquer l'injection d'un service
• Quiz
• Points clés

Leçon 08 - Directives

• Objectifs d'apprentissage
• Directives Angular
• Types de directives Angular
• Directives Angular intégrées
• Utilisation de directives personnalisées
• Quiz
• Principaux points à retenir

Leçon 09 - Pipes

• Objectifs d'apprentissage
• Qu'est-ce qu'une pipe dans Angular ?
• Comprendre le fonctionnement des pipes intégrées dans Angular
• Comprendre les pipes personnalisées Angular
• Quiz
• Principaux points à retenir

Leçon 10 - Formulaires

• Objectifs d'apprentissage
• Avantages des formulaires Angular
• Approche basée sur les modèles
• Approche basée sur les modèles
• Validation des formulaires Angular
• Quiz
• Principaux points à retenir

Leçon 11 - Routage

• Objectifs d'apprentissage
• Comprendre comment Angular aide à réaliser des SPA à l'aide du routage
• Définir les avantages de @NgModule
• Identifier les multiples façons d'accéder aux routes
• Comprendre le processus du cycle de routage
• Quiz
• Principaux points à retenir

Leçon 12 - HTTP, Promises et Observables

• Objectifs d'apprentissage
• Comprendre le fonctionnement de RxJS
• Comprendre l'interaction d'Angular avec HTTP GET
• Décrire le processus d'envoi de données au serveur
• Expliquer la différence entre les promesses et les observables
• Quiz
• Principaux points à retenir

Projet de fin de cours :

• 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 de produit, liste de produits, affichage, suppression et mise à jour des produits de la liste.