Cours accéléré sur Angular !

1. 0101Qu'est-ce que Angular: Qu'est-ce que l'angle ? Angular est un framework permettant de créer des applications dynamiques d'une seule page. Évidemment, si vous êtes débutant, cette définition n'a peut-être pas tout à fait de sens. Donc, pour donner un sens à cette définition, commençons par comprendre fonctionnement d'une simple application Web. Supposons que vous ayez visité un site Web de commerce électronique et que vous ayez saisi cette barre oblique orale shop.com ElectronC vous venez peut-être de cliquer Le navigateur enverrait ensuite la demande au serveur pour demander une liste d'articles électroniques. Le serveur traiterait la demande, puis il pourrait interroger la base de données pour demander une liste d'enregistrements, qui dans ce cas sont des documents électroniques. Une fois récupérée, elle renverrait la réponse au client ou au navigateur. À l'époque, nous utilisions des technologies telles que php, asp.net, RubonRails ou jango pour générer dynamiquement STML et le renvoyer au client ou au navigateur Ce code STML contient donc les données enveloppées avec STML ou la logique de présentation nécessaire pour pouvoir être affichées sur le navigateur Mais cette approche pose de nombreux problèmes. Peux-tu mettre la vidéo en pause et essayer de deviner ? Tout d'abord, nous aurons des problèmes de performances, car la génération de code STML dynamique beaucoup de ressources, et si un énorme trafic arrive sur le serveur, cela demandera beaucoup de ressources, demande beaucoup de ressources, et si un énorme trafic arrive sur le serveur, cela demandera beaucoup de ressources, aura un impact sur les performances, augmentera les coûts et, à aura un impact sur les performances, augmentera les coûts et, terme, cela pourrait également avoir un impact sur l'expérience utilisateur, car pages Web peuvent s'afficher très lent. Il peut y avoir une certaine latence. Un autre problème auquel nous pouvons penser est la complexité de la base de code. Les développeurs du back-end doivent écrire du code pour générer du code STML de manière dynamique, ce qui augmentera la complexité de la base de code et donc la maintenabilité de la base de code De plus, les développeurs du back-end doivent également apprendre les technologies frontales pour faire leur travail. Troisièmement, et c'est le plus important, il y aurait des problèmes de compatibilité. Maintenant, le HTML peut être compris par un navigateur, mais que se passe-t-il si le client est une application mobile ? Ou que faire si une autre application souhaite lire les données ? Eh bien, si une application demande des données, nous ne pouvons pas leur envoyer du code HTML. Ils doivent effectuer ce travail supplémentaire qui supprimer toute la partie de la présentation, supprimer toutes les balises TML et à extraire les données, ce qui n' est pas du tout pratique Avons-nous donc une solution à ce problème ? Eh bien, pourquoi ne pas simplement envoyer les données et laisser le client s'occuper de la partie présentation ? Cela résoudrait-il le problème ? Jetons un coup d'œil. Ainsi, au lieu d'envoyer du code STML, nous enverrons désormais du JSON Si vous vous demandez ce qu'est le JSON, il s'agit simplement de données dans un format standardisé que tous les autres clients sont prêts à comprendre. Par exemple, si nous demandons une liste d'appareils électroniques, la réponse JSON du serveur peut ressembler à ceci, et tous les clients sont équipés pour le comprendre. Par exemple, les développeurs d'applications mobiles peuvent écrire du code qui passera par ce JSON et extraira les données dont ils ont besoin. De même, une autre application peut utiliser certaines bibliothèques existantes pour lire facilement les données de la réponse JSON. De nos jours, toutes ces technologies de supervision telles que Java, jango, PHP, node JS, qui sont très populaires de nos jours, n' envoient que des données JSON, et elles ne se soucient pas de générer ou d'inclure de manière tamisée une logique de présentation dans la réponse Mais nous avons un problème ici. Ce JSON peut être lu par application mobile, une autre application ou un autre client. Mais qu'en est-il des navigateurs ? Nous ne pouvons pas simplement afficher immédiatement ces données JSON sur le navigateur et nous attendre à ce que l'utilisateur ait une très bonne expérience. Ils veulent voir les données d'une manière visuellement agréable et ils veulent pouvoir interagir avec l'application à l'aide de liens, boutons, de formulaires, etc. Nous avons donc encore besoin de HTML, de CSS et de JavaScript quelque part pour pouvoir y parvenir. Comment y parvenir ? Jetons un coup d'œil. Supposons donc que l'utilisateur ait visité shop.com. Au moment où le client visite ce site, le navigateur envoie la demande au serveur demandant le fichier Index SML. Cette fois, le serveur répondra avec tous les fichiers TML, CSS et JavaScript dont vous aurez besoin Et pour toutes ces demandes ultérieures, il ne répondra qu'avec les données au format JSON. Lorsque vous visitez un site Web traditionnel, chaque fois que vous cliquez sur un lien ou que vous accédez à une page en particulier, le navigateur recharge la page entière, envoie une demande au serveur et reçoit une nouvelle page HTML en réponse Cependant, dans ce cas, le navigateur charge l'intégralité de la structure de l'application, HTML, CSS, JavaScript, tout en une seule fois. Ensuite, lorsque vous cliquez sur un lien ou que vous naviguez dans les pages, la page ne se recharge pas Au lieu de cela, l' application met à jour le contenu de manière dynamique à l'aide de JavaScript. Il met à jour dynamiquement le contenu ou les données JSON à l'aide du JavaScript, qui est déjà présent. Donc, essentiellement, il agit comme une application d'une seule page. Tout comme vous avez une application mobile fonctionnant sur Android, vous allez créer cette application à l'aide de TML, CSS et JavaScript sur un navigateur Et tout comme votre application mobile n'a pas besoin d'être rechargée à chaque fois que vous interagissez avec elle Même cela ne nécessite pas le rechargement de la page chaque fois que le client interagit avec l' application sur le navigateur Parmi les exemples d'applications à page unique citons Facebook, LinkedIn, Twitter, et il en existe de nombreuses autres. Instagram est également une application d'une seule page. Lorsque vous parcourez le message, vous ne verrez pas la page se recharger C'est parce que cela fonctionne dans ce modèle. La première fois que vous visitez facebook.com, ont déjà été téléchargés tous les fichiers TML, CSS et JavaScript requis Et pour toutes les demandes suivantes, serveur ne répond qu' avec les données au format JSON, et elles sont renseignées sur divers composants à l'aide de JavaScript. La vraie question est de savoir comment allons-nous créer ces HTML, CSS et JavaScript ? Allons-nous littéralement utiliser le CSS SML et JavaScript pour créer ces applications ? Cela n'a aucun sens. Cela va demander une quantité inimaginable d'efforts, de temps et d'énergie, et c'est tout simplement impossible C'est là qu'Angular entre en scène. Angular est un framework. Le framework n'est qu' un ensemble de bibliothèques ou de code pré-écrit, qui simplifieront la vie des développeurs afin qu'ils n'aient pas à écrire du TML, du CSS et du JavaScript à partir de zéro Nous utilisons Angular pour créer ces applications dynamiques d'une seule page. Si vous voulez construire une voiture, cela n'a aucun sens de construire chaque composant à partir de zéro. Vous souhaitez obtenir des composants auprès de différents fournisseurs et les assembler comme vous le souhaitez. De même, vous allez utiliser un framework angulaire pour créer les applications comme vous le souhaitez. J'espère que c'est logique. Je te verrai ensuite. 2. 0102 NodeJS vs Angular: Il est très important de comprendre la différence entre angular et node J, car nous considérons souvent nodejs comme quelque chose qui se passe du côté serveur et angular est quelque chose qui se passe du côté client Cependant, nous avons besoin de nodejs pour pouvoir créer ou développer des applications angulaires En fait, qu'il s'agisse de n'importe quelle application JavaScript comme nodejs, react ou même view Nous avons besoin de nodejs pour pouvoir créer ou développer ces applications Essayons donc de comprendre le rôle du nœud JS dans le développement angulaire. Angler est quelque chose qui se passe du côté client, ce qui signifie qu'il s'agit d'une application JavaScript qui s'exécute sur le navigateur D'autre part, nodejs s'exécute sur le serveur, et NodeJS et angler sont tous deux des applications JavaScript, et ils ont besoin d'un environnement d'exécution JavaScript pour pouvoir s'exécuter eux-mêmes Pour les applications de pêche, nous avons un navigateur qui exécute JavaScript. Cependant, pour node js, nous avons le runtime nodejs qui nous permet de déployer notre application sur cet environnement, puis elle peut commencer à traiter la requête Maintenant, jusqu'à présent, nodejs n'a aucun rôle dans Angular Nous n'avons pas besoin de nodejs pour exécuter des applications angulaires Le navigateur fait déjà ce travail. Cependant, pour créer des applications angulaires, nous avons besoin de nodejs Pour mieux comprendre cela, examinons comment l'application nodejs est réellement développée et Donc, tout d'abord, vous devez installer nodejs sur votre machine locale, puis vous avez généralement tendance à exécuter ces commandes Maintenant, il ne s'agit pas d'une liste exclusive de commandes, mais juste pour vous donner une idée, je vais vous montrer quelques commandes que nous pouvons exécuter lors du développement d'applications nodejs Tout d'abord, après avoir installé node JS, vous pouvez utiliser cette commande NPM, qui initialisera le projet et introduira le package point js on dans qui initialisera le projet et introduira le le fichier avec quelques informations de base Il peut donc vous demander de saisir la description du nom du projet, etc. Ensuite, vous pouvez également installer Express. L'installation d'Express est à peu près une norme nos jours car elle est livrée avec du code et des bibliothèques préécrits, que nous pouvons utiliser immédiatement. Par exemple, cela nous permet d'introduire facilement le routage, traitement des demandes, les réponses, etc. Et vous pouvez également installer Typescript. C'est également une pratique assez courante utiliser du tapuscrit au lieu du JavaScript brut, car le tapuscrit est un peu une version évoluée de Cela nous facilitera beaucoup la tâche. Ainsi, une fois que vous aurez installé Typescript, vous commencerez à écrire le code, puis vous devrez traduire ces fichiers dactylographiés en fichiers Javascript équivalents afin que l'enroment nodejs ou nodejs Javascript , runtime Enroment vous commencerez à écrire le code, puis vous devrez traduire ces fichiers dactylographiés en fichiers Javascript équivalents afin que l'enroment nodejs ou nodejs Javascript, runtime Enroment puisse réellement l'exécuter. Donc, une fois que vous aurez fait cela, vous pourriez réellement tester des choses avec NPM start Et une fois que vous aurez tout maîtrisé, vous déploierez cette application sur le serveur de production, pourra alors commencer à résoudre la demande. En ce qui concerne l'angulaire, cependant, nous ne pouvons pas utiliser ces commandes nod Just car la façon dont les projets d'angle sont gérés est un peu différente de la façon dont les projets nod Jz sont gérés Par exemple, la structure du projet sera différente en cas d'angle. Donc, pour exécuter des commandes spécifiques à l'anglo, nous avons besoin d'un autre outil appelé angular CLI Nous devons l'installer sur notre machine locale. Et nous allons l'installer en exécutant la commande NPM Toutes ces commandes qui commencent par NPM sont donc des commandes spécifiques à nodejs Pour installer une CLI angulaire, nous devons d'abord installer le nœud JS. Ce n'est qu'alors que nous pourrons réellement exécuter cette commande. En fait, la CLI angulaire elle-même a été écrite en utilisant JavaScript, et elle a besoin d'un environnement d'exécution JavaScript pour pouvoir s'exécuter elle-même. Et encore une fois, cette inscription est le nœud JS. Ainsi, même pour développer des applications angulaires, nous devons d'abord installer Node js sur notre ordinateur local. Ensuite, nous allons installer une interface de ligne de commande angulaire, qui nous permettra d'exécuter des commandes spécifiques à l'anglo Après avoir installé la CLI angulaire, vous pouvez exécuter des commandes spécifiques à l'angle Par exemple, le moteur U, puis vous allez mentionner le nom du projet, créera une structure de projet de base avec tous les packages et bibliothèques de base dont nous avons besoin pour commencer à développer des applications angulaires. Techniquement, je peux faire tout cela sans installer Anglo CLI, mais c'est un processus très fastidieux. C'est pourquoi nous avons Anglo CLI pour nous faciliter la tâche. Cela va nous faire beaucoup de travail. Ensuite, vous pourriez commencer à écrire du code en tapuscrit, puis vous allez servir l' application pour tester des choses, puis vous finirez par créer l'application, puis vous finirez par créer l'application, qui traduira essentiellement tous ces fichiers dactylographiés en JavaScript équivalent, car c'est ce que ce Ensuite, vous allez le conserver quelque part sur le serveur. Chaque fois que quelqu'un visite votre site, le serveur renvoie tous ces fichiers et les charge sur le navigateur. Maintenant, l'essentiel à comprendre ici est que dans le cas de nodejs, nous avons besoin de nodejs non seulement pour développer ou construire l'application, mais aussi pour exécuter l' application côté serveur Alors que dans le cas d'un pêcheur, nous aurons besoin du nœud J pour créer ou développer l'application angulaire, mais nous n'en avons pas vraiment besoin pour exécuter l' application angulaire en production car nous avons un navigateur qui fait ce travail. J'espère que c'est logique. Je te verrai ensuite. 3. 0103 Mettre en place l'environnement de développement: La configuration de l' inscription au développement pour Angular est très simple. Il comporte ces trois étapes. Tout d'abord, nous allons installer Node js, puis nous allons utiliser la commande nodejs pour installer la CLI angulaire afin de pouvoir commencer à exécuter les commandes spécifiques à l'anglo Ensuite, nous avons besoin d'un éditeur de code source, un outil robuste qui nous aidera à écrire, compiler et déboguer le code plus efficacement par rapport à un bloc-notes standard C'est le code Visual Studio qui fait ce travail. Voyons comment tout cela est fait. Voici donc la page d'accueil officielle de nodjs isndjs.org, et nous pouvons déjà voir Si vous cliquez dessus, le programme d'installation sera téléchargé, puis vous pourrez installer NodeJS, comme vous le feriez pour n'importe quel autre C'est très simple. Toutefois, si vous souhaitez mieux contrôler manière dont vous souhaitez télécharger, vous pouvez accéder à l'onglet Télécharger, puis nous pouvons installer et configurer node JS à l'aide d'un gestionnaire de packages, ou nous pouvons utiliser un programme d'installation prédéfini comme celui que nous venons de voir, ou nous pouvons simplement télécharger les fichiers binaires et les installer manuellement Et si vous le souhaitez, nous pouvons également télécharger le code source. Cette approche simple consiste, bien entendu, à utiliser un programme d'installation prédéfini. Vous pourrez choisir la version que vous souhaitez télécharger et le système d'exploitation. Mais si vous souhaitez modifier la version, nous pouvons le faire. Si vous travaillez pour une entreprise, il est recommandé de choisir l'une des versions LTS. LTS est synonyme de support à long terme. Ainsi, toutes les versions étiquetées LTS bénéficieront du support et de la maintenance de la part de la communauté No Jess pendant plusieurs années après leur sortie Ce sont donc des versions plus stables, mais pour des raisons d'apprentissage, nous pouvons opter pour la version la plus récente et la meilleure. Je vais choisir la dernière version et cliquer sur Télécharger. Je l'ai déjà téléchargé et il se trouve sur mon bureau. Mais si vous voulez être plus aventureux, nous pouvons opter pour l'option gestionnaire de packages, et par défaut, F&M est l'abréviation de Fast Donc, si vous souhaitez utiliser Fast Node Manager pour installer Node JS, il vous suffit d'exécuter toutes ces commandes sur l'outil de ligne de commande Windows ou à l'aide de PowerShell Mais avant d'exécuter ces commandes, vous devez avoir installé le gestionnaire de packages Windows ou Wind get. Vous pouvez facilement l'obtenir sur le Windows Store. Une fois que vous avez installé Windows Package Manager, vous pouvez exécuter toutes ces commandes pour installer Fast Node Manager, puis configurer nroment, puis enfin télécharger Node puis enfin télécharger Si vous êtes débutant, utilisez simplement l'installateur. Vous n'êtes pas obligé de suivre cette approche. Mais vous vous demandez peut-être pourquoi voulons-nous utiliser un gestionnaire de packages plutôt que d'installer simplement node JS à l'aide d'un programme d'installation ? Eh bien, F&M nous donnera une certaine flexibilité basculer entre les différentes versions de nœuds Par exemple, si vous testez compatibilité et que vous souhaitez tester sur une version différente de node JS, F&M vous facilitera En exécutant simplement quelques commandes, nous pouvons passer à une autre version du nœud. Cela nous évitera essentiellement d'avoir à désinstaller et à réinstaller une version différente de node JS. Mais si vous êtes débutant, il y a de fortes chances que vous ne vouliez rien faire de tel. Il suffit de télécharger le programme d'installation et d'installer Node js. Nous avons également un tas d'autres options ici. Si vous souhaitez installer Node JS sur un conteneur Docker, voici toutes les commandes que nous devons exécuter pour installer Node JS Une fois le programme d'installation téléchargé, suffit de double-cliquer dessus. Laissez les paramètres par défaut, acceptez la licence et terminez l'installation. Appuyez sur Terminer. Une fois installé pour vérifier notre installation, lançons la ligne de commande Partial ou Windows avec des privilèges d'administrateur. Il est très important que vous lanciez votre Poial avec des privilèges administratifs Si vous appuyez sur la touche Shift et que vous cliquez avec le bouton droit sur l'écran, vous verrez peut-être l' option permettant de lancer Pill, mais ce n'est pas avec les privilèges d' administrateur. Nous allons donc cliquer sur la touche Windows , puis rechercher PowerShell Cliquez dessus avec le bouton droit de la souris, puis sur Exécuter en tant qu'administrateur. Cela a donc ouvert le Windows Power Shell. Laissez-nous vérifier si notre nœud JS est installé. Je vais dire le trait d'union B, B pour la version, et il affiche la version De même, je vais également vérifier si NPM est l'abréviation de node package manager C'est à l'aide de cet outil que nous allons installer tous les packages dont nous avons besoin dans notre projet. Maintenant, cette commande a échoué car par défaut, pour des raisons de sécurité, PowerShell nous permettra pas d'exécuter de scripts Pour résoudre ce problème, nous devons modifier notre politique d'exécution. Découvrons d'abord la politique d'exécution. Et il est actuellement défini sur restreint. Nous allons changer cela en illimité afin de pouvoir exécuter des scripts en utilisant partial Je vais dire oui en tapant Y. Effacons l'écran et essayons à nouveau d'exécuter la commande Et il s'est affiché. La prochaine chose que nous allons faire est installer la CLI angulaire, et la commande pour cela est que nous allons utiliser gestionnaire de packages de nœuds pour installer la CLI angulaire avec une option globale. Avec l'option tiret G, nous disons que nous voulons installer la CLI angulaire globalement afin de pouvoir exécuter les commandes angulaires depuis n'importe quel répertoire Si nous ne le définissons pas sur global, CLI angulaire est uniquement limitée au répertoire actuel. Si vous souhaitez installer des packages limités à un projet en particulier, nous ne voulons pas utiliser l'option tiret G. Nous pouvons les garder au niveau local. Cependant, nous voulons que la CLI angulaire soit disponible pour tous les projets dans tous les répertoires. Nous voulons donc le définir comme global avec cette option tiret G. Ensuite, nous allons spécifier une CLI angulaire Cela devrait installer Anglo CLI, et cela va prendre un certain temps. Maintenant, vérifions si anglo CLI est installé en exécutant la commande angular C'est la version NG tiret. Et il a affiché la version, ce qui signifie que nous avons correctement installé Angular CLI. Ensuite, nous allons installer Visual Studio Code, et voici le site Web officiel de Visual Studio Code. C'est très simple. Tout ce que vous avez à faire est de télécharger le programme d'installation , puis de l'installer. Une fois cela fait, voici à quoi devrait ressembler le code de Visual Studio. J'espère que c'est logique. Je te verrai ensuite. 4. Composants 0104 en angulaire: Alors, que sont les composants d'Angulo ? Jetons un coup d'œil. Imaginez qu'il s'agit de votre page Facebook. Maintenant, cette page est composée de plusieurs blocs, ou pour le moment, appelons-les composants de l'interface utilisateur. Par exemple, nous pouvons avoir un composant appelé photos qui afficherait vos photos, puis vous pourriez avoir un composant appelé A, qui parle de vous. Et puis nous pourrions avoir un autre composant appelé pose qui afficherait votre pose. Nous pouvons également avoir des composants à l'intérieur d'un autre composant. Par exemple, le composant post peut être composé de deux composants appelés create post et display post. Créer une publication vous permettrait de créer une publication, et l'affichage de la publication affichera simplement le dernier message, et la pose d'affichage serait mise à jour dynamiquement au fur et à mesure que nous faisons défiler la page. Cela signifie qu' au fur et à mesure que nous parcourons la page, nous verrons un nouveau message être rempli, et tous ces composants peuvent résider dans un composant principal. Maintenant, j'ai une question pour toi. Que faut-il pour créer ces composants ? Prenons l'exemple du composant Display Pose. Que faut-il pour créer ce composant ? Je vais te donner un indice. Nous avons besoin HTML parce que c'est ce que le navigateur comprend. Sinon, nous ne verrions rien sur le navigateur. De quoi d'autre avons-nous besoin ? Le style, bien sûr, nous avons besoin de CSS ou de quelque chose de similaire pour le rendre visuellement attrayant. Ensuite, nous avons également besoin de données, qui sont souvent extraites du serveur Ensuite, nous avons également besoin de la logique ou du code qui donnerait de l'intelligence au composant. Par exemple, l'utilisateur peut vouloir interagir avec le composant en appuyant bouton J'aime ou le bouton J'aime ou envoyer un commentaire. Chaque fois que l'utilisateur saisit le texte et clique sur Soumettre ou ajouter un commentaire, la logique sous-jacente ou le code est exécuté pour que ce commentaire soit ajouté à la publication. La combinaison de tous ces éléments, la vue TML et CSS, des données et de la logique constitue le composant angulaire Un composant angulaire serait composé de tous ces éléments, de sorte que lorsque nous exécuterons notre application, nous verrons ces composants se charger. La meilleure façon de comprendre le composant angulaire est de regarder un exemple de code. Maintenant, évidemment, il ne s'agit pas d'un code complet. C'est juste pour vous donner une idée ce qu'est un composant angulaire. Cela comprend la vue, qui est une combinaison du TML et du CSS Ici, nous essayons de faire référence à un fichier TML et à un fichier CSS Ainsi, tous les estimul et CSS requis pour ce composant particulier résideraient dans ces fichiers Et puis nous avons également la logique sous-jacente qui donnerait une certaine intelligence au composant. Par exemple, dans le cas d'un message affiché, nous pourrions avoir une méthode appelée post qui contiendra code indiquant ce qui se passerait si l'utilisateur appuyait sur un bouton J'aime. Ensuite, nous pourrions également avoir une autre méthode appelée ajouter commentaire définissant ce qui se passerait si l'utilisateur ajoutait un nouveau commentaire. Les données seraient extraites du serveur, ce que nous ne voyons pas dans ce code en particulier, mais nous allons certainement explorer cela plus tard. Mais j'espère que vous avez une idée de ce qu'est une composante angulaire. Lorsque nous passerons en revue l'exemple, vous le comprendrez encore mieux. Je te verrai ensuite. 5. 0105 Créer un portrait angulaire avec la procédure à suivre: Bien, voyons comment nous pouvons créer notre premier projet de pêcheur Et pour cela, nous allons lancer notre code Visual Studio, puis nous devons lancer le terminal. Nous pouvons soit utiliser le terminal qui fait déjà partie de Visual Studio Code, soit utiliser n'importe quel outil de ligne de commande tel que la ligne de commande Windows, PowerShell, etc. Tant que vous pouvez exécuter commandes anglo à partir de cet outil, nous devrions être bons Pour lancer le terminal en code Visual Studio, il faut cliquer sur le terminal dans le menu puis sur Nouveau terminal. J'ai également créé un nouveau dossier dans mon Windows, où nous allons héberger tous nos projets angulaires. Je vais copier son chemin, et nous allons accéder à ce répertoire. Je vais créer un CD pour le répertoire de la chaîne, et je vais coller le chemin. Nous sommes donc maintenant dans ce répertoire nouvellement créé, et c'est ici que nous allons créer notre nouveau projet angulaire. La commande pour créer un nouveau projet angulaire est NG New. Ensuite, nous allons spécifier le nom du projet. Je vais simplement l'appeler mon application. Maintenant, nous avons un tas d'options. Je vous recommande d'utiliser SCSS. SCSS est comme une version évoluée du CSS. Si vous connaissez le CSS, vous pouvez facilement le comprendre. Et même si vous ne connaissez rien au style, vous pourrez facilement le comprendre au fur et à mesure que nous progressons dans ce cours. Donc pour l'instant, choisissons l' option SCSS et appuyons sur Entrée ou Retour Il nous demande maintenant si nous voulons activer le rendu côté serveur et la génération côté statique. Nous les explorerons plus tard, mais je vais essayer de vous donner une idée de ce que c'est. Normalement, lorsque vous visitez une page Web créée avec Angular, le navigateur télécharge l'intégralité du Javascript , puis crée la page sur votre ordinateur. Le serveur va simplement envoyer les données. C'est ce qu'on appelle le rendu côté client, et le rendu côté client est le plus couramment utilisé. Le rendu côté serveur ou SSR fonctionne comme sites Web traditionnels où la page est d'abord créée sur le serveur et l'estimation complète est envoyée au navigateur Maintenant, il y a des avantages et des inconvénients, que nous explorerons plus tard, mais le plus souvent, nous préférons le rendu côté client. La génération de site statique ou SSG nous permettra de générer des fichiers TML statiques pour notre site Web lorsque nous construirons notre projet Et ces fichiers statiques sont ensuite fournis directement aux utilisateurs, ce qui est rapide car il n' est pas nécessaire d'attendre que le serveur crée quoi que ce soit. Il fonctionne comme un site Web statique et est utile pour un site Web de documentation où toutes les pages sont préconstruites sous forme de fichiers TML Mais comme je l'ai déjà dit, dans la plupart des cas, s'il s'agit d'une application angulaire, nous n'utiliserons aucune de celles-ci. Nous utiliserions le rendu côté client par défaut. Mais pour l'instant, nous pouvons dire oui à cette option afin qu'Angler inclue toutes les configurations requises pour celles-ci Et au cas où nous voudrions les utiliser, nous pouvons les utiliser. Nous allons donc dire oui en tapant Y puis en appuyant sur Entrée. Maintenant, cela va prendre un certain temps pour créer le projet. Permettez-moi de mettre la vidéo en pause et de revenir en arrière une fois terminée. OK, notre projet est maintenant créé, et si vous allez dans l'explorateur de projets, nous voyons une option pour importer un dossier ou ouvrir un dossier, cliquez dessus. Nous allons à nouveau aller dans le répertoire et choisir le projet angulaire que nous venons de créer. Cliquez dessus et cliquez sur Sélectionner un dossier. Cela va donc importer notre projet, et c'est la structure angulaire typique d'un projet. Permettez-moi de vous expliquer rapidement ce que nous voyons ici. Donc, tout d'abord, nous avons le répertoire SRC. C'est là que réside le code réel de l' application angulaire. Il contient les composants, les services, les vignettes, les actifs et les fichiers de configuration de l'application . Explorons rapidement ses principaux sous-dossiers et fichiers. Nous avons donc ce dossier d'application, et c'est là que se trouve le composant racine. Ainsi, tous les fichiers commençant par composant app point correspondent tous au composant racine. Le fichier app point component point Ts est le fichier dactylographié du composant racine Et comme pour tout autre composant, il pointe vers son fichier modèle ou STML correspondant , ainsi que vers son URL de style correspondante Il s'agit donc du fichier STML et fichier de style correspondant En plus du dossier de l'application, nous avons également un tas d'autres fichiers. Par exemple, le fichier main point TS est comme le point d'entrée de notre application. Il démarre essentiellement le module racine ou le module d'application Et puis nous avons également le fichier HTML d'index, qui contient l'application de pêche elle-même, et c'est le fichier qui est servi chaque fois que quelqu'un visite notre site Web pour la première fois Nous avons également son fichier de styles correspondant. Et puis nous avons le fichier JSON à points angulaires. Il s'agit du fichier de configuration principal de l'interface de ligne de commande angulaire. Il définit essentiellement les paramètres de création, test et de diffusion de l'application. C'est donc ici que nous pouvons configurer diverses options de construction et configurer les actifs, les styles et les scripts inclus, etc. Nous allons explorer tout cela plus tard. Et puis nous avons également le package point JSON. Ce fichier contient des métadonnées relatives au projet, notamment des dépendances et des scripts. Nous avons donc des dépendances qui sont requises pendant l'exécution. Ensuite, nous avons également un tas de dépendances dont nous avons besoin pour le développement, mais qui ne sont pas nécessairement requises pendant l'exécution. Par exemple, Anglo CLI est quelque chose dont nous avons besoin pour le développement et les tests, mais pas pendant l'exécution Un autre fichier important est sconft point Json. Il s'agit d'un fichier de configuration TypeScript qui définit comment Typescript Vous pouvez modifier ces options du compilateur en fonction de vos besoins. Et puis nous avons également les modules nodaux. Ce répertoire contient toutes les dépendances, bibliothèques et packages installés via NPM Vous n'avez généralement rien à modifier ici. Il est généré automatiquement. Il existe également un tas d' autres fichiers, mais nous n'avons pas vraiment à y prêter attention car ils n'apporteront aucune valeur ajoutée à notre projet ou à notre apprentissage. Voici donc un bref aperçu de ce que nous avons dans Anglo Project Nous allons explorer tout cela en détail plus tard, mais pour le moment, j'espère que cela nous a donné un bon départ pour commencer à écrire notre code. Je te verrai ensuite. 6. 0106 Créer un composant angulaire et lancer l'application: Voyons comment générer ou créer un nouveau composant en angulaire, puis je vais également vous expliquer ce qui se trouve à l'intérieur d'un composant. Ainsi, la commande pour créer ou générer un nouveau composant est NG generate component, puis vous allez donner le nom du composant. Je vais appeler ça une pose. Cela a donc créé un nouveau dossier avec le nom du composant, et ce dossier contient tous les fichiers spécifiques au composant. Ouvrons ce fichier dactylographié et essayons de comprendre ce qu'il contient Tout d'abord, nous avons ce décorateur de composant qui indique à Angler que cette classe est un composant, et il fournit des métadonnées qui aident pêcheur à comprendre comment créer et afficher Nous avons donc tout d'abord le sélecteur. Cela définit une étiquette d'estimation personnalisée le pêcheur utilisera pour afficher ce composant particulier Si ce composant devait faire partie d'un composant parent, il s'agit d'un nom de balise que nous devons utiliser. Nous avons défini le mode autonome sur true. Cela permet à ce composant d'exister sans faire partie d' un module angulaire. Eh bien, avant angular 14, nous devons avoir tous nos composants définis dans un module. Avec les dernières versions d'angular, cela n'est plus nécessaire et nous pouvons définir des composants autonomes Si vous ne savez pas ce qu'est un module, nous ne pouvons évidemment pas en parler pour le moment. Nous l'explorerons une autre fois. Ensuite, il y a les importations. C'est ici que nous pouvons répertorier tous les modules angulaires ou autres composants autonomes dont dépend ce composant particulier. Ensuite, nous avons l'URL du modèle, pointe vers le fichier STML qui définit la structure ou l'interface utilisateur de ce Dans ce cas, le fichier se trouve dans le même répertoire que le composant et est appelé post point component point HTML, qui correspond à ce fichier en particulier. De même, nous avons également cette URL de style qui pointe vers le fichier SCSS qui définit les styles pour ce composant particulier Vous pouvez écrire du code SCSS dans ce fichier pour styliser le composant Donc, à l'heure actuelle, par défaut, Angler a renseigné du code HTML dans le fichier TML de publication Mais pour le moment, nous n' avons aucun style pour cela. Nous allons bientôt introduire du code ici. Nous avons également ce fichier spec point Ts, qui est un fichier de test pour le composant Évidemment, étant donné que vous êtes débutant, il se peut que vous ne puissiez pas comprendre ce code, nous allons donc le sauvegarder pour une autre fois. Essayons maintenant de lancer cette application et de voir ce qui va se passer. Mais avant cela, nous devons inclure ce composant particulier dans le composant principal ou dans le composant d'application. Je vais donc copier ce sélecteur et accéder au fichier d'estimation du composant de l'application À l'heure actuelle, il contient du contenu par défaut. Nous pouvons simplement le supprimer, et nous allons introduire notre propre code. Si vous remarquez que nous avons une erreur ici, c'est parce que nous devons importer ce composant dans le fichier dactylographié correspondant Passons à ce composant d'application point Ts, le fichier TypeScript, puis incluons notre composant de publication Le nom du composant est le nom de la classe. Je vais le copier et l'utiliser ici. Si je montre ma souris, nous pouvons réellement importer ce composant automatiquement. Cette instruction d'importation est donc générée automatiquement par le code Visual Studio. Maintenant, laissez-moi enregistrer le fichier lancer notre application et voir ce qui va se passer. Pour cela, je vais utiliser la commande G serve. Cette commande compile donc votre application wangular et lance un serveur de développement local, accessible via un hôte local Il fonctionne sur le port 4 200, et c'est là que nous pouvons voir votre application s'exécuter Cela comporte également une fonction de rechargement en direct, ce qui signifie qu'au fur et à mesure que nous apportons des modifications à notre code, elles seront reflétées instantanément sur le navigateur Permettez-moi donc de copier ce lien en particulier. Accédez à votre navigateur. Et ça a marché. Revenons en arrière et essayons de modifier le code HTML. Enregistrez le fichier. Dès que le fichier a été enregistré, Angular a fait son travail. Et si vous revenez dans le navigateur, les nouvelles modifications sont désormais prises en compte. Je te verrai ensuite. 7. 0107 Démo de l'application Facebook Posts: Je crois en l'apprentissage par la pratique, et c'est selon moi le moyen le plus efficace d'apprendre. Aujourd'hui, nous allons créer une application de type publication sur Facebook, et ce faisant, nous allons apprendre beaucoup de choses en anglais. Cette approche est non seulement amusante, mais elle vous permettra également de découvrir comment nous utilisons les anges dans des projets en temps réel. L'application que vous voyez est donc celle que nous allons créer. Cela fonctionne un peu comme une publication sur Facebook. Nous avons donc quelques articles publiés par John Doe et Jane Smith, et voici les articles qu'ils ont publiés. Nous pouvons ensuite interagir avec la publication en appuyant sur le bouton J'aime. Une fois que vous aurez fait cela, nous verrons un message indiquant que vous aimez cet article, et nous pouvons également le différencier afin de ne pas le voir. Nous pouvons également ajouter un commentaire, cliquant sur le post pour que ce commentaire soit ajouté. Très bien, commençons notre voyage pour créer cette petite application amusante. Je te verrai ensuite. 8. 0108 Interpolation de liaison de données et liaison de propriétés: Jusqu'à présent, nous avons créé le projet angulaire et généré un nouveau composant, qui affiche simplement ce message. Si vous revenez au navigateur, c'est un message que nous voyons. Nous allons bientôt transformer cette application en cette application. Mais pour cela, nous avons besoin d'une source de données d'où proviennent toutes ces données. Idéalement, nous sommes censés obtenir ces données d'un serveur au format JSON. Mais comme nous apprenons et pour simplifier les choses, nous allons obtenir ces données du composant parent , puis les afficher dans le composant enfant. Laissez-moi vous montrer ce que je veux dire. Nous avons donc le composant enfant que nous venons de créer, et nous avons déjà le composant parent. Ce que je vais faire maintenant, c'est remplir une propriété ou un champ de ce composant avec ces données J'ai déjà ces données. Laisse-moi te le montrer. Je vais changer le nom en pose, puis je vais attribuer cette valeur. Il s'agit donc essentiellement tableau de poses qui contient une liste d'objets simulant la structure d' une publication sur les réseaux sociaux avec des détails sur l'auteur de la publication, le contenu et les commentaires correspondants. La pose variable est initialisée sous la forme d'un tableau d'objets et chaque objet représente publication individuelle avec ses propres champs de données Le champ ID est de type numéro. Le champ utilisateur est de type chaîne, le contenu est de type chaîne, puis nous avons également des commandes, qui sont un tableau de chaînes. Ce segment de publication contient actuellement quelques objets. Maintenant, nous devons d'une manière ou d'une autre obtenir ces données dans le composant enfant. Voyons comment c'est fait. Créons une propriété ou une variable qui contiendra ces données. Appelons-le User pose, et ce sera également un tableau. Je vais faire tout Shift F pour formater le code. Laissons un peu de marge de manœuvre. OK, donc User post est le nom de la propriété, et c'est un tableau de n'importe quel type, ce qui signifie qu'il peut contenir un tableau de tout type d'objets de données , de chaînes, de nombres, etc. Et pour le moment, il s'agit d'un MTRI sans aucune donnée. Définissons maintenant cette propriété particulière dans cette balise. Ainsi, tout comme nous avons des éléments STML dotés de leurs propres propriétés, nous pouvons également utiliser nos propriétés personnalisées dans le cadre de nos composants Nous avons peut-être une balise d'image dont la propriété pourrait être ARC. De même, nous avons cette balise de composant personnalisée App Pose, dont la propriété pourrait utiliser une pose. Et nous allons maintenant lui attribuer une certaine valeur. Pouvez-vous deviner quelle sera la valeur ? Eh bien, c'est cette variable qui contient les données. Permettez-moi de le copier et de le coller ici. Maintenant, pour voir ce que contient cette propriété de publication utilisateur, essayons de l'afficher sur l'interface utilisateur. Et la syntaxe pour cela est la suivante, nous allons utiliser des accolades que cela soit affiché C'est ce qu'on appelle l'interpolation. Il s'agit d'une technique de liaison de données unidirectionnelle qui vous permettra d'afficher les données du composant dans le modèle. Cela signifie que les données circulent de la propriété du composant vers l'élément TML Laissez-moi enregistrer le fichier, et revenons au navigateur pour voir s'il s'y passe quelque chose . Il n' affiche rien. Cela signifie que rien n' a été peuplé ici. Donc, pour indiquer à Angular que nous nous attendons à ce que cette propriété soit renseignée par le composant parent, nous devons utiliser un décorateur appelé input. Laissez-moi vous montrer ce que je veux dire. Comme ça. Un pêcheur a déjà fait le travail pour moi en l'important également. Une fois que j'ai dit le fichier, nous voyons une erreur. Pouvez-vous deviner pourquoi cette erreur s'affiche ? Eh bien, ce que nous avons ici est un tableau, mais ce que nous essayons d' assigner ici est une chaîne. Mais la question est que nous n'avons pas l'intention de l'attribuer sous forme de chaîne. Nous avons l'intention d'attribuer cette valeur particulière. Pour que cela fonctionne, nous devons utiliser ce que l'on appelle la liaison de propriétés. Il suffit de placer cette propriété entre crochets, et cela résoudra le problème. Pourquoi est-ce le cas ? Cela signifie que vous liez en fait une propriété à partir du composant parent. Il s'agit d'une pose pour un composant enfant appelé pose utilisateur. Et cette propriété doit avoir ce décorateur d'entrée. Ce n'est qu'alors que cela se produira ? Maintenant, sauvegardons le fichier et retournons dans le navigateur. Tout ce que nous voyons ici, ce sont quelques objets. Pourquoi est-ce le cas ? Eh bien, cela se présente sous la forme d'un tableau d'objets JavaScript, qui peuvent ne pas être très lisibles pour le rendre lisible, façon d'utiliser le tube JSON. Cela formatera le tableau en chaîne JSON. Et cela fait partie des modules communs. Nous devons l'importer, enregistrer le fichier, et nous n'avons plus cette erreur. Revenons en arrière et cela a fonctionné. Nous sommes en mesure d'afficher les informations relatives à la publication. Voyons comment nous pouvons faire évoluer cela vers cette application. Je te verrai ensuite. 9. 0109 Directives utilisant NgFor pour afficher les publications: À l'heure actuelle, nous affichons les données au format JSON. De toute évidence, ce n'est pas ainsi que nous voulons le montrer aux utilisateurs. Nous voulons extraire les données de ce JSON, puis les envelopper avec des balises eSTIML , puis appliquer un style afin de pouvoir les afficher ainsi Notre objectif pour cette conférence particulière est donc d'extraire le nom ou le nom de l'auteur et message correspondant , puis de les afficher de manière significative. Si nous revenons au code, à l'heure actuelle, cette propriété particulière contient les données, et pour le répéter, nous obtenons les données du composant parent raison de la liaison de propriété, où nous lions la propriété utilisateur du composant enfant à la propriété post du composant parent. C'est ainsi que nous obtenons les données relatives à cette propriété en particulier. Et cela n'arriverait que si vous aviez ce décorateur. Essayons maintenant d' afficher les données. Je vais tout mettre dans un tag DV pour commencer. Et ici, nous voulons renseigner le nom et le contenu de la publication Je vais garder le nom dans le tag H two. Ensuite, le message va entrer dans une balise de paragraphe. Alors, comment allons-nous obtenir le nom d'utilisateur et le contenu ? Eh bien, c'est en utilisant l' interpolation. Nous allons utiliser quelques Colbrss pour cela. Et ici, nous allons dire pose de l'utilisateur. Nous voulons accéder au premier élément. La pose comporte actuellement quelques éléments. Et nous utilisons user post car il s'agit d'un nom de propriété dans le composant enfant. Alors, comment accéder au premier élément ? Eh bien, si je dis zéro, cela nous donnera accès au premier élément tant qu'utilisateur de points. Ensuite, je vais faire de même pour le contenu. Je vais définir le contenu. Ainsi, avec l'interpolation, nous sommes en mesure de lier les données du composant au modèle Laissez-moi enregistrer le fichier, et voyons comment il s'affiche dans le navigateur. Retournons en arrière. Et il a affiché le premier élément. Et nous allons également faire de même pour le deuxième élément. Je vais copier, suspendre le code et augmenter le nombre d'un. Cela va accéder au deuxième élément, qui est celui-ci. Revenons en arrière et il a également été rendu. Maintenant, dans quelle mesure est-il pratique d'écrire un code comme celui-ci ? heure actuelle, nous avons quelques éléments dans ce tableau, nous pouvons donc écrire du code comme celui-ci. Mais que se passe-t-il si nous avons des centaines , voire des milliers d'éléments ? Ce n'est tout simplement pas pratique d' écrire un code comme celui-ci. Avons-nous une solution ? un moyen de laisser Angular faire le travail à notre place ? La réponse réside dans les directives angulaires. Nous parlerons des directives anglo plus en détail plus tard Mais pour l'instant, nous allons nous concentrer sur une directive particulière qui nous aidera à faire ce travail, et cette directive est la quatrième directive. Laissez-moi vous montrer ce que je veux dire. Je vais donc définir un seul tag, un tag de plongée. Et ici, je vais utiliser un direct. Et la syntaxe pour cela est la suivante, star NG four. Et ici, je vais dire «   laissez la publication de l'utilisateur poser ». La directive G for nous permettra d' itérer sur un tableau appelé user pose Et pour chaque élément du tableau de poses utilisateur, il crée une variable locale appelée post, qui représente l' élément actuel de l'itération. En bref, déclarons une variable pour chaque élément du tableau et spécifiez le tableau que nous parcourons en boucle, qui dans ce cas est la pose de l'utilisateur Pour accéder aux données de l'élément en cours, nous pouvons utiliser cette variable. Je vais le remplacer par un post. Tangler va essentiellement répéter cette balise un nombre de fois égal au nombre d'éléments du tableau ou au nombre d' éléments du message de l'utilisateur Et nous pouvons accéder aux données de chaque article en utilisant cette variable appelée post. Maintenant, si vous vous demandez comment nous pouvons utiliser ces directives dans un fichier TML Eh bien, lorsque nous compilerons ce code, Angular les évaluera puis générera du code STML dynamique Donc, si nous avons des centaines d'éléments ici, ces nombreux tags Du seront créés par Angular une fois après la compilation. Le navigateur ne comprend pas ces directives. Ils sont fournis par Angular pour notre commodité. Alors laissez-moi enregistrer le fichier et examinons le navigateur pour voir s' il affiche les données, et bien sûr, cela a fonctionné Maintenant, je veux te confier une mission. Allez-y et affichez les commentaires pour chaque publication. C'est simple et vous connaissez déjà la solution. J'espère que tu le feras. Je te verrai ensuite. 10. 0110 Afficher les commentaires de publication: Nous sommes en mesure d'afficher le nom de l'auteur et le message correspondant. Maintenant, allons-y et affichons leurs commentaires correspondants. De plus, nous allons également ajouter ces boutons J'aime » et « publier » ainsi que ce champ de saisie. Pour cette conférence en particulier, nous n'allons donner aucun type de comportement à ces boutons. Nous allons le faire lors de la prochaine conférence ou des conférences à venir. Revenons donc au code de Visual Studio. J'espère que vous avez essayé d'ajouter les commentaires et j'espère que vous avez réussi. Si ce n'est pas le cas, jetez simplement un œil à la façon dont cela devrait être fait. Donc, juste pour une séparation logique, je vais ajouter un autre tag Dew. Cela peut s'avérer utile si nous voulons styliser des sections particulières. Et dans cette balise Dev, je vais créer une liste non ordonnée dans laquelle nous allons afficher les comètes C'est ici que nous allons utiliser la directive NGF pour parcourir en boucle ou itérer toute la liste des commandes J'utilise donc exactement la même syntaxe. Disons que c'est un commentaire, et je vais copier ce champ en particulier comme ça. Et bien sûr, nous devons l'obtenir à partir de cette variable post, qui contiendrait les commandes des éléments actuels. Commandes Post point. Et à l'intérieur de cette balise, nous pouvons utiliser l'interpolation pour afficher le commentaire Ainsi, enregistrez le fichier. Et si je reviens au navigateur, nous devrions voir les commentaires. Permettez-moi également d'ajouter rapidement le bouton. Je vais l'appeler comme ça. Nous avons également besoin d'un bouton similaire pour publier un commentaire. Appelez ça un post. Ensuite, nous avons besoin d'un champ de saisie. Exactement comme ça. Enregistrez le fichier. Revenons au navigateur. Nous avons donc le bouton J'aime, le champ de saisie et le bouton de publication correspondant. Bien entendu, nous n'avons aucun comportement pour ces boutons pour le moment. C'est ce que nous allons faire lors des prochaines conférences. Je te verrai 11. 0111 Gestion des événements et comportement d'ajout: Travaillons maintenant sur ce bouton J'aime. Je veux que tu fasses attention au comportement de ce bouton J'aime. Au moment où nous lancerons l' application pour la première fois, toutes les publications ne seront pas aimées. signifie que pour chaque publication, nous allons voir ce bouton appelé L. Si je clique sur le bouton J'aime d'une publication, le statut devrait changer comme ça. Le texte du bouton devrait devenir différent, puis nous devrions pouvoir voir ce texte qui dit : «  Vous avez aimé cet article ». Et si je clique sur le bouton Contrairement, il devrait revenir au bouton L. Et la façon dont nous allons y parvenir est de maintenir une liste ou un ensemble de publications qui ont été aimées. Si vous vous souvenez, pour chaque élément, nous avons ce champ ID. Dès que je clique sur le bouton J'aime d'un article en particulier, nous ajoutons son identifiant correspondant à cette liste ou à cet ensemble. De cette façon, nous pouvons garder une trace de toutes les publications qui sont aimées et, sur cette base, nous pouvons afficher le texte sur le bouton ainsi que le texte que nous voyons à côté. Voyons donc comment cela se fait. Je vais donc vous présenter un nouvel ensemble qui maintient une liste de publications aimées. Je vais dire set. Cela permettra de conserver un ensemble de nombres car le champ ID est de type numéro. Ensuite, je vais présenter une méthode appelée like post. Ensuite, nous allons lui envoyer l'identifiant de la publication. Qui est de type numéro. Cette méthode ne retournera rien, nous disons donc nul. Ensuite, nous allons demander à ce que nous vérifiions si ce point, comme le point de publication , contient cet identifiant d'envoi. Si tel est le cas, nous voulons supprimer cet identifiant de la liste des publications aimées. Cette méthode serait déclenchée chaque fois que nous appuierons sur ce bouton. Si nous cliquons sur le bouton J'aime, nous allons essentiellement ajouter cet identifiant dans cette liste ou dans l'ensemble et vice versa. Si nous cliquons sur le bouton « Contrairement », nous vérifierons si le message est déjà présent dans le message similaire. Dans l'affirmative, nous le supprimerons. Donc, ici, nous allons définir cela comme publication, suppression de points, identifiant de publication, ainsi de suite. Ensuite, nous aurons le bloc else et ici nous ajouterons simplement l'ID de publication. Je sais qu'il te faut un peu de temps pour comprendre tout cela, mais tout cela aura du sens dans un moment. Passons au modèle. Ici, nous allons faire de la liaison angulaire des événements. Donc, dès que nous cliquons sur ce bouton, devinez quoi, nous allons appeler cette méthode, comme post, puis transmettre l'ID de publication actuel, pour réitérer que cette variable de publication contiendra les données de l'élément actuel, et c'est ainsi que nous avons obtenu l'ID. Et ici, nous allons utiliser l' interpolation pour vérifier si le post tide est présent dans le post aimé, et sur cette base, nous voulons afficher le texte Le point de publication LED vérifie s'il possède l'identifiant du message enseigné. Je veux utiliser le point d'interrogation. Si c'est le cas, cela signifie que le message est similaire, et maintenant nous voulons montrer le texte différent. Sinon, le message n'est pas présent dans la liste, nous voulons donc afficher le texte tel quel. Laissez-moi le mettre dans le DVTag et je ferai tout le Shift F pour formater notre code Et à côté, je vais introduire une balise span, et c'est ici que nous allons remplir ce texte Ici, je vais utiliser NG pour vérifier si l'idée de publication est présente dans la liste des publications aimées ou dans la liste des points de publication similaires, et je vais envoyer l'identifiant du point de publication comme tel. Si tel est le cas, nous voulons afficher ce texte dans cette balise span. J'aime bien ce post. Comme ça. Sauvegardons le fichier et voyons s'il fonctionne. Je vais aimer ce bouton, et au moment où j'appuie sur ce bouton, il a déclenché l' événement de clic de ce bouton, appelé cette méthode, et il vérifiera si cette condition est vraie. Dans ce cas, c'est faux. C'est pourquoi il est allé de l'avant et a ajouté cet élément ou cet identifiant en particulier dans la liste des publications. Sur cette base, nous modifierons le texte du bouton ainsi que ce texte en particulier. Contrairement à cela, et cela semblait très bien fonctionner. Donc, lorsque je ne l'ai pas aimé, nous avons essentiellement supprimé cet identifiant de publication particulier de la liste, et sur cette base, nous avons affiché la balise span en plus de celle-ci supprimé cet identifiant de publication particulier de la liste, et sur cette base, nous avons affiché la balise span en plus de C'est ce qu'on appelle la gestion des événements en angulaire. J'espère que c'est logique. Je te verrai ensuite. 12. 0112 Reliure bidirectionnelle Ajouter des commentaires à la publication: OK, essayons maintenant d'ajouter la fonctionnalité d'ajout de commande à notre application. nous allons utiliser une combinaison de liaison bidirectionnelle et de gestion des événements. Laissez-moi vous expliquer ce que je veux dire. Nous avons un champ de saisie pour chaque publication. Chaque fois que je tape du texte ici, je souhaite qu'une propriété du composant soit mise à jour instantanément Nous pouvons y parvenir avec une liaison bidirectionnelle. Lorsque l'utilisateur clique sur le bouton de publication, nous allons appeler une méthode avec ID de publication correspondant et dans la méthode, nous essaierons de trouver cette publication, puis nous essaierons éventuellement de placer ce commentaire dans la liste de ses commandes. Bien que nous voyions quelques commentaires ici, il se peut que nous ajoutions un nouveau commentaire à cette liste. Jetons donc un coup d'œil à la façon dont cela se fait. Nous avons donc déjà le champ de saisie. Laissez-nous d'abord remplir un texte par défaut. Si nous revenons en arrière, nous voyons un texte par défaut appelé ajouter un commentaire. Nous allons donc d'abord l' ajouter. Placeholder, ajoutez un commentaire. Comme ça. Et maintenant, je vais utiliser l'une des directives anglo Pour la reliure bidirectionnelle, cela s'appelle NG moral. Et il sera entouré d'une combinaison de parenthèses et de crochets Je vais vous expliquer ce qui se passe ici dans un instant. Et ici, je vais faire un nouveau commentaire. Cette propriété doit être ajoutée dans le composant. Je vais le copier et créer une nouvelle propriété ici. Il sera de type chaîne car c'est ce que l'utilisateur entre. Par défaut, il n'y aura rien. Enregistrez le fichier. Cela appartient au module Forms, nous devons donc importer et enregistrer le fichier et nous n'avons plus d'erreur. Le modèle ng est donc la directive anglo utilisée pour liaison bidirectionnelle pour tous ces éléments de formulaire Le champ de saisie est désormais lié à la nouvelle propriété de commande du composant. Lorsque la valeur du champ de saisie change, chaque fois que l'utilisateur saisit quelque chose, la valeur du nouveau commentaire est automatiquement mise à jour. Cette propriété serait mise à jour instantanément. Mais pourquoi est-ce appelé reliure bidirectionnelle ? Vous comprendrez à la fin de cette conférence. Ensuite, nous allons créer une méthode correspondant à ce bouton de publication. Nous allons donc avoir un événement de clic, comme pour ce bouton, je vais le copier et ici changeons le nom de la méthode en Ajouter un commentaire, et encore une fois, nous allons envoyer l'ID de publication. Créons cette méthode. Encore une fois, permettez-moi de copier ce code pour gagner du temps. Nous allons cependant changer de logique. Tout d'abord, nous allons essayer de trouver la publication par son identifiant. Alors faisons-le. Je vais créer une publication constante égale à ce point de publication utilisateur. J'essaie de trouver un article avec cet ID de publication, et voici une syntaxe pour cela. Est égal à égal, égal à l'ID de publication. La méthode find est donc utilisée pour rechercher dans le tableau de publications de l'utilisateur, mais dans le message, dont l'identifiant correspond l'identifiant de publication fourni en argument. Nous aurons alors une condition pour voir si le message existe réellement et n' est pas indéfini Donc, si le message existe et que ce nouveau commentaire est coupé par des points, alors seulement voulons-nous ajouter le commentaire ? Donc, si le message n'est pas indéfini et que le nouveau commentaire est mis à jour avec une certaine valeur après avoir supprimé les espaces blancs de fin, nous voulons placer ce commentaire dans la liste des commentaires de cet Je vais dire post point commands point. Appuyez sur ce point Nouvelle commande. Enfin, une fois que nous avons appuyé sur la commande, nous ne voulons plus afficher ce texte dans le champ de saisie. Pour cela, je vais mettre à jour la nouvelle propriété de commande et la vider, enregistrer le fichier. Je vais aussi enregistrer ça. Revenons en arrière et voyons si l'application se comporte comme prévu. Et ça a marché. Nous sommes en mesure d'ajouter une nouvelle commande. Maintenant, pourquoi est-ce appelé reliure bidirectionnelle ? Comme vous le remarquez, dès que quelque chose est mis à jour dans ce champ de saisie, la même chose se reflétera également dans ce champ. C'est également vrai dans l'autre sens. Au moment où nous avons mis à jour cette propriété en particulier, la même chose se reflète ici également. Les données circulent essentiellement non seulement du modèle vers le composant, mais également dans l'autre sens. Les données sont également mises à jour et sont transférées du composant vers le modèle Alors qu'en cas d'interpolation, ce n'est pas le cas. C'est ce qu'on appelle une liaison unidirectionnelle où les données circulent simplement du composant vers le modèle. Nous n'avons donc plus le texte ici. J'espère que c'est logique. Je te verrai ensuite. 13. 0113 Mini Masterclass SCSS: Ce sera une classe minimster sur SCSS ou SASA SCSS est comme une version évoluée du CSS. Il ressemble au CSS normal, mais avec des fonctionnalités supplémentaires pour rendre notre style plus efficace. Mais le SCSS est plus populaire car il est entièrement compatible avec le CSS, ce qui signifie que vous pouvez prendre n'importe quel fichier CSS existant et commencer à ajouter des fonctionnalités SCSS sans trop changer Dans cette conférence, nous allons parler de toutes les fonctionnalités essentielles que vous devez connaître, ainsi que des exemples. Parlons d'abord des variables. Jetez un coup d'œil à cette tradition de style CSS. Nous utilisons exactement la même valeur ou la même couleur pour l'attribut de couleur dans H un et H deux. Cela peut poser problème car si nous devions mettre à jour cette couleur, nous devrions le faire à ces deux endroits. Maintenant, dans ce cas, il ne s'agit que de quelques emplacements, donc nous n'aurons peut-être aucun problème. Mais que se passerait-il si nous mettions à jour la couleur à plusieurs endroits ? Eh bien, cela devient un travail fastidieux et sujet aux erreurs. Dans SCSS, nous avons des variables. Ici, nous essayons de définir une variable appelée couleur primaire, dont la valeur est la couleur elle-même, et nous utilisons cette variable à plusieurs endroits. Ainsi, chaque fois que nous mettons à jour la valeur de la couleur primaire, elle sera reflétée dans tous les emplacements où nous utilisons cette variable. Nous pouvons également utiliser des propriétés personnalisées CSS ou des variables CSS, mais elles ne sont pas aussi flexibles que les variables SCSS en termes de logique d'écriture , car le SCSS nous permet écrire du code avec des fonctionnalités avancées telles que des boucles, conditions et des fonctions qui ne sont pas possibles avec les propriétés personnalisées CSS Cependant, propriétés CSS présentent un avantage significatif, à possibilité de mettre à jour les valeurs de manière dynamique pendant l'exécution. Alors que dans SCSS, les variables sont statiques et ne fonctionnent qu'au moment de la compilation. En d'autres termes, le fichier SCSS serait éventuellement compilé en un fichier CSS équivalent afin que les navigateurs puissent le comprendre Nous ne pouvons pas modifier ses valeurs pendant l'exécution lorsque l'application s'exécute. Vient ensuite la nidification. En CSS, nous devons écrire des sélecteurs à plusieurs reprises, même s'ils sont liés, comme vous le voyez ici Alors qu'en CSS, l'imbrication est autorisée, ce qui rendra le code plus lisible et plus facile à maintenir Et rien qu'en regardant ce code, nous pouvons déterminer à quoi ressemblerait le code STML correspondant Cela devrait ressembler à ceci. Nous avons l'élément NAV dont l'élément enfant est une liste non ordonnée ou UL, dont l'élément enfant est l'élément de liste, la balise LI La même structure est également suivie dans le style, ce qui le rend plus lisible et plus facile à entretenir Viennent ensuite les partiels. CSS prend en charge la règle d'importation, mais chaque entrée entraîne une demande STDB supplémentaire, ce qui peut ralentir le temps de chargement D'autre part, SCSS nous permettra de diviser les feuilles de style en partielles et de les importer sans requêtes SDP supplémentaires, car elles sont finalement compilées dans un seul fichier CSS Tous les fichiers que vous voyez ici commencent par un trait de soulignement ou des partiels, et nous utilisons l'instruction d'importation pour les importer dans le fichier SCSS principal Viennent ensuite les mixins. En CSS, si vous utilisez exactement le même style pour plusieurs éléments, vous devez copier et coller le code manuellement. Alors que dans SCSS, nous avons des mixins, qui nous permettront de créer des blocs de styles réutilisables et de les réutiliser tout au long de notre feuille de style De cette façon, nous pouvons éviter les répétitions et réutiliser les styles existants. Similaire à l'écriture de fonctions en programmation. Et dans ce cas, nous avons le mix sous forme de bouton nommé, et nous l'incluons à plusieurs endroits. Et lorsque nous le faisons, nous faisons également valoir certains arguments. Dans ce cas, les arguments sont la couleur d'arrière-plan et la couleur du texte. Par défaut, ils étaient bleus et blancs, mais nous pouvons les remplacer en envoyant nos propres arguments Donc, pour le premier bouton, nous envoyons du noir et blanc, et pour le bouton deux, nous envoyons du rouge et du blanc. Vient ensuite l'héritage. Dans le CSS traditionnel, si nous devons utiliser exactement le même style à plusieurs endroits, encore une fois, nous devons simplement copier-coller. Mais un CSS nous permettra d' étendre un sélecteur à un autre, et ainsi nous pourrons réutiliser les styles existants Viennent ensuite les boucles. Jetez un œil à ce code CSS traditionnel. En revanche, jetez un œil au code SSS, où nous avons utilisé une boucle pour générer dynamiquement ces styles pour nous Le directeur FOR crée une boucle et le dollar I est utilisé pour insérer le numéro d' itération de boucle en cours dans nom de la classe et dans la valeur de la propriété dans ce cas Ce code générera exactement le même style que celui que vous voyez sur le côté gauche lors de la compilation. Viennent ensuite les fonctions. Le CSS possède un ensemble limité de fonctions intégrées telles que Calc, RGB ou URL Cependant, vous ne pouvez pas définir vos propres fonctions en CSS. Alors que dans un CSS, cela nous permettra de créer des fonctions personnalisées pour effectuer des opérations telles que la manipulation des couleurs, les calculs, en gros, tout ce que vous souhaiteriez faire. Nous avons donc ici la fonction appelée calculer la largeur, puis nous appelons cette fonction en envoyant un argument. Dans ce cas, nous envoyons 100 pixels, qui seraient multipliés par 1,5, et la même valeur serait renvoyée. Viennent ensuite les déclarations conditionnelles. Jetez un œil à ce code. Comme vous pouvez le constater, SCSS autorise logique conditionnelle avec les instructions I L et elseif Nous vérifions donc ici si la variable de thème est foncée. Si nous avons un style spécifique pour cela , nous introduisons un style différent. Viennent ensuite les opérations mathématiques. Le CSS comporte des opérations mathématiques très basiques que vous pouvez effectuer à l'aide de Calc, mais le SCSS permet directement des opérations mathématiques complexes sans avoir besoin de la méthode Calc Tout tourne autour de SESS et félicitations. Vous venez de terminer la master class du SCSS. Je te verrai ensuite. 14. Avis sur Skillshare: Bonjour, c'est votre professeur pour ce cours et j' espère que vous avez vraiment apprécié votre voyage jusqu'à présent. La raison de cette vidéo est essentiellement de vous demander de prendre quelques minutes pour évaluer et réviser ce cours. C'est très important car en fonction du nombre de notes et d' évaluations reçues par le cours, équipe Skillshare décidera de maintenir le cours sur cette plateforme ou de le supprimer Malheureusement, peu de mes cours ont été supprimés. Et de nombreux étudiants ont été touchés à cause de cela, parce qu'ils n'avaient pas suffisamment d' évaluations et d'évaluations. Si ce n'est pas une grande faveur, prenez quelques minutes pour lire ce cours et décrire quelques lignes de ce que vous avez appris jusqu'à présent. Et si cela vous a été bénéfique d'une manière ou d'une autre, cela aidera ce cours à rester en vie sur cette plateforme. Et vous ne perdrez probablement pas non plus l'accès à ce cours. J'espère que tu le feras. beaucoup et à bientôt. Passe une belle journée à venir. 15. 0114 Application de style à nos publications avec SCSS: Je suis allé de l'avant et j'ai introduit le typage pour notre application afin qu'elle ressemble à ceci Puisque vous connaissez maintenant le SCSS, vous devriez être en mesure de comprendre ce qui se passe ici En gros, j'ai introduit attribut de classe pour toutes les balises DV dans le code HTML, et j'ai également fourni le style correspondant Et si vous remarquez, nous essayons de suivre et d'imiter la même structure du code HTML lui-même. Nous avons donc le tag Dv à l'intérieur duquel se trouvent deux tags Du enfants, et nous suivons la même structure Nous avons donc le sélecteur DevTag parent. Post est le nom de la classe que nous avons utilisée ici. Dans lequel nous essayons de sélectionner les sous-divs, les actions et les commentaires Et nous avons apporté un style à leurs éléments. Je veux que vous preniez le temps de parcourir ce dossier et d'essayer de comprendre ce que nous essayons de faire ici. J'ai également ajouté quelques commentaires pour que vous puissiez comprendre. Et je ne pense pas que cela beaucoup de sens pour moi de vous expliquer chacun de ces attributs, car honnêtement, style est l'une des choses les plus faciles à faire. De plus, cela n'est pas vraiment considéré comme une compétence technique. J'espère que c'est logique. Je te verrai ensuite. 16. 0115 Services angulaires: Imaginez que vous créez un site Web de commerce électronique en utilisant Angular. Maintenant, dans le cadre de votre projet, vous avez peut-être ces composants, profil et le composant de commandes. Le composant de profil vise à afficher le profil de l'utilisateur, et le composant de commandes vise à afficher l'historique des commandes passées par l'utilisateur. Bien entendu, dans un site Web de commerce électronique, vous pouvez avoir des centaines de composants. Mais dans le cadre de cet exemple, concentrons-nous sur ceux-ci. Certaines fonctionnalités resteront peut-être communes à plusieurs composants. Dans ce cas, il se peut que nous ayons besoin d'une authentification résidant dans ces deux composants. Nous pouvons avoir quelques lignes de code pour authentifier l'utilisateur, et ce code d'authentification enverra la demande au serveur, s' assurant que l'utilisateur est celui qu'il prétend Maintenant, c'est une façon très inefficace de gérer ce scénario. Peux-tu deviner pourquoi ? Eh bien, tout d'abord, nous avons le même code conçu dans plusieurs composants, donc c'est de la répétition. Deuxièmement, nous faisons plusieurs demandes, ce qui épuisera les ressources du serveur. Nous devrions être en mesure d' envoyer une seule demande , puis de stocker cet état quelque part afin de ne pas avoir à continuer à envoyer la demande pour authentifier l'utilisateur C'est exactement pourquoi nous avons besoin de services angulaires. Dans ce scénario, nous pourrions introduire un service appelé service AT, qui comportera un code spécifique à l'authentification. Nous allons déplacer le code d'authentification des composants vers ce service AT afin qu'il puisse rester au même endroit et que les composants utilisent simplement le service AT pour connaître le statut d'authentification de l'utilisateur. Mais c'est le service at qui va effectivement envoyer la demande au serveur pour authentifier l'utilisateur Une fois qu'il le fera, il conservera également un état. Essentiellement, dans le service at, nous pouvons avoir une propriété pour stocker le statut d'authentification de l'utilisateur. Il n' enverra la demande qu'une seule fois, puis il mettra à jour le statut ou la valeur de la propriété. Les composants examineront simplement valeur de la propriété et, sur cette base, ils sauront s'ils doivent être rendus ou non. Nous utilisons donc essentiellement des services pour récupérer des données ou pour interagir avec le serveur, en maintenant l'état, comme vous venez de le voir Nous pouvons également avoir des fonctions utilitaires résidant dans le service AT. Ainsi, si vous avez des fonctions utilitaires telles que la transformation des données ou la validation des entrées utilisateur , par exemple, vous pouvez les avoir toutes au même endroit dans le service Et, bien entendu, nous pourrions également avoir la logique commerciale. Dans ce cas, nous vérifions essentiellement si l'utilisateur dispose des autorisations suffisantes ou non. Mais quels sont les avantages de cette approche ? Eh bien, tout d'abord, en ce qui concerne la réutilisabilité du code, la logique peut être écrite une seule fois et utilisée sur plusieurs composants Séparation des préoccupations, qui permettra composants de rester concentrés sur la logique de présentation, tandis que la logique métier et la récupération des données seront transférées vers les services Cela améliorera également la fiabilité des services, car ils ne font appel à aucune logique d'interface utilisateur Ensuite, nous allons introduire le service dans notre application de publication sur Facebook. Je te verrai ensuite. 17. 0116 configurer le point de terminaison et servir les données: Pour le moment, nous obtenons toutes les données de publication du composant parent. Ce scénario n'est pas réaliste. Nous devons obtenir ces données depuis le serveur lui-même, et devinez quoi ? À l'heure actuelle, aucun serveur ne gère ces données. Idéalement, nous sommes censés créer un serveur sur Cloud Enrollment, puis écrire code de site de serveur qui exposera réellement cette API pour envoyer ces données, mais j'ai une meilleure solution à ce problème. Il suffit d'utiliser l'un des outils existants en ligne. Je suis tombé sur ce site avec une recherche rapide sur Google, et cela semble résoudre le problème. Le nom du site Web est donc bispto.com slash MOC hyphen API. Et comme son nom l'indique, cela nous permettra de créer une API fictive afin de ne pas avoir à nous soucier de créer le serveur, d' écrire le code, bla, bla, bla Au moment de cet enregistrement, ce site Web est actif. Si vous ne parvenez pas à voir ce site en direct grâce à une recherche rapide sur Google, vous pouvez facilement trouver de nombreux outils de ce type. Donc, ce que je vais faire maintenant, c'est copier les données de cette publication. Avant de le servir, nous devons nous assurer qu' il est au bon format JSON. Pour cela, j'utilise un autre outil, que j'ai encore une fois découvert lors d'une recherche rapide sur Google. Je vais donc le coller ici et cliquer sur Process. Si vous êtes curieux de connaître le nom du site Web, c'est jsonformata.usccept.com Donc apparemment, ce n'est pas un format adjacent. Nous sommes censés avoir des guillemets doubles pour les clés et aussi pour les valeurs Il a donc fait le travail pour nous. Je vais le copier et le coller ici. Essentiellement, nous demandons à cet outil d'envoyer ces données comme réponse chaque fois que j'envoie la demande. Et là, je vais dire pose. Si le point de terminaison de l'URL ou si l'URL se termine par une barre oblique, c'est le cas, nous voulons que cet outil envoie ces données Assurez-vous que 200 est correct et cliquez sur Create Mock server. Pour m'assurer que cela fonctionne, je vais le copier. Laissez-moi l'agrandir pour vous. Je vais copier cette URL, coller ici, poser, et nous pourrons voir la réponse dont nous avons besoin. Continuons à partir de la prochaine conférence. 18. 0117 Récupérer les données du service: Dans cette conférence, nous allons voir comment obtenir les données de ce serveur afin de pouvoir les données de ce serveur en faire quelque chose. Donc, tout d'abord, allons-y et créons un service, et la commande pour cela est NG generate service. Il nous demandera de donner un nom au service. Je vais appeler ça une pose. Angler a donc créé ces deux fichiers. Laisse-moi ouvrir ça. Je vais créer une variable qui contiendra cette URL. Privé, appelons-le car l'URL de l'API est égale, et je vais copier cette URL. Ensuite, je vais utiliser le constructeur pour injecter la dépendance du client STTP Laissez-moi vous montrer ce que je veux dire. Le constructeur est déjà créé Et si vous vous demandez ce qu'est un constructeur, il s'agit essentiellement d'une méthode spéciale qui est automatiquement appelée lorsqu'une instance de la classe est créée Ainsi, lorsque l'instance de service de poste est créée, Angler appelle automatiquement le constructeur En général, nous utilisons le constructeur pour injecter les dépendances. Laissez-moi vous montrer ce que je veux dire. Je vais dire client STTPE TDP privé Le client STDP est essentiellement un fichier dactylographié, et il contiendra du code pour envoyer la demande au serveur et récupérer les Nous l'utilisons donc essentiellement pour envoyer une requête HDP au serveur Et en le spécifiant dans le constructeur, système d'injection de dépendance angulaire injecte automatiquement une instance du client TDP chaque fois qu'il est créé Ainsi, nous n' avons pas besoin de créer manuellement une instance de lit astrotypique Nous pouvons demander à Angular d' injecter l'instance pour nous. Mais pour créer réellement l'instance du client astrotypique, nous devons en informer Angular avec l'aide du fournisseur Laissez-moi vous montrer ce que je veux dire. Je vais ouvrir le point de configuration de l'application Ts, et ici nous avons déjà quelques fournisseurs. En plus de cela, je vais spécifier fournir un client ATT. Comme ça. Donc, ce que cela va faire, termes simples, nous disons : Hé, angular, chaque fois qu'un composant ou un service a besoin d'une ligne stodypique, assurez-vous qu'elle est fournie. C'est ce que cela signifie. Nous allons maintenant approfondir notre compréhension de ce qu'est l'injection de dépendances, modèle singleton, etc. dans le cours angulaire principal Mais pour le moment, j'espère que tu as une idée. En spécifiant le fournisseur, nous demandons à Angular de créer une instance de stodypic line, et en le spécifiant dans le constructeur, nous demandons à Angular d' injecter l'instance de next Je vais créer une méthode qui se chargera réellement de récupérer les données depuis le serveur Je vais l'appeler «   fetch pose », comme ça. Je vais dire observable A Donc, cette méthode renvoie essentiellement un observable qui émet un tableau de tout type d'éléments Encore une fois, nous allons approfondir ces concepts plus tard Mais pour l'instant, considérez cela comme quelque chose qui va générer des données pour nous. Et ici, je vais renvoyer ce point STP G A. Nous allons spécifier l'URL de l'API comme suit Le G est essentiellement la méthode du client traditionnel qui exécute une requête StdPgt à l'URL spécifiée, et nous attendons un tableau de n'importe quel type écrit Sauvegardons le fichier. Sauvegardons également ce fichier. Nous continuerons à partir de la prochaine conférence. 19. 0118 S'abonner aux données et se renseigner: OK, allons-y et remplissons les données dans l'interface utilisateur. Pour cela, je vais ouvrir le fichier post component point Ts. Actuellement, nous obtenons les données du composant parent avec une liaison bidirectionnelle. Donc, comme nous n'allons plus obtenir les données du composant parent, je vais m'en débarrasser, et cela devrait générer une erreur dans le composant parent. Alors, réglons-le rapidement. Je vais le supprimer d'ici. Et nous n'avons plus besoin de ces données dans le composant parent car nous les obtenons du serveur. Enregistrez le fichier. Revenons au composant post. Et ici, pour le moment, nous n'avons pas de constructeur. Permettez-moi d'en créer un car nous voulons injecter le service dans ce composant. privé du constructeur Service postal Cela a également automatiquement importé le service postal pour nous. Enregistrez le fichier. Avec cela, nous demandons à Angler d' injecter l'instance de service postal Ensuite, je vais utiliser l'une des méthodes de pêche appelée NG on que Gate soit l'un des crochets du cycle de vie des pêcheurs En gros, il est appelé une fois que Angler a initialisé les propriétés liées aux données de tous les composants Il s'agit généralement d'un endroit où nous initialisons données des composants ou même pour effectuer des tâches telles que la récupération de données depuis le serveur Dans ce cas, nous allons utiliser cette méthode pour obtenir les données à l'aide du service angulaire. Je vais donc parler de ce service de poste, et nous allons appeler la méthode que nous venons de créer fetch post point subscribe Je vais vous expliquer ce que nous faisons ici dans un instant. Et puis je vais dire pose. Ce point pose de l'utilisateur, destiné à remplir la propriété, est égal à pose Enregistrez le fichier. Lorsque vous appelez la méthode d'abonnement, je fais tout Shift F pour formater le code. Lorsque vous appelez la méthode subscribe, vous demandez à Angeler d'exécuter le SDDPRQuest et de vous donner les résultats lorsqu'il Si je reviens en arrière, vous pouvez considérer l' observable comme un flux de données qui envoie les données au fil du temps Imaginez-le comme un canal qui peut envoyer plusieurs valeurs, telles que des nombres ou des objets, ou toute autre donnée les unes après les autres. Et ces valeurs n' arrivent pas toutes en même temps. Ils arrivent dès qu'ils sont prêts, immédiatement ou plus tard. Et pour recevoir réellement les données d'un observable, vous devez vous y abonner Pensez à vous abonner comme à attacher un écouteur qui attend et réagit chaque fois que de nouvelles données arrivent dans Et lorsque vous vous abonnez, vous déciderez quoi faire de chaque donnée, au sens où elle est absorbable. Maintenant, vous avez peut-être une question. Pourquoi ne pouvons-nous pas simplement récupérer les données sans ce concept d' observable et d'abonnement Eh bien, les données peuvent mettre un certain temps à arriver. En attendant, nous voulons que notre application fonctionne également. Vous autorisez essentiellement l'application à continuer de s' exécuter pendant que nous attendons la réponse. Et une fois que les données sont prêtes, l'abonnement les gère sans bloquer l'interface utilisateur. Laissez-moi enregistrer le fichier et voir si notre application fonctionne toujours. OK. Pour le moment, je suppose que notre application n'est pas en cours d'exécution. Revenons en arrière et faisons NG Sv. Revenons au navigateur. Et ça a marché. J'espère que c'est logique. Je te verrai ensuite. 20. 0119 Directives personnalisées angulaires structurelles et directives d'atelier: Pour comprendre l'utilisation directe et l'angle, il est très important de comprendre ce qu' est un dôme ou un modèle d' objet documentaire. Le dôme est comme une carte qui représente l' ensemble du contenu d'une page Web de manière structurée. Eh bien, qu'est-ce que cela signifie ? Imaginez qu'il s'agit de votre code HTML. Lorsque le navigateur charge ce code HTML, il lit le fichier TML ligne par ligne et construit un dôme qui ressemble à ceci structure est similaire à celle du code HTML lui-même, le document étant le nœud parent, et le code STML est un nœud enfant, dont les nœuds enfants sont la tête et le corps Il suit cette structure arborescente, et les navigateurs créent généralement un dôme afin que JavaScript puisse réellement y accéder et le manipuler. JavaScript peut sélectionner, modifier, ajouter ou supprimer les nœuds du dôme. JavaScript ne transmet pas directement le HTML brut. Ils manipulent en fait le dôme pour obtenir les résultats souhaités ou pour obtenir la vue souhaitée. Voyons maintenant ce qu' est une directive en angulaire. Jetez un œil à ce code. Dans ce code, nous essayons de parcourir toute la liste des éléments et de les afficher sous forme de liste. En supposant qu'il s'agit de la liste, nous affichons essentiellement tous ces éléments sous forme de liste non ordonnée Maintenant, les navigateurs ne comprennent pas cette directive NG 4, c'est une directive spécifique à Anglo navigateur ne comprend que le HTML et ne peut exécuter que du JavaScript. Ainsi, lorsque nous créons un projet contenant ce code, Angular compile ce fichier et génère un code JavaScript équivalent pour que les navigateurs puissent le comprendre Ce JavaScript effectue essentiellement la même tâche à parcourir tous les éléments en boucle et à créer une liste d' éléments avec la balise Ai , puis à créer un élément de liste non ordonné et tous les éléments de liste à Lorsque ce code JavaScript est exécuté sur le navigateur, la structure du dôme qui en résulte peut ressembler à ceci, ce qui est équivalent à ce code STML Maintenant, étant donné que cette directive NG 4 manipule la structure du dôme, entre dans la catégorie des directives structurelles NG four est donc qualifié directive structurelle car il manipule la structure du dôme Et généralement, les directives structurelles commencent toujours par un astérisque, comme dans le cas de G quatre Parlons maintenant des directives d'attributs. Les directives d'attributs sont utilisées pour modifier l'apparence ou le comportement des éléments. Ils ne modifient pas la structure du dôme, mais affectent l'apparence ou le comportement de l' élément. Dans ce cas, nous utilisons le style NG. agit d'une directive angulaire qui applique dynamiquement le style CSS intégré à un élément Il s'attend à ce que les propriétés et valeurs CSS ou les styles s'appliquent à un objet . Dans ce cas, nous avons une condition dans laquelle nous vérifions si la propriété rouge du composant est définie sur vrai ou faux, et sur cette base, nous choisissons le rouge ou le bleu. Si Es red est défini sur true, nous choisirons la valeur rouge. S'il est faux, nous choisirons la valeur bleue. En construisant le projet et après avoir compilé ce fichier, le JavaScript qui en résulte peut ressembler à ceci Nous appelons simplement la méthode appelée update style, dans laquelle nous vérifions si la propriété ese red est définie sur true ou false, et sur cette base, nous remplissons la valeur de couleur en rouge ou en bleu Et cette méthode serait exécutée chaque fois qu'il y un changement dans la propriété ese red. Maintenant, il s'agit d'un code JavaScript approximatif. Ce n'est pas le code exact. Mais comme nous ne manipulons pas ajoutons ou ne supprimons pas d'éléments dans la structure du dôme, style G est un exemple de directive d'attribut Maintenant, dans certains cas, les connecteurs angulaires intégrés peuvent ne pas suffire Nous avons besoin d'une fonctionnalité différente. Dans ce cas, angular nous permet de créer nos propres directives. Jetons un coup d'œil à un exemple similaire. Dans ce cas, j'ai une directive personnalisée pour laquelle j'ai écrit mon propre code. Je vais vous montrer ce code dans un instant. Mais ce que nous essayons de faire ici, c'est que nous avons la balise DIV, et nous voulons afficher son contenu uniquement si l'utilisateur est connecté ou seulement après que l'utilisateur est authentifié Comme vous pouvez le voir, la directive commence par Astérix. Cela signifie qu'il s'agit d'une directive structurelle. Il va manipuler la structure du dôme. Maintenant, en supposant que la propriété de l'utilisateur connecté est définie sur true dans le composant, nous allons rendre ce texte particulier bienvenu utilisateur apprécié. Examinons maintenant le code de cette directive, App show if logged in, et voici à quoi cela pourrait ressembler. Nous pouvons simplement créer un autre fichier dactylographié avec ce code ou exécuter une commande rapide, et Angler créera ce fichier avec Donc, au départ, nous avons le décorateur de directives, qui indique à Angular qu'il s'agit d'une directive personnalisée, dont le nom est Appshow si vous êtes connecté Et à l'intérieur, nous avons cette section de code. Maintenant, ce code est une combinaison de deux choses différentes. Premièrement, nous avons la propriété appelée app show si vous êtes connecté avec le décorateur d'entrée, et deuxièmement, c'est également une méthode de définition pour cette Le décorateur d'entrée marque donc Appshow I logged in comme propriété d'entrée de la directive, ce qui lui permettra d' accepter une valeur provenant du modèle de composant dans lequel la directive est utilisée Dans ce cas, il acceptera toute valeur à laquelle nous attribuons une valeur d' intimidation enregistrée, vraie ou fausse. Ensuite, nous avons dit de définir l'affichage de l'application si vous êtes connecté comme si nous définissions une méthode, et cela définit un ensemble de méthodes pour la propriété d'affichage de l'application en cas de connexion. Cela signifie que chaque fois qu' une nouvelle valeur est attribuée à la directive avec vrai ou faux, cette méthode s'exécute avec cette valeur comme argument. Nous demandons également à angular d' injecter quelques dépendances. Afficher le conteneur f et la référence du modèle. En gros, chaque fois que vous appliquez un répertoire à un élément Stem spécifique, comme DIV dans ce cas, la référence du conteneur de vue est créée pour cet élément spécifique, et nous utilisons cet objet pour insérer le contenu. Dans ce cas, nous allons utiliser view container f pour insérer du contenu dans cette balise div. Et le template turf contient en fait la structure de contenu de la balise div, y compris tout code STML imbriqué Le modèle troof est une référence au contenu du div contenant cette directive Dans ce cas, le template turf contient essentiellement tout le contenu de cette balise div. Et comme vous pouvez le voir, dans cette méthode, après avoir vérifié que l'indicateur est connecté, et si c'est vrai, nous utilisons essentiellement view container pour remplir le contenu de la balise Dv, et nous le remplissons avec le contenu de la référence du modèle Et si ce n'est pas vrai, nous disons simplement de tout effacer, ce qui signifie ne rien montrer. Je suis presque sûr que cela peut sembler très déroutant. Lorsque nous examinerons un exemple de directive personnalisée dans les prochaines conférences, vous aurez certainement une meilleure idée. Examinons maintenant un exemple de directive d'attribut personnalisée. Et nous avons ici cette directive personnalisée appelée app Highlight. Et comme son nom l'indique, nous allons simplement surligner le texte de cet élément P. Et voici à quoi ressemblerait le code de directive personnalisé. Nous avons donc des auditeurs hôtes, qui écoutent les événements sur l'élément hôte Dans ce cas, il écoute les événements d'entrée et de sortie de la souris pour appliquer ou supprimer le surlignage Et pour appliquer réellement le style, nous demandons à Angler d'injecter quelques dépendances  : element ref et renderer two L'élément f fournira en fait une référence directe à l'élément dom, dans ce cas, la balise P, et le rendu 2 vous permet de manipuler le dom en toute sécurité Donc, dans cette méthode de surlignage, nous utilisons essentiellement un moteur de rendu pour définir ce style Elle a deux arguments. Le premier est la référence à l' élément, second est le style que nous voulions appliquer. Ensuite, nous allons améliorer notre application de publication sur Facebook en introduisant une directive personnalisée. De cette façon, tu comprendras mieux. Mais à titre de mission, je veux que vous expérimentiez l'une des intégrées existantes directives anglo intégrées existantes, au moins trois d'entre elles. J'espère que tu le feras. Je te verrai ensuite. 22. 0121 tuyaux dans des tuyaux intégrés angulaires: Dans Anglo, les tuyaux transforment les données d'entrée dans le format de sortie souhaité. En gros, ils prennent des données en entrée et en renvoient une version transformée. La meilleure façon de comprendre cela est de regarder un exemple. Voici quelques-uns des tuyaux intégrés à Anglo. Ici, nous utilisons les tubes en majuscules et en minuscules. Le tube majuscule est utilisé pour convertir la chaîne en majuscules et le tube minuscule est utilisé pour convertir la Utilisez le tube JSON, qui affiche un objet ou un tableau au format JSON afin qu'il soit lisible par l'utilisateur. Généralement, nous utilisons ce tube à des fins de test. Ensuite, nous avons le tube à tranches, qui extraira une partie d'un tableau ou d'une chaîne. Slice pipe est également un exemple de tube paramétré, ce qui signifie que le tube prend des arguments supplémentaires pour modifier son comportement La tranche est utilisée avec deux paramètres. Zéro est l'indice de départ et sept est l'indice final. De même, nous pouvons également afficher une partie d' un tableau à l'aide de slice pipe. Nous pouvons également combiner plusieurs canaux dans une seule expression, comme vous le voyez ici. Dans ce cas, nous essayons de combiner à la fois des tubes en majuscules et des tubes en tranches, et le résultat obtenu est une combinaison des deux Angular nous permet également de créer des tuyaux personnalisés. Dans ce cas, nous créons un tube personnalisé qui inversera la chaîne. Nous pouvons exécuter une commande angulaire pour créer le code squelette, et cette classe implémente ici la transformation de tube, ce qui nous permettra de fournir le comportement de la méthode de transformation. Cette méthode de transformation accepte un paramètre de type chaîne. Et dans cette méthode, nous utilisons une certaine logique pour inverser la chaîne. Et voici comment vous allez utiliser ce tube dans le modèle. En gros, le texte angulaire serait affiché à l'envers. Pour créer ce canal, c'est la commande que nous devons exécuter. Le moteur génère un tube inversé, ce qui créera le code squelette, après quoi nous pourrons fournir l'implémentation. Comme c'est très simple, je veux que vous preniez cela comme une mission pour créer ce tube personnalisé et le faire fonctionner d'une manière ou d'une autre. Dans le cours principal, nous aborderons certains des autres concepts liés aux tuyaux, tels que les tuyaux purs et impurs, les tuyaux asynchrones, les tuyaux multiparamètres, etc. Mais pour le moment, j'espère que vous avez une idée de ce que sont les pipes en anglais. Je te verrai ensuite. 23. 0122 Routing en chargement angulaire et paresseux: Dans cette conférence, nous allons comprendre ce que sont les itinéraires en anglais. Les itinéraires définiraient la manière dont l' application navigue entre les différentes vues ou composants en fonction de l'URL Comprenons-le en implémentant réellement des routes dans notre application. Pour le moment, c'est ainsi que notre application s'affiche. Nous affichons un message de bienvenue et nous affichons la pose. Je vais maintenant introduire un nouveau composant appelé Navigation et nous allons déplacer le code relatif à ce message dans le composant de navigation. De plus, nous allons également avoir quelques liens dans ce composant. Le premier lien indique «   pose », lequel a cliqué ? Nous allons essentiellement afficher ces articles, et le deuxième lien indique mon profil. Lequel a cliqué ? Nous affichons essentiellement le profil de l'utilisateur. Vous comprendrez mieux une fois que nous l'aurons implémentée. Je vais revenir à notre projet, et c'est notre composant parent le moment, nous ne faisons qu' afficher la pose. Dans le composant post, nous avons ce code que nous avons introduit plus tôt. Permettez-moi de copier cette section du code car nous voulons maintenant l'intégrer à un nouveau composant appelé Navigation. Ce composant est désormais dédié uniquement à la publication. Permettez-moi d'ouvrir un nouveau terminal et de créer un nouveau composant appelé NG Generate Navigation. Nous devons dire à Angler ce que nous voulons générer. C'est un composant. Angler a donc créé un nouveau dossier contenant des fichiers spécifiques aux composants En plus de cela, je vais également générer un autre composant appelé Profile. Dans ce composant de navigation, nous allons déplacer le code que je viens de copier. Et dans son fichier dactylographié, nous devons également introduire ce direct Enregistrez le fichier. Dans le composant parent, nous n'allons plus afficher le message, nous allons nous en débarrasser , mais plutôt afficher ce composant de navigation. Je vais copier ce sélecteur. J'espère que tu pourras me suivre. Dans le fichier dactylographié du composant de l'application, nous devons importer ce composant Nous n'avons plus besoin de ce composant de publication Nous allons le remplacer par un composant de navigation. Enregistrez le fichier. Dans le cadre du composant de navigation, nous allons également introduire quelques liens. Le premier dit pose et le second dit Mon profil. Revenons au navigateur et voyons comment l'application s'affiche. Donc, pour le moment, c'est ainsi que le rendu est effectué, ce qui, bien sûr, n' a pas beaucoup de sens. Tout aurait du sens une fois que nous aurons introduit le routage. Localisez ce fichier appelé app routes point Ts file. Si vous n'avez pas ce fichier, vous devez le créer vous-même manuellement. Et une fois que vous aurez fait cela, nous allons introduire ce que l'on appelle des routes sous la forme d'un tableau. Ajoutons un élément. Je vais dire chemin comme pose, et nous allons l' associer à un composant. Dans ce cas, chaque fois que quelqu' un visite une URL avec pose comme chemin, nous voulons rendre le composant pose. De même, nous allons également introduire une autre route pour le profil, qui va rendre le composant du profil. Enregistrez le fichier. Et juste pour vous faire savoir, dans le fichier point Ts principal, nous sommes en train de démarrer l'application C'est le point de départ de notre candidature. Anglo utilise cette application bootstrap pour initialiser l'application et afficher le composant d'application, qui est le composant racine ou le composant parent qui affiche Cela correspond donc au composant point HTML de l'application, qui affiche actuellement ce composant que nous venons de créer Navigation. Et nous fournissons également une configuration à angular, qui aurait les fournisseurs ou toute configuration globale. Jetons un coup d'œil à ce qu'il y a dedans. Le routeur du fournisseur est donc une fonction d'assistance fournie par Angular pour configurer le routeur pour l'application Et il accepte un large éventail de routes. En gros, votre configuration de routage définit toutes les dépendances requises pour le routage dans l'application. Tout cela est pris en charge automatiquement. Je ne les ai jamais créés moi-même manuellement, n'est-ce pas ? Lorsque nous avons créé le projet lui-même, j'ai également demandé à Angular de configurer les itinéraires, et il l'a fait pour moi. Si vous configurez des itinéraires manuellement, en plus de créer le fichier de routes, vous devez également le spécifier. Nous avons donc configuré nos itinéraires, et c'est exactement le chemin que nous voulons également utiliser dans les liens. Ici, je vais parler du lien du routeur. Ça va être le cas, devinez quoi ? Pose, celle-ci, et celle-ci va être profilée. Chaque fois que nous saisissons une URL, avec ce chemin, angle essaie de rendre le composant de profil. Et si c'est avec ce chemin, il essaiera de rendre le composant post. Laissez-moi enregistrer le fichier. Mais comme nous utilisons l'encre du routeur ici, nous devons importer le module du routeur dans ce composant. Donc, dans le fichier dactylographié de navigation, introduisons également le module externe, sauvegardons le Et dans notre composant parent, nous allons introduire quelque chose appelé Router Outlet. sortie du routeur agit comme un espace réservé dans votre application où le contenu des composants routés est chargé dynamiquement C'est donc là qu' Angler essaierait de rendre les composants routés. Et puisque nous l'utilisons, nous devons saisir le module dans le fichier dactylographié du composant de l'application. Enregistrez le fichier. Nous devrions être en mesure de voir ce composant appelé navigation et ce composant affiche le message de bienvenue, ainsi que de rendre ces deux liens pour lesquels nous avons configuré des itinéraires. D'ailleurs, nous n'avons rien renseigné dans le composant de profil. Faisons-le rapidement. Je pense que celui par défaut fonctionne pour le moment. Sauvegardons le fichier et revenons en arrière pour voir comment l' application s'affiche. Voici donc comment fonctionne le rendu de notre application. Si je clique sur la pose, le composant de pose est affiché et si je clique sur mon profil, le composant de profil est affiché. C'est ainsi que fonctionne réellement le routage. Nous approfondirons ces concepts plus tard lorsque nous aborderons le cours principal Et bien sûr, notre application n'est pas vraiment attrayante visuellement pour le moment. C'est parce que nous n'avons pas encore ajouté ce style. Laissez-moi faire exactement cela et revenons-en à vous. OK, j'ai introduit le style pour notre application. Une partie du style a été intégrée au composant racine et une partie au composant de navigation. Et en fin de compte, c'est ainsi que notre application s'affiche. Notez que lorsque je clique sur l'un de ces liens, par exemple, si je clique sur mon profil, l'URL qui en résulte contient le profil comme chemin, Angler de rendre le composant du profil De plus, Angler prend en charge ce que l'on appelle le chargement différé, ce qui signifie qu'il ne télécharge tous les composants qui ont toujours existé Cela téléchargerait les composants absolument nécessaires à la vue actuelle, ce qui signifie que lorsque nous interagissons avec l'application, nouveaux composants seraient téléchargés à la demande. Cela améliorera les performances le temps de chargement initial et donc l' expérience client. Les composants ne seront donc chargés que lorsque l'itinéraire est également parcouru.