Développement Web et Applications avec Angular

Maîtrisez la création d'applications et de sites avec partage de données

Développement Web4.5(68)14h 39min62 leçons8 sections

Ce que vous apprendrez

  • Comprendre les bases d'Angular et installer les outils
  • Créer un projet Angular et organiser ses fichiers
  • Utiliser TypeScript et les types de données
  • Créer des Components et naviguer entre eux
  • Réaliser les projets MyBlog et Calculator
  • Travailler avec les Data Models
  • Utiliser Angular Material
  • Construire le projet SportsStore et son panier d'achat
  • Relier le projet au backend et ajouter l'authentification
  • Construire le panneau Admin

À propos du cours

Ce cours enseigne le développement de sites web et d'applications avec Angular et TypeScript depuis le début. Vous commencez par l'introduction du cours, ses prérequis et ce qu'est Angular, puis l'installation des outils et des extensions, la création de votre premier projet et la compréhension de l'organisation des fichiers. Ensuite, vous découvrez TypeScript, les types de données et la résolution des problèmes du compilateur, puis le Component, la création d'un Header, d'un Footer, d'un Contact et d'un Article, et vous réalisez un projet MyBlog et un projet Calculator. Vous travaillez alors avec les Data Models et la bibliothèque Angular Material, comme Toolbar, Table et Form. Dans les dernières étapes, vous construisez un projet SportsStore complet, avec l'affichage des produits et des catégories, le panier d'achat, le Routing et le Checkout, et sa liaison avec le backend grâce à Json-Server, ainsi que l'authentification et le panneau Admin. Le cours convient à ceux qui veulent maîtriser la création d'un site web et d'une application et le partage de données entre les deux, et il est préférable de connaître les bases du web avant de commencer. Vous serez ensuite capable de construire une application web complète avec Angular. L'enseignement est progressif et s'appuie sur des projets pratiques, chaque étape s'appuyant sur la précédente jusqu'à l'achèvement du projet.

Résultats attendus

  • Créer des applications web avancées avec Angular.
  • Compréhension approfondie des composants et de leurs interactions.
  • Maîtriser TypeScript et l'utiliser dans des projets Angular.
  • Développer des applications pratiques évolutives.

Avis des apprenants

Ces avis proviennent d'apprenants qui ont acheté le contenu et en ont complété au moins 50% — il n'y a aucun avis de personnes n'ayant pas suivi le contenu.
4.5
★★★★★
68 avis
5★
36
4★
29
3★
3
2★
0
1★
0
  • ★★★★★Zaid M.·منذ 5 شهرشاهد 100٪

    الدورة ممتازة جداد و مفيدة

تم عرض كل التقييمات (1)

Contenu du cours

1

Introduction à Angular

7 leçons
  1. Introduction au coursPrésente Angular comme un framework spécialisé dans la création d'interfaces utilisateur, utilisable aussi pour les applications mobiles, et explique pourquoi la demande est forte.8:03
  2. Exigences du coursPrésente les prérequis du cours Angular : bases de HTML, CSS et Bootstrap, JavaScript et concepts de programmation, car Angular repose sur TypeScript construit sur JavaScript, plus Node.js pour le backend.2:27
  3. Qu'est-ce qu'Angular ?Définit Angular comme un framework de création d'interfaces, explique la différence entre framework et bibliothèque, puis retrace son histoire d'AngularJS par Google jusqu'à Angular moderne et leurs différences.11:11
  4. Installation des outilsExplique l'installation des outils Angular : Visual Studio Code comme éditeur, Node.js qui inclut le gestionnaire de paquets npm, puis Angular CLI avec npm install -g, et les commandes ng comme créer et servir un projet.8:27
  5. Installation des pluginsInstalle Git comme outil de gestion de versions, puis présente des extensions de Visual Studio Code utiles pour développer avec Angular, dont une pour les commandes et une pour les icônes de fichiers.8:18
  6. Créer votre premier projetCrée le premier projet, l'enregistre dans un dossier sur l'ordinateur et l'ouvre dans l'éditeur, puis supprime les fichiers inutiles en gardant le fichier index pour commencer le travail.8:04
  7. Expliquer l'organisation des fichiers dans le projetExplique les fichiers et dossiers d'un projet Angular et le rôle de chacun, comme editorconfig, le dossier src, le module principal, le fichier d'entrée et les réglages des scripts.26:13
2

Un Aperçu de TypeScript

4 leçons
  1. Introduction à TypeScriptPrésente TypeScript comme un langage construit sur JavaScript qui ajoute des types statiques pour corriger la faiblesse du typage dynamique, compilé en JavaScript pour les navigateurs, et langage principal d'Angular.5:32
  2. Comprendre les bases et expliquer la traduction des fichiers TypeScriptExplique l'installation de TypeScript et la création de tsconfig.json, comment un fichier ts est compilé en JavaScript avec tsc, comment TypeScript refuse l'affectation d'une valeur de type différent, puis l'exécution du résultat avec Node.12:24
  3. Résoudre les problèmes du compilateurRésout le problème d'exécution des commandes tsc dans Visual Studio Code en modifiant la politique d'exécution PowerShell, puis configure tsconfig pour compiler ts en js automatiquement et active le mode watch.7:36
  4. Organiser les types de donnéesExplique les types de données TypeScript comme string, number et boolean, l'arbre des types qui commence à unknown, l'ajout de null, et comment un type donne accès à ses propriétés et méthodes tout en empêchant l'affectation d'un autre type.10:52
3

Projet MyBlog

8 leçons
  1. Qu'est-ce qu'un composant ?Explique le Component comme base d'une application Angular, avec un composant racine contenant des composants enfants comme un header, et ses trois parties : le template HTML, le fichier de styles et la classe TypeScript avec son decorator et son selector.8:55
  2. Créer et configurer le module avec un composant d'en-têteExplique qu'Angular est une Single Page Application, installe Bootstrap dans le projet, puis crée le Core Module avec un Header Component, l'enregistre dans le module et le relie au routage.20:10
  3. Créer et configurer le composant de pied de pageCrée un Footer Component dans un Shared Module pour le réutiliser à plusieurs endroits, avec ng generate, puis écrit son template, importe le module dans le Core Module et l'affiche dans la page.15:14
  4. Créer et configurer le composant de contactCrée le Contact Component et son module avec ng generate, le relie au routage pour naviguer entre les pages, et construit son template avec une carte contenant une image, du texte et un lien e-mail de contact.9:53
  5. Naviguer vers le composant de contactRelie la navigation au composant Contact via le Routing, avec RouterLink dans le composant d'en-tête et l'import de RouterModule dans le module principal pour afficher la page au clic.8:30
  6. Naviguer vers le composant d'articleCrée un module Articles avec son propre fichier de Routing, ajoute un lien dans la barre de navigation avec RouterLink et configure un chemin vide et un chemin de repli pour les pages inexistantes.12:53
  7. Ajouter du contenu au modèle d'articleConstruit le template de la page Articles avec des div, des classes list-group et des titres pour afficher les articles, puis teste la page via la route définie précédemment.6:52
  8. Lien MyBlog
4

Gestion des Composants Principaux

5 leçons
  1. Créer le composant calculatriceCrée un projet Calculator avec Angular, ajoute le Component, la configuration Bootstrap et index.html, déclare le composant dans le Module, puis lance le projet pour afficher le template du composant.11:34
  2. Travailler avec le modèle de calculatriceConstruit le template du Calculator Component avec HTML et Bootstrap : un affichage d'entrée et de résultat, des boutons de chiffres et d'opérateurs, et lie l'événement click à une fonction qui reçoit le chiffre.28:01
  3. Ajouter de la logique et des fonctions au composant calculatriceAjoute la logique de la calculatrice au Calculator Component : méthodes de gestion des chiffres et des opérateurs, vérification de la dernière saisie pour éviter les opérateurs répétés, et mise à jour du résultat à chaque appui.25:36
  4. Ajouter le deuxième projet au modèle d'articleAjoute le projet calculatrice comme deuxième projet à la page Article de l'application de blog, avec des cartes qui le décrivent, et mentionne son lien via le routage et la possibilité d'ajouter le lien des sources.9:40
  5. Lien Calculatrice
5

Travailler avec le modèle de données - Angular Material

10 leçons
  1. Introduction (Travailler avec Data Model _ Angular Material)Donne un aperçu d'une application To Do construite avec Angular et Angular Material, qui ajoute une tâche, la marque comme terminée, et affiche le nombre de tâches non terminées et la liste de celles accomplies.5:21
  2. Configurer les Data ModelsConstruit le Data Model d'une application To Do en créant une classe pour une tâche avec description et état d'achèvement, et une autre pour la liste de tâches avec un getter en lecture seule, en expliquant les propriétés private.19:16
  3. Manipuler et utiliser les Data ModelsUtilise les Data Models dans l'application To Do : place les modèles dans un dossier dédié, définit un objet utilisateur et un compteur, ajoute des tâches à la liste, puis utilise filter pour afficher les tâches non terminées et leur nombre.14:56
  4. Installer et configurer Angular MaterialInstalle Angular Material dans le projet avec ng add et un thème par défaut, importe ses modules dans un module dédié, puis présente quelques composants comme les boutons, cartes, badges et champs de formulaire.13:44
  5. Utiliser la barre d'outils MaterialUtilise le Material Toolbar pour construire une barre supérieure affichant le nom d'utilisateur, une icône et un badge, en important les modules Angular Material nécessaires et en disposant les éléments.8:54
  6. Afficher les données à travers la table MaterialAffiche la liste des tâches dans un Material Table en définissant les colonnes, les lignes, les en-têtes et la source de données qui remplit le tableau.17:24
  7. Contrôler avec la case à cocher MaterialGère les tâches avec un Material Checkbox lié via ngModel, modifiant l'état de la tâche, la couleur et le compteur à la case cochée, et masque les tâches terminées avec un filtre.6:43
  8. Ajouter de nouvelles données via le formulaire MaterialAjoute de nouvelles données via un Material Form, permettant de saisir une nouvelle tâche dans un champ et de l'ajouter par un bouton, la valeur étant transmise au composant par un événement.13:31
  9. Contrôler l'affichage des données avec Material Slide ToggleAjoute un Material Slide Toggle pour basculer entre l'affichage de toutes les tâches ou des seules tâches non terminées, via une variable modifiée au clic qui filtre la liste affichée.6:53
  10. Lien ToDo
6

Phase Un du Projet Final SportsStore

10 leçons
  1. Introduction à la phase unPrésente la première phase d'un projet e-commerce nommé Sports Store avec Angular : la structure de base et l'affichage des produits par catégorie et par pages, avec des données issues d'un serveur backend.5:34
  2. Création et configuration du projet finalCrée le projet final sportsstore avec ng new, installe Font Awesome, json-server et jsonwebtoken, ajoute les fichiers de style dans angular.json et prépare le projet pour les phases suivantes.10:31
  3. Configuration du back end du projet via Json-ServerPrépare le backend du projet avec json-server : écrit un fichier de données pour les produits et commandes, ajoute un middleware d'authentification par JSON Web Token et gère les requêtes GET et POST pour la connexion.20:24
  4. Organisation des fichiers du projet et exécution du serveur back endOrganise les fichiers du projet en créant des dossiers pour le Model, le Store et l'Admin, lance le backend avec json-server sur un port donné, teste la requête des produits et catégories, et vérifie que les deux serveurs fonctionnent ensemble.9:16
  5. Création et configuration de tous les Data ModelsCrée les Data Models représentant la forme des données, puis une source de données statique et un dépôt qui renvoient produits et catégories de façon dynamique plutôt que manuellement.35:20
  6. Création et configuration du Module ModelCrée un Model Module regroupant les modèles de données et les dépôts, en déclarant leurs Providers dans un NgModule pour les utiliser partout dans l'application.5:05
  7. Création et configuration du Store ComponentCrée le Store Component et son template, lui transmet des paramètres comme produits et catégories, puis construit un Store Module important les modules Angular et les modèles pour afficher la boutique.14:32
  8. Affichage de tous les ProductsAffiche tous les produits de la boutique en répétant un seul élément avec ngFor, avec le nom et le prix de chaque produit dans une devise donnée, sans dupliquer le code pour chacun.9:10
  9. Contrôle de l'affichage des produits via les CategoriesContrôle l'affichage des produits par catégorie, avec des boutons de catégories qui changent la sélection pour n'afficher que les produits correspondants, via une méthode recevant un nombre.24:29
  10. Reconfiguration du code via Custom DirectiveCrée une Custom Directive pour réutiliser le code, définit son Context et son Selector, l'enregistre dans le module de la boutique, puis l'utilise pour répéter des éléments et construire les numéros de page.10:59
7

Phase Deux du Projet Final SportsStore

8 leçons
  1. Introduction à la phase deuxPrésente la deuxième phase de Sports Store : le panier Cart, l'ajout d'un produit, le changement de quantité et le calcul du total, la suppression d'articles, puis le passage à la commande Order.3:59
  2. Créer et configurer le modèle de panierCrée le Cart Model qui décrit les données du panier : lignes de commande, ajout d'un produit avec augmentation de sa quantité s'il existe déjà, calcul du nombre d'articles et du prix total, puis déclaration dans le Module.22:47
  3. Créer et configurer le résumé du panierCrée le Cart Summary Component qui affiche le nombre d'articles et le total du panier avec des conditions ngIf, et ajoute un bouton d'ajout au panier dont l'événement click appelle une méthode qui ajoute le produit au Cart.15:52
  4. Ajout et utilisation de la transition de routageCrée un dossier, un composant et un module pour le panier, puis configure le Routing afin de naviguer vers les pages du panier et du paiement, en les reliant au Router de l'application.15:26
  5. Création et configuration d'une fonctionnalité Store First GuardCrée un Route Guard qui contrôle la navigation entre les pages, en la bloquant ou l'autorisant selon des conditions, l'enregistre dans le module de routage et le teste avec la page du panier.12:19
  6. Ajout des produits sélectionnés pour l'achat via les détails du panierConstruit la page Cart Detail affichant les produits choisis, avec un message si le panier est vide via ngIf, et calcule le total de chaque ligne et du panier lorsque les quantités changent.25:42
  7. Finalisation du processus d'achat via le paiementCommence le Checkout en créant le modèle Order et les fonctions du dépôt pour récupérer et enregistrer les commandes, et conçoit un formulaire pour les données client comme le nom et l'adresse.36:29
  8. Liaison du projet au back-end et affichage des donnéesRelie le projet au backend via une API RESTful, remplace les données statiques par une source REST envoyant des requêtes HTTP vers un protocole et un port donnés, et affiche les données du serveur.15:06
8

La dernière étape du projet SportsStore

10 leçons
  1. Introduction à la phase finalePrésente la phase finale du projet, l'espace admin : page de connexion, consultation des produits et des commandes, ajout, modification et suppression d'un produit, et nombre d'éléments par page.8:41
  2. Création, configuration et liaison des composants Auth et AdminCrée les composants Auth et Admin dans Angular : un formulaire de connexion avec ngForm, nom d'utilisateur et mot de passe, un composant Admin, un module admin, puis les relie au routage.25:34
  3. Configuration et application de l'authentification lors de la connexionMet en place l'authentification de connexion admin dans Angular : un service Auth qui envoie une requête HTTP POST et vérifie la réussite de la réponse, relié au Router et au composant de connexion, puis testé dans les outils du navigateur.22:31
  4. Ajout de toutes les fonctions pour gérer les demandes et les produits pour l'AdminAjoute des fonctions permettant à l'administrateur de gérer produits et commandes via une source de données REST avec HttpHeaders, ainsi que des méthodes de sauvegarde et de mise à jour dans les dépôts.24:24
  5. Première étape pour configurer les éléments de l'AdminCommence la construction de l'interface d'administration avec Angular Material, en créant le composant de tableau des produits, des boutons et un menu, puis des pages provisoires pour produits et commandes.35:57
  6. Deuxième étape : Affichage des produits pour l'AdminAffiche les produits dans un tableau de la page d'administration via le composant Product Table, avec des boutons de modification et suppression, et supprime le produit des données du serveur.28:01
  7. Modification et ajout de nouveaux produits pour l'AdminConstruit un formulaire permettant à l'administrateur de modifier des produits et d'en ajouter, distingue le mode édition du mode création selon la route et adapte le texte et le comportement du bouton.24:21
  8. Troisième étape : Affichage de toutes les demandes d'achat pour l'AdminConstruit le composant Order Table pour afficher toutes les commandes dans la page d'administration avec un Material Table, avec des lignes d'en-tête, une ligne sans données et les informations du client.30:19
  9. Étape finale du projetAjoute la pagination au tableau d'administration avec Material Paginator et des options de taille de page, puis teste l'envoi d'une commande client et vérifie qu'elle arrive au serveur.13:17
  10. Lien du projet final

Formateur

Ing. Amr Abdel Fattah

Ing. Amr Abdel Fattah

Ingénieur en systèmes informatiques spécialisé dans le développement d'applications mobiles et de sites Web, avec une expérience dans la création de plateformes et d'applications Web populaires.
49.1K vues20 cours

Cours similaires