LUMIFY WORK Programmation angulaire 12

POURQUOI ÉTUDIER CE COURS

Ce cours complet de programmation Angular 12 est une combinaison d'apprentissage théorique et de laboratoires pratiques qui comprend une introduction à Angular, suivie de TypeScript, des composants, des directives, des services, du client HTTP, des tests et du débogage.
Le cours regorge d’informations utiles et exploitables que vous pouvez appliquer immédiatement à votre travail. Apprenez les principes fondamentaux du développement de base d'Angular 12, tels que les applications de navigateur à page unique, les applications réactives websites Web et applications mobiles hybrides.
Note: Nous pouvons également dispenser des formations sur d'autres versions d'Angular. Veuillez nous contacter pour faire une demande ou enregistrer votre intérêt.

CE QUE VOUS APPRENDRE
Après avoir réussi ce cours, vous serez en mesure de:

• Développer des applications angulaires d'une seule page à l'aide de Typescript
• Mettre en place un environnement de développement angulaire complet
• Créer des composants, des directives, des services, des canaux, des formulaires et des validateurs personnalisés
• Gérer les tâches avancées de récupération de données réseau à l'aide d'Observables Consommer les données de REST web services utilisant le client Angular HT TP Gérer les connexions de données push à l'aide du WebProtocole de sockets
• Travailler avec des tuyaux angulaires pour formater les données
• Utiliser les fonctionnalités avancées du routeur de composants angulaires
• Testez et déboguez les applications angulaires à l'aide des outils intégrés.

SUJETS DE COURS

Chapitre 1. Présentation d'Angular

• Qu'est-ce qu'Angular ?
• Caractéristiques centrales des cas d'utilisation appropriés du framework angulaire
• Éléments de base d'une application angulaire Architecture de base d'une application angulaire Installation et utilisation d'Angular
• Anatomie d'une application angulaire exécutant l'application
• Création et déploiement de l'application Angular pour les applications mobiles natives
• Résumé

Chapitre 2. Introduction à TypeScript

• Langages de programmation à utiliser avec la syntaxe Angular TypeScript
• Éditeurs de programmation
• Le système de types – Définition des variables
• Le système de types – Définition de tableaux
• Types primitifs de base
• Tapez les fonctions
• Inférence de type
• Définir des classes
• Méthodes de classe
• Contrôle de la visibilité
• Constructeurs de classe
• Constructeurs de classe – Champs non initialisés de forme alternative
• Interfaces
• Travailler avec les modules ES6
• var vs laisser
• Fonctions de flèche
• Chaînes de modèle de syntaxe compacte de fonction de flèche
• Les génériques en classe
• Génériques en fonction
• Résumé

Chapitre 3. Composants

• Qu'est-ce qu'un composant ?
• Un example composant
• Création d'un composant à l'aide de la CLI angulaire
• La classe de composants
• Le décorateur @Component
• Enregistrement d'un composant dans son modèle de composant de module
• Example: Modèle HelloComponent
• Example : La classe HelloComponent utilisant un composant
• Exécutez l'application
• Hiérarchie des composants
• Le composant racine de l'application
• Le bootstrap File
• Hooks de cycle de vie des composants Example Lifecycle Hooks
• Styles CSS
• Résumé

Chapitre 4. Modèles de composants

• Modèles
• Emplacement du modèle
• La syntaxe de la moustache {{ }}
• Définition des propriétés des éléments DOM
• Paramètre du corps du texte de l'élément
• Liaison d'événement
• Gestionnaire d'événements d'expression
• Empêcher la gestion par défaut
• Directives d'attribut
• Appliquer des styles en modifiant les classes CSS
• Exampfichier : ngClass
• Appliquer des styles directement
• Directives structurelles
• Exécuter le modèle de manière conditionnelle
• Example: ngIf
• Boucler avec ngFor
• ngPour les variables locales
• Manipulation de l'Ex de Collectionample – Supprimer un élément
• Suivi des articles avec ngFor échange d'éléments avec ngSwitch regroupement d'éléments
• Résumé des variables de référence du modèle

Chapitre 5. Communication inter-composants

• Bases de la communication
• L'architecture des flux de données
• Préparer l'enfant à recevoir des données
• Envoyer des données du parent
• En savoir plus sur la définition des propriétés
• Déclenchement d'un événement à partir d'un composant
• @Output()Example – Composant enfant @Output() Example – Composant parent
• Reliure bidirectionnelle complète
• Configuration de la liaison de données bidirectionnelle dans Parent
• Résumé

Chapitre 6. Formulaires basés sur des modèles

• Formulaires basés sur des modèles
• Module d'importation de formulaires
• Approche de base
• Configuration d'un formulaire
• Obtenir l'entrée de l'utilisateur
• Omettre l'attribut ngForm
• Initialiser le formulaire
• Liaison de données bidirectionnelle
• Validation du formulaire
• Validateurs angulaires
• Affichage de l'état de validation à l'aide de classes et de types d'entrée supplémentaires
• Cases à cocher
• Sélectionnez les champs (listes déroulantes)
• Options de rendu pour les champs de date de sélection (liste déroulante)
• Boutons radio
• Résumé

Chapitre 7. Formes réactives

• Formulaires réactifs terminésview
• Les éléments de base
• Importer le module ReactiveForms
• Construire un formulaire
• Concevoir le modèle
• Obtenir des valeurs d'entrée
• Initialisation des champs de saisie
• Définition des valeurs du formulaire
• S'abonner aux modifications d'entrée
• Validation
• Validateurs intégrés
• Affichage de l'erreur de validation
• Validateur personnalisé
• Utiliser un validateur personnalisé
• Fourniture de la configuration au validateur personnalisé
• FormArray – Ajouter dynamiquement des entrées
• FormArray – La classe de composants
• FormArray – Le modèle
• FormArray – Valeurs
• Sous-Groupes de formulaires – Classe de composants
• Sous-groupes de formulaires – Modèle HTML
• Pourquoi utiliser des sous-groupes de formulaires
• Résumé

Chapitre 8. Services et injection de dépendances

• Qu'est-ce qu'un service ?
• Création d'un service de base
• La classe de service
• Qu’est-ce que l’injection de dépendances ?
• Injection d'une instance de service
• Injecteurs
• Hiérarchie des injecteurs
• Enregistrement d'un service avec l'injecteur racine
• Enregistrement d'un service avec l'injecteur d'un composant
• Enregistrer un service avec un injecteur de module de fonctionnalités
• Où enregistrer un service ?
• Injection de dépendances dans d'autres artefacts fournissant une injection de dépendances d'implémentation alternative et @Host
• Injection de dépendances et @Optional
• Résumé

Chapitre 9. Client HTTP

• Le client HT TP angulaire
• Utilisation du client HT TP – Terminéview
• Importation de HttpClientModule
• Service utilisant HttpClient
• Faire une requête GET
• À quoi sert un objet observable ?
• Utiliser le service dans un composant
• Gestion des erreurs du composant client PeopleService
• Personnalisation de l'objet d'erreur
• Faire une requête POST
• Faire une requête PUT
• Faire une demande DELETE

Chapitre 10. Canaux et formatage des données

• Que sont les tuyaux ?
• Tuyaux intégrés
• Utilisation de tuyaux dans un modèle HTML Chaînage de tuyaux
• Tubes internationalisés (i18n) Chargement des données locales
• La date Pipe
• Le nombre Pipe
• Tuyau de monnaie
• Créer un tuyau personnalisé
• Tuyau personnalisé Example
• Utiliser des canaux personnalisés
• Utiliser un tuyau avec ngFor
• Un tuyau filtrant
• Catégorie de pipe : pure et impure
• Résumé
• Tuyau pur Example
• Tuyau impur Example
• Résumé

Chapitre 11. Introduction aux applications à page unique

• Qu'est-ce qu'une application monopage (SPA) traditionnelle Web Application
• Flux de travail du SPA
• Application d'une seule page Advantages API d'historique HTML5
• Défis du SPA
• Implémentation de SPA à l'aide d'un résumé angulaire

Chapitre 12. Le routeur de composants angulaires

• Le routeur de composants
• View Navigation
• L'API du routeur angulaire
• Création d'une application compatible avec un routeur
• Hébergement des composants routés
• Navigation à l'aide de liens et de boutons
• Navigation programmatique
• Passage des paramètres d'itinéraire
• Navigation avec les paramètres d'itinéraire
• Obtention des valeurs des paramètres d'itinéraire
• Récupération du paramètre d'itinéraire de manière synchrone
• Récupération d'un paramètre de route de manière asynchrone
• Paramètres de la requête
• Fournir des paramètres de requête
• Récupération des paramètres de requête de manière asynchrone
• Problèmes avec le manuel URL entrée et mise en favoris
• Résumé

Chapitre 13. Client HTTP avancé

• Options de demande
• Renvoyer un objet HttpResponse
• Définition des en-têtes de demande
• Créer de nouveaux observables
• Créer un observable simple
• La méthode du constructeur observable Opérateurs observables
• Les opérateurs de carte et de filtre
• L'opérateur flatMap()
• L'opérateur tap()
• Le combinateur zip()
• Mise en cache de la réponse HT TP
• Passer des appels HT TP séquentiels
• Passer des appels parallèles
• Personnalisation de l'objet d'erreur avec catchError()
• Erreur dans le pipeline
• Récupération d'erreur
• Résumé

Chapitre 14. Modules angulaires

• Pourquoi des modules angulaires ?
• Anatomie d'une classe de module
• Propriétés @NgModule
• Modules de fonctionnalités
• ExampStructure du module
• Créer un module de domaine
• Créer une paire de modules routés/routage
• Créer un module de services
• Création de modules communs

Chapitre 15. Routage avancé

• Module de fonctionnalités activé pour le routage
• Utilisation du module de fonctionnalités
• Chargement paresseux du module de fonctionnalités
• Création de liens pour les composants du module de fonctionnalités
• En savoir plus sur le chargement paresseux
• Modules de préchargement
• Route par défaut
• Chemin d'itinéraire générique
• rediriger vers
• Itinéraires enfants
• Définir des itinéraires enfants
• pour les itinéraires enfants
• Liens pour les itinéraires enfants
• Gardes de navigation
• Création d'implémentations de garde
• Utiliser des gardes dans un itinéraire
• Résumé

Chapitre 16. Tests unitaires des applications angulaires

• Tests unitaires d'artefacts angulaires
• Outils de test
• Étapes de test typiques
• Résultats des tests
• Suites de tests Jasmine
• Spécifications de Jasmine (tests unitaires)
• Attentes (affirmations)
• Correspondances
• Exampleçons d'utilisation des Matchers
• Utilisation de la propriété not
• Configuration et démontage dans les suites de tests unitaires
• Exampfichier des fonctions beforeEach et afterEach
• Module de test angulaire
• Example module de test angulaire
• Tester un service
• Injection d'une instance de service
• Tester une méthode synchrone
• Tester une méthode asynchrone
• Utilisation du client HT TP simulé
• Fournir une réponse standardisée
• Tester un composant
• Module de test des composants
• Création d'une instance de composant
• La classe ComponentFixture
• Tests des composants de base
• La classe DebugElement
• Simulation de l'interaction utilisateur
• Résumé

Chapitre 17. Débogage

• Surview du débogage angulaire
• Viewutiliser du code TypeScript dans le débogueur
• Utilisation du mot-clé du débogueur
• Journalisation du débogage
• Qu’est-ce qu’Angular DevTools ?
• Utiliser les outils de développement angulaires
• Angular DevTools – Structure des composants
• Angular DevTools – Exécution de la détection des changements
• Détecter les erreurs de syntaxe
• Résumé

Exercices de laboratoire

• Laboratoire 1. Introduction à Angular
• Laboratoire 2. Introduction à TypeScript
• Laboratoire 3. Introduction aux composants
• Laboratoire 4. Modèle de composant
• Lab 5. Créer un composant de galerie de photos
• Atelier 6. Formulaire basé sur un modèle
• Lab 7. Créer un formulaire de modification
• Laboratoire 8. Forme réactive
• Laboratoire 9. Développer un service
• Lab 10. Développer un client HT TP
• Laboratoire 11. Utiliser des tuyaux
• Lab 12. Application de base à page unique utilisant un routeur Lab 13. Créer une application à page unique (SPA)
• Laboratoire 14. Client HT TP avancé
• Atelier 15. Utilisation d'Angular Bootstrap
• Laboratoire 16. Chargement paresseux du module
• Laboratoire 17. Routage avancé
• Laboratoire 18. Tests unitaires
• Laboratoire 19. Débogage d'applications angulaires

À QUI S'ADRESSE LE COURS ?
Ce cours s'adresse à toute personne ayant besoin d'apprendre les bases du développement Angular 12 et de les appliquer à la création. web candidatures immédiatement. Nous pouvons également proposer et personnaliser cette formation pour des groupes plus importants, ce qui permettra à votre organisation d'économiser du temps, de l'argent et des ressources.

CONDITIONS PRÉALABLES
Web une expérience de développement utilisant HTML, CSS et JavaScript est requise pour tirer le meilleur parti de ce cours Angular. La connaissance du DOM du navigateur est également utile. Une expérience préalable d'Angular, avec AngularJS ou toute version d'Angular, n'est pas requise.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Documents / Ressources

LUMIFY WORK Programmation angulaire 12 [pdf] Guide de l'utilisateur Programmation angulaire 12, Angulaire, Programmation 12, Programmation

Références

• Manuel d'utilisation