Cours sur les accidents angulaires - Application de tâche construite

1. Introduction: Bonjour à tous et bienvenue dans ce cours intensif sur les angles ici sur Skillshare. Dans le cadre de ce cours, nous travaillerons avec Angular et le solide de base. Ensuite, vous découvrirez toutes les principales fonctionnalités d' Angular et de son support. Donc, par cela, vous allez réellement installer l'angulaire et construire quelque chose de bien varié. Les fonctionnalités avec lesquelles nous travaillerons à ces fins seraient angulaires, CLI, composants, services et routage, ainsi que le module http et bien plus encore. Maintenant, qu'allons-nous construire grâce à ces scores ? Eh bien, ce cours, en des fonctionnalités que nous allons explorer, nous allons également construire un projet réel. Le projet dans lequel nous allons créer une application de tâches, cette application que vous pouvez voir ici à l'écran, semble assez simple, mais elle prend en charge toutes les fonctionnalités principales que nous allons une mise en page conservée en effectuant également le routage pour plusieurs pages. Nous utiliserons également le module HTTP pour extraire les données du serveur et les afficher sur un écran. En outre, nous travaillerons avec nos données comme d' une tâche complète ou incomplète. Maintenant, qui suis-je ? Eh bien, je m'appelle Stefano Matter , et j'ai plus de sept ans d' expérience dans le développement Web. En plus de cela, je suis également professeur en ligne. À côté de ce cours Skillshare, vous pouvez également me retrouver sur YouTube. Sur YouTube, vous pouvez trouver ma chaîne américaine où je publie chaque semaine de nouveaux tutoriels sur le développement Web. Alors n'oubliez pas de vérifier cela et y abonner également à ma chaîne. Maintenant, sur Skillshare, à côté de ce cours, vous pouvez trouver de nombreux autres cours que j'ai également. Les cours que vous pouvez trouver porteront sur différentes technologies. Il existe donc un autre cours sur Angular, mais si vous souhaitez regarder les cours différentes technologies comme Bootstrap, JS, JavaScript. Vous pouvez les trouver aussi. Maintenant, je vous souhaite à nouveau la bienvenue dans ce cours. Alors, nous allons coder. 2. Installation angulaire: Bonjour encore une fois et bienvenue à la première leçon officielle de ce cours. Dans cette première leçon, nous allons passer en revue quelques notions de base d'Angular. Nous allons installer l'Angular. Nous verrons ce qu'est l'outil de terminal angulaire et nous allons également créer notre application et exécuter cette application. Dans la leçon suivante, nous verrons à quoi sert Angular exactement ? Et nous allons passer en revue certaines des fonctionnalités intéressantes d'Angular. Ici, sur mon écran, vous consultez actuellement le site officiel d' Angular et de nombreuses entrées de données. Sur ce site Web, vous pouvez trouver tout ce dont vous avez besoin sur Angular, vous pouvez voir certaines des fonctionnalités intéressantes de ce singulier, oui. Et vous pouvez également voir sa propre documentation complète. Les technologies de détection des risques angulaires sont une vaste technologie, il est donc naturel que la documentation soit également volumineuse. Dans le menu de gauche, nous pouvons cliquer sur cette route et cliquer sur cette configuration, ouvrir cette page et faire défiler un peu vers le bas. Ici, la première chose que nous pouvons voir et faire est d'installer l'Angular CLI. En installant cette interface de ligne de commande unique, nous installerons également la dernière version stable angulaire. Cette CLI est vraiment importante. Nous l'utiliserons pour créer notre application. Nous l'utiliserons également pour créer un tas de fonctionnalités différentes prises en charge par Angular. Et nous l'utiliserons également pour exécuter notre application. Maintenant, pour installer l'interface de ligne de commande Angular et Angular, nous devons copier ce tableau de bord npm install sur Angular Slash CLI. Encore une chose avant d'installer angular, assurez-vous également d'avoir installé la dernière version de node.js. Eh bien, dernière version recommandée. L'importance de ce nœud ne réside pas dans Angular, mais dans son propre outil appelé npm. Npm est le gestionnaire de paquets qui nous permettra d'installer un tas de modules différents comme Angular. Et dans le script Angular, vous pouvez déjà voir NPM ici, ce qui signifie que nous l'utilisons déjà et PM. Ainsi, une fois que Node.js est installé, il installera également ce NPM automatiquement. À ce stade, vous pouvez simplement copier cette commande ici. Maintenant, dans votre terminal, vous pouvez coller cette commande et appuyer sur Entrée. Cette commande installera automatiquement Angular et Angular CLI pour nous globalement sur notre machine afin que nous puissions l'utiliser. Une fois que cela est installé, nous pouvons utiliser EMG comme commande ici. Et g provient de cette interface de ligne de commande angulaire. À côté de ces send g, j'utiliserai dash, dash, help, un drapeau ici pour présenter toutes les fonctions d' aide et d'assistance d'Angular pour nous. Ici, nous pouvons voir un tas d' options et de commandes différentes que nous pouvons faire. Par exemple, la facture énergétique construira réellement notre projet et redéployée pourra réellement déployer notre projet. Il existe des commandes pour que le générateur génère des fichiers spécifiques et les exécute également pour exécuter ou servir notre projet. Maintenant, voici l'outil Angular CLI que j'ai déjà mentionné. L'outil lui-même est très important pour nous les développeurs d' Angular, car nous l'utilisons au quotidien. Alors laissez-moi vous montrer déjà une chose intéressante que nous pouvons faire avec ces outils CLI. Donc, la commande que je vais faire est N G nu, ce moteur, vous devez avoir un nom à côté. Et ce que cela fera pour créer un nouvel espace de travail angulaire pour nous. Eh bien, la nouvelle application Angular. Donc, tout d'abord, je vais utiliser clear pour vider ma console afin que vous puissiez tout voir clairement. Maintenant, utilisons ensemble cette commande. Je perdrai mg, puis Nouveau, et je transmettrai le nom de mon espace de travail. Eh bien, le nom de mon application. Nous allons créer cette application de tâches. Ensuite, je nommerai mon application, Task Dash App. Maintenant, cela devrait générer notre application. Mais avant cela, il nous posera également quelques questions. La première serait souhaitez-vous ajouter un routage angulaire ? Angular est une bibliothèque qui prend également en charge le routage. Je vais donc y aller, oui, car nous travaillerons également avec le routage dans ce cours. La prochaine étape est de choisir format de feuille de style que nous aimerions utiliser. Angular est fourni par défaut avec CSS, SCSS, Sass ou Less. Je vais simplement choisir ici un CSS pour plus d'applications par défaut que nous pouvons créer. À ce stade, angular créera tous les fichiers nécessaires installés, tous les packages dont l'application a besoin. Une fois l'application installée, nous pouvons commencer à travailler avec elle. Vous pouvez également voir un tas d'avertissements sur mon écran, mais ce n'est pas forcément un problème. Ce ne sont que des avertissements. Et peut-être que pour vous, cela ne montre même pas que cela dépend de notre espace de travail et que cela dépend également d'une machine. Donc, encore une fois, je vais vider mon terminal ici. La prochaine chose que je vais faire, maintenant que j'ai mon application, je pourrais utiliser cd puis le nom de la tâche de l'application. Ce faisant, je vais me déplacer directement dans cet espace de travail Angular. À l'intérieur de cet espace de travail angulaire, nous pouvions réellement mener à bien notre projet. Pour exécuter le projet. Je vous ai déjà montré une commande qui est le sérum NG. Nous pouvons donc simplement exécuter ce projet sur un hôte local. Ensuite, en descendant, vous servez. Nous pouvons également utiliser dash, dash Open ou simplement dash O pour ouvrir automatiquement notre application sur nos navigateurs préférés. C'est exactement ce que je vais faire. Maintenant, Engler, nous allons récupérer notre projet, tout compiler ensemble, et tout cela au hasard pour nous. Attendons donc un peu. Une fois cela terminé, nous devrions voir cette application factice par défaut qui a été construite par Angular pour nous. Angular le fait automatiquement et possède déjà des coordonnées. L'exemple de code ne contient que les liens utiles qui pourraient nous être utiles. Vous pouvez voir les liens où vous pouvez apprendre Angular, ainsi que la documentation de la CLI et un tas de fonctionnalités différentes d'Angler. Vous pouvez également voir les fonctionnalités prises en charge par Angular. C'est comme créer un nouveau composant, dont nous parlerons un peu plus tard. Mais ce code de départ n'est pas du tout important pour nous. Mais comme je l'ai déjà mentionné, laissez-moi vous montrer juste à côté de mon terminal, j'en ai ouvert un autre parce que c'est vraiment utile pour moi d' avoir deux terminaux ouverts. Vous apprendrez à suivre ce cours. Pourquoi ? Parce que nous allons également générer et créer nouveaux composants ou services que Angler possède et prend en charge. Et pour cela, nous continuerons fonctionner nos applications sur le terminal de gauche, tandis que sur le terminal de droite, nous pourrons utiliser pour générer ces fonctionnalités. Mais voici ce que je vais faire, j'utiliserai du code pour ouvrir mon application de tâches dans mon code Visual Studio. Alors, c'est ici. C'est un espace de travail angulaire officiel. Et sur le côté gauche , nous pouvons voir, eh bien, tous les fichiers que possède Angler pour le moment. Dans la vidéo suivante, nous en apprendrons plus sur l'Angular et sur ce que chacun de ces fichiers nous apporte. Passons donc immédiatement à cela. 3. Qu'est-ce que l'angulaire: Alors, qu'est-ce qu'Angular en fait ? Eh bien, Angular, en termes simples, est un framework JavaScript utilisé pour créer des applications d' une seule page. Que me donne cette application d'une seule page ? Eh bien, ces applications seraient des applications qui ont un routage et des pages différentes sans avoir à recharger ces pages. Ainsi, par exemple, sur le site officiel d' Angular, lorsque je passe à la page des fonctionnalités, vous pouvez voir que la page a été modifiée mais qu'elle ne l'a pas actualisée du tout. Et c'est cette application d' une seule page. Tout est présenté sur une seule page, mais cela permet de restituer le contenu nécessaire à une page spécifique. Maintenant, à Bangalore, il existe de nombreux frameworks JavaScript différents que vous pouvez utiliser. Certains des plus populaires après Angular, React et Vue. Alors, qu'est-ce qui différencie et tache le singulier de ceux qui ont une vision réactive ? Eh bien, Angular est un vaste framework dans sa propre base de code. Il prendra également en charge le routage et même le module HTTP lui-même. En outre, nombreuses responsabilités Seibel d' Angular sont déjà intégrées à Angular. Et il existe même un JS de panne de lumière de bibliothèque tierce qui est fourni par défaut avec Angular. Donc, en vous endettant, vous pouvez voir que le doigt est vraiment vaste et qu'il y a beaucoup à apprendre ici. Et vous serez capable de créer des applications assez étonnantes dès le départ avec Angular. Maintenant qu'il s'agit d'un cadre si vaste, il est évidemment beaucoup plus difficile de l'apprendre. Mais parlons un peu de la popularité d'Angular. D'où vient Angular ? Tout d'abord, Angular a été développé par Google lui-même, et Google travaille toujours sur Angular quotidiennement pour l' améliorer dans un an ou deux ans à venir. Tous les six à neuf mois, vous pouvez vous attendre à une mise à jour majeure d'Angular, qui déplacera sa propre version. Nous sommes actuellement sur la version 14. Et comme je l'ai dit, l'Angleterre est juste en haut à côté de la vue. Et pourtant, en tant que frameworks JavaScript les plus populaires sur le marché. Maintenant, avant de nous plonger dans le code, je souhaite également vous montrer certains des projets sympas qui ont été construits avec Angular. Par exemple, Lift, en tant qu'application , a été créée avec Angular , Tinder et Snapchat également. Il existe de nombreux projets différents qui ont été construits avec Angular. Beaucoup d'entre eux y ont eu beaucoup de succès. Ainsi, vous pouvez voir que vous pouvez réellement créer ce que vous souhaitez avec Angular. C'est donc une nouveauté de décider que vous souhaitez créer une petite application que nous allons faire, directement dans ce cours, ou une application plus grande comme celles-ci. Revenons maintenant à notre code. Parlons d'abord un peu de l'angulaire et du code ici également. La première chose que je dois vous montrer sont ces modules de nœuds. Les modules de ce nœud seront automatiquement installés lorsque nous créerons notre application angulaire. Pour ces modules de nœuds, il est très important d' avoir ce package, le fichier point json et le fichier package.json dans cette spécification et ce fichier JSON, nous pouvons voir quelques informations simples sur notre application, comme le nom et la version. Nous pouvons voir différents scripts ou commandes que nous pouvons exécuter, comme NG serve pour exécuter notre application. Et nous pouvons voir différentes dépendances qui ont été automatiquement installées avec Angular. Vous pouvez voir qu' Angular possède un noyau, un module qui est évidemment installé ici, et ce sont les principales fonctionnalités d'Angular, le lapin. fonctionnalités assez différentes, telles que des animations, des formulaires, un routeur, etc. Et je l'ai aussi mentionné, mais l'adage JS en tant que bibliothèque, même s'il s'agit d'une bibliothèque tierce, pas d'une bibliothèque angulaire sera installée ici car Angular est très utilisé sur cette bibliothèque JS en panne. Maintenant, si vous souhaitez modifier la configuration de votre application Angular, vous pouvez toujours ouvrir ce fichier Angular.js JSON. Ici, vous verrez, enfin, le schéma complet de votre projet. En fait, vous pouvez voir le nom du projet et son schéma complet. Ainsi, par exemple, si vous souhaitez utiliser certains styles externes, comme l'importation de la bibliothèque Bootstrap. Eh bien, vous pouvez le faire ici, ou même Bootstrap JavaScript. Vous pouvez le faire dans un script ici, ici vous pouvez également voir différentes configurations pour le projet angulaire, comme la production elle-même. Vous pouvez configurer vos propres configurations ici. Maintenant, il ne s'agit que de la configuration de l'application Angular. Fermons ces fichiers et allons dans ce dossier SRC, le dossier source. Dans ce dossier, la première chose qui est vraiment importante pour nous est ce fichier main.js. Cela signifie que p est un fichier. Nous allons récupérer le module principal d' Angular et Bootstrap. Le module principal de l'application Angular est généralement ce module d'application, que vous verrez bientôt. Dans la vidéo suivante, nous travaillerons davantage avec des modules. Angular utilise réellement ces modules et vous verrez comment il s'y prend à travers ce cours. Mais dans ce fichier, angular, nous allons récupérer ce module et exécuter l'application en fonction de ce module. Il est donc très important que tout ce que vous avez dans votre application. doit être important dans ce fichier de module d'application, afin que l'application puisse réellement le connaître. Maintenant, ici, nous avons également styles.css, qui est notre style global. Nous y reviendrons un peu plus tard et indexerons également les points HTML. Il s'agit de ce fichier HTML qui sera toujours restitué. Il s'agit de cette application d'une page et d'une seule page. Donc, ici, nous pouvons voir cette approche d'itinéraire approuvée et par cette application lorsque vous l'itinéraire actuel que nous examinons actuellement. Et en configurant correctement nos itinéraires, nous pourrons souder, présenter un contenu différent pour un itinéraire spécifique. C'est ainsi que la magie opère. C'est pourquoi nous n'avons pas besoin de rafraîchir la page. Mais nous pourrons nous déplacer d' un itinéraire à l'autre, d'une page à l'autre, et le contenu sera automatiquement restitué. Maintenant, ici, nous pouvons avoir différents environnements que nous souhaitons mettre en place, comme la production ou simplement notre propre environnement de développement normal. De plus, nous pourrions avoir nos propres actifs ici, tels que des images , des polices, etc. Et nous pourrions avoir, eh bien, l'application réelle, cette application sexuelle. Eh bien, il y a pas mal de fichiers ici. Commençons tous par le fichier principal, comme cette application, ce module que P S bar. Alors, tout d'abord, pourquoi ? Eh bien, Peers est une extension pour un TypeScript. Et angulaire par défaut, utilise le TypeScript dans l'ensemble de l'application. Il est donc très important que vous connaissiez au moins les bases de TypeScript pour travailler réellement avec Angular. Mais revenons à ce fichier de module d'application. Ici, nous pouvons voir ce décorateur du module NG. En utilisant ce module d'énergie, nous disons que ce fichier sera essentiellement utilisé comme un module. Et comme il s'agit de notre module principal pour notre application, notre module d' intégré devrait avoir toutes les entrées nécessaires. Par exemple, notre composant d'application, qui était le premier composant que vous avez déjà vu dans une vidéo précédente, cette première page créée par défaut à partir d'Angular. Il existe également un module de navigateur qui propose de nombreux utilitaires. Et sans elle, nous ne pouvons pas coder via l'application Angular. Et il existe également un module de sortie, qui est le module que nous avons créé sur notre route. Vous souvenez-vous qu'on nous a demandé si nous souhaitions utiliser le routage angulaire et que nous avons sélectionné oui par cette commande lorsque nous avons généré notre application ? routage angulaire et que nous avons sélectionné Eh bien, cela a exactement créé ce module de routage et il a automatiquement importé pour nous ici. Maintenant, vous pouvez voir ici que les composants doivent être importants dans les déclarations. Les modules doivent être importants pour être importés lors des importations, il existe des fournisseurs tels que des services et partie bootstrap représente ce que l'application doit réellement exécuter. Et pour nous, c'est le composant AB, notre composant de départ. Ouvrons donc ces composants de départ. Ouvrons le fichier HTML. Et voici en fait l'ensemble du code que nous pouvons voir actuellement sur notre écran. reviens rapidement sur mon écran. C'est exactement ce code. Maintenant, ce code n'est pas tellement important pour que nous puissions réellement le récupérer. Et utilisons le tag H1 ici, et disons bonjour tout le monde. En faisant cela, je pourrais ouvrir mon hébergeur local et nous pouvons voir que le contenu n'est plus qu'un Hello World. Maintenant, pour que cela fonctionne et recharge automatiquement notre application, vous devez toujours faire fonctionner ces hôtes locaux avec cette commande in deserve. Pour en revenir à mon code maintenant, je peux voir qu' à côté de ce fichier HTML, je peux voir le fichier CSS, cette spécification, ce fichier ts et ce fichier ts. Il s'agit de tous les fichiers qui appartiennent à un seul composant. Habituellement, lorsque nous créons un composant, nous aurons quatre fichiers pour ce composant. Au lieu de coder du HTML, du CSS et du TypeScript ensemble, Angular les divisera en différents fichiers. Donc, en visitant le fichier point ts du composant point de l'application, eh bien, la configuration de ce composant se produit réellement. Chaque composant aura son propre T ainsi qu'un fichier TypeScript. Et il y aura ce décorateur de composants à l'intérieur. Nous aurons un sélecteur. Nous sommes triviaux, eh bien, nous pouvons l'utiliser pour sélectionner la composante dette et le montrer avec du son. Par exemple, le sélecteur ici est App Route. Et si vous vous en souvenez, dans notre fichier index.html, nous utilisons ce composant ici même en tant que composant de route d'application. Maintenant, à côté de ce sélecteur ou de ce week-end, spécifiez le modèle et le style de notre composant, et ce seront nos fichiers HTML et CSS. Donc, en un mot, il s'agit des composants pour l'instant, nous travaillerons avec ceux-ci un peu plus tard. La prochaine chose à faire est cette spécification de point qui est un fichier ts, fichiers de spécification dans Angular. Eh bien, ils sont utilisés pour les tests. Donc, si vous devez écrire un test automatique, vous le ferez bien ici, dans ses propres fichiers de spécifications. Et la dernière chose que nous n'avons pas réellement vérifiée est ce module de routage d'applications. Ces modules de routage séparés, nous utiliserons simplement ce décorateur de module d' énergie pour configurer le module. Vous savez déjà que c'est important dans notre module d'application. Notre application connaît donc réellement ce module. Et vous pouvez voir ici la configuration de l'itinéraire, que nous apprendrons plus à ce sujet plus tard. Mais ces routes doivent être transmises dans un module de routeur depuis Angular. Ainsi, l'application Angular pourrait réellement connaître ces itinéraires. Maintenant, à côté de ces fonctionnalités telles que les composants du module, nombreuses fonctionnalités différentes Angular possède et prend en charge de nombreuses fonctionnalités différentes, telles que les services, les canaux, les directives, etc. Mais avant de terminer cette vidéo, revenons à notre style CSS ici. Ici, je vais styliser mon application de manière globale. Par exemple, je vais récupérer tous mes éléments sur mon application et mettre le remplissage sur ceux qui doivent être, par exemple, 0 et aussi la marge pour 0. À côté de la mort ou de l'enlèvement de mon corps. Enfin, définissez la famille de polices à utiliser comme famille de polices Courier New. Et je vais également définir la couleur de ma police sur 333333. C'est ça Maintenant, en voyant mon application, nous pouvons voir que notre Hello World est une police indifférente. Nous pouvons également constater qu'il n'y a beaucoup d'espace ici en haut et à gauche, et nous sommes prêts à démarrer notre application. Dans la vidéo suivante, nous en apprendrons davantage sur les modules. L'une des principales caractéristiques d'Angular. 4. Modules: Nous avons déjà parlé des modules, mais je voudrais en dire plus. Nous sommes également en mesure de diviser nos modules en modules racines ou en modules de fonctionnalités. Le module écrit serait nos principaux modules que nous pourrions avoir pour l'application, comme ce module d'application. Mais les futurs modules seraient des modules spécifiques qui seront utilisés pour un futur spécifique de notre application. Supposons que votre application prenne en charge l'authentification et l'authentification des données puisse comporter de nombreuses pages différentes, telles que la connexion ou la connexion. Peut-être réinitialisez votre mot de passe. Et petit. Avec un grand nombre de ces pages, de nombreuses fonctionnalités seront également disponibles. Il est donc naturel de séparer cette indication relative étrange en tant que fonctionnalité et de créer le futur module pour celle-ci. Cela signifie que tous les composants que nous aurons n'ont pas besoin de les importer dans notre module d'application ici, mais nous pourrions les importer dans notre futur module que nous pourrions créer. Néanmoins, notre module d'application devrait être au courant de ces informations. Nous pourrions donc simplement importer ce module de fonctionnalités dans le module SAP et l'ensemble de l'application fonctionnera toujours correctement. Un cas d'utilisation intéressant de ces itinéraires ou de futurs modules est que nous pouvons le voir lorsque nous ouvrons ce module de routage d'applications. Dans ce module de routage séparé, nous pouvons voir ce mot clé pour root. Eh bien, une méthode appelle la route. À cette méthode, nous transmettons nos itinéraires, ce qui signifie que ces itinéraires sont les routes principales de la racine de notre application. Eh bien, les principales voies pour notre application pour revenir à ce futur d'authentification, étant donné que cette fonctionnalité d'authentification aura ses propres pages et aussi son propre futur module, c'est tout à fait naturel pour créer ses propres itinéraires futurs que nous pourrons utiliser. Un cas d'utilisation vraiment cool de ces futurs modules. Eh bien, s'agit-il d' un module partagé dans Angular ? En tant que développeurs, nous créons généralement ce module partagé où nous avons tous nos composants, services et tuyaux, par exemple , bien utilisés, partagés et largement utilisés tout au long de notre application. Donc, ici, je vais maintenant créer mon module partagé. Et c'est encore une fois, nous utiliserons à nouveau l'outil CLI pour cela. Donc pour cela, on perd dans G, G pour generate, M pour module. Ensuite, je devrais utiliser le nom de l'un de mes modules, qui sera partagé. Ici, nous pouvons voir que le module a été créé pour nous. Pour en revenir à mon application sur notre gauche, j'aurai ici un dossier partagé. Maintenant, à l'intérieur de ce dossier partagé, je peux voir que je partage ce module, ce fichier ts. Nous pouvons voir que ce module partagé contient moins de code que notre module d'application car il n'est pas si important pour ce module partagé d'avoir tout ce code de départ. Il s'agit du premier module de fonctionnalités que nous avons. Et ce module est en fait utilisé pour les fonctionnalités partagées que nous pourrions avoir. Par exemple, lors de la prochaine conférence, nous allons créer notre barre supérieure pour notre application. Au lieu de créer cette barre supérieure sur toutes nos pages, nous allons créer notre composant partagé d'une barre supérieure. Par conséquent, nous allons importer ce composant partagé à l'intérieur de ce module partagé et également l'exporter. Notre application pourrait donc être au courant. Par la dette, nous pouvons utiliser ce composant de la barre supérieure où nous le souhaitons, et nous pouvons toujours l' avoir sur notre écran sans le réutiliser encore et encore. Encore une fois, ce module partagé nous est vraiment utile car il peut toujours contenir toutes nos fonctionnalités partagées que nous pourrions avoir, comme différents composants, services ou tuyaux, etc. Maintenant que j'ai mentionné ce haut à propos d'un composant, passons à la vidéo suivante où je vais parler plus détail des composants et créer ensemble cette barre supérieure. 5. Composants: Maintenant, les deux modules suivants, les composants sont également une caractéristique très importante d'Angular. Sans composants, nous n'aurions aucune page et même aucun contenu sur notre écran . Dans cette vidéo, je vais vous montrer comment créer un composant dans Angular. Le composant que je souhaite créer est le composant de la barre supérieure que nous pouvons utiliser. Les composants de la barre supérieure doivent être présentés sur toutes nos pages que nous pourrions avoir sur notre application. Il serait donc bon de créer une sorte de composants réutilisables. Eh bien, tous les composants Angular sont en fait entièrement réutilisables. Mais pour nous, ici, nous allons aller plus loin et avons créé ce composant de barre supérieure pour qu'il soit intégré à notre module partagé. De cette façon, nous indiquerons que le composant de la barre supérieure est un composant partagé et qu'il n'appartient à aucune page spécifique. Donc, pour créer ce composant de barre supérieure dans mon terminal en utilisant l'outil CLI d'Angular. Encore une fois, nous utiliserons la commande N, G, puis G pour générer, voir pour le composant. Et je vais générer ce composant dans un dossier partagé, qui est notre module slash top bar. Maintenant, dans mon éditeur de code, je peux ouvrir ce module partagé. Nous allons partager le dossier, puis la barre supérieure. Et ici, je peux voir quatre fichiers différents. Il existe du HTML, du CSS, TypeScript et également un fichier de test pour ce composant. J'ai déjà mentionné au début que chaque composant est généralement accompagné de quatre fichiers. Ces quatre fichiers constitueront en fait ce seul composant. Nous avons donc divisé notre HTML, notre CSS et notre TypeScript, afin de ne pas tout écrire dans un seul fichier. Il peut s'agir d'un dossier assez long. Ainsi, dans ce composant de la barre supérieure, Angular, une fois qu'il génère un composant de dette, il ajoute également ce type de contenu fictif pour ce composant. Faisons donc en sorte de présenter réellement ce composant sur notre écran. Donc, en entrant dans le fichier TypeScript de la barre supérieure, je peux voir le sélecteur de la barre supérieure f dash, ce qui signifie que dans le composant point de mon application où j'ai, où j'ai ce Hello World, je vais supprimer ce Hello World maintenant, et je vais ajouter un élément HTML5 de la barre supérieure f, f du tableau de bord. Et cela devrait en fait présenter notre composant de barre supérieure. Mais ici, nous avons une erreur. De plus, si nous ouvrions notre hôte local, cette même erreur sera visible sur notre hôte local. C'est une bonne chose car Angular est beaucoup plus facile à déboguer de cette façon. La raison pour laquelle nous avons ce centre est que notre composant d'application ne connaît pas la barre supérieure de l'application. Et la raison pour laquelle il ne sait pas, eh bien, cette barre supérieure de l'application appartient à ce module de partage. Donc, à l'intérieur de ce module partagé dans le tableau des déclarations, je peux trouver ce composant de barre supérieure. Mais si je voulais accéder à mon fichier point txt du module point de l'application, il n'y a pas de tels composants, c'est juste un composant AB. Alors, que devons-nous faire ici ? Eh bien, nous devrions importer ce composant de la barre supérieure dans notre module d'application afin de pouvoir l'utiliser via les composants de notre module d'application que nous pourrions avoir. Mais comme nous avons ce module partagé, à partir de ce module partagé, je vais simplement exporter. Je vais donc toucher le tableau des exportations américaines et je peux entendre au-delà de ce qu'ils souhaitent exporter. Pour moi, cela peut être un élément de la barre supérieure. Maintenant, au lieu d'importer principal composant de ma batterie dans le module de mon application, je peux simplement importer mon module de partage ici. De cette façon, je vais importer le module partagé et tout ce qui est exporté à partir de ce module partagé. Et avec cela, nous corrigeons simplement cette erreur, qui signifie que nous utilisons maintenant la barre supérieure de notre application dans notre fichier HTML point du composant point de l'application, en vérifiant mon hôte local. heure actuelle, je peux voir le texte des œuvres de la barre supérieure ici, ce qui signifie que le composant est réellement présenté sur mon écran dans le contenu de ce composant est une œuvre de la barre supérieure. Je parle de ce contenu. Créons-en ici. Donc, ici, je vais supprimer ce paragraphe et ajouter un div avec la classe de la barre supérieure. Cette classe sera utilisée ultérieurement pour le style. Maintenant, dans cette barre supérieure, vous pouvez entendre deux sections. La première section peut être une section de logo. La deuxième section peut être une section de navigation. Maintenant que nous avons ces deux sections dans ma section logo, je vais, eh bien, je n'utiliserai aucune image pour un logo, ou ils utiliseront simplement H2, qui indiquera les tâches. Alors, occupez-vous. Utilisons donc un talon singulier ici. Maintenant, pour ma navigation ici, je vais créer une navigation avec une liste non ordonnée. Ensuite, le premier élément de la liste aura une balise d'ancrage. Cette référence H peut conduire à un hachage. Pour l'instant, vous verrez plus tard comment effectuer un routage correct dans Angular. Voici ce que je vais faire, je vais dire, ouah , maintenant je vais copier cet élément de liste. En bas. Et pour le deuxième élément de la liste, il peut en parler. Nous pouvons donc avoir une page d'accueil à propos de deux pages pour la vérification de notre application. Maintenant que nous hébergeons localement, voici ce que nous avons ici, juste une sorte de logo, qui est composé de textes de majuscules de tâches et de deux liens ici. Donnons donc du style à cette application écrivant ce code dans un composant de la partie supérieure. Nous sommes capables d' ouvrir le fichier CSS et de styliser ce composant en fait, pour styliser cette barre supérieure, je vais saisir ma barre supérieure divisée par n. Je vais l'afficher sous forme de flux. Ensuite, je justifierai le contenu à l'intérieur comme un espace entre. Et je pourrais ajouter une ombre de boîte, par exemple, de 02 pixels, cinq pixels. Et disons que cela peut être des zéros, des zéros, des zéros, des zéros, des zéros 0 pour que D ait une certaine transparence. De plus, je peux configurer la litière de 20 pixels. Maintenant, ce sera notre meilleur bar. Maintenant, adaptons le style de notre navigation. Je ne vais pas m'embêter avec le logo. Donc, la barre supérieure, puis ma section de navigation qu'ils ont et puis les listes non ordonnées que j'ai. Le style de liste pour ceux-ci sera nul car je souhaite présenter les liens les uns à côté des autres et non une liste réelle. Maintenant, ci-dessous, je pourrais à nouveau cibler ma barre supérieure. Liste de navigation non ordonnée et chaque élément de liste spécifique ci-dessous. Pour chaque élément de liste spécifique, je les afficherai en ligne pour qu'ils soient côte à côte. Et je vais ajouter la marge sur le côté droit pour qu'elle soit de dix pixels, afin qu'ils puissent avoir un peu d'espacement entre eux. Maintenant, encore une fois, ciblez ma barre supérieure, puis parcourez cette liste non ordonnée, cet élément de liste et chaque balise d'ancrage spécifique de notre élément de liste. Ici, je vais définir une taille de police de 20 pixels. Ensuite, j'utiliserai la décoration du texte pour ne pas en être une. Et changeons de couleur ici. La couleur de mes liens peut être 333333. Enfin, je vais à nouveau cibler mes balises d'ancrage, mais cette fois, survolez celles-ci. Ensuite, aussi actif et concentré. Donc, pour tout cela, je vais juste changer la couleur pour qu'elle soit 777777. Et avec cela, nous avons en fait notre contenu, HTML, notre style, notre code CSS pour notre barre supérieure. Comment ce composant est-il au courant de cela ? Eh bien, dans les composants à points de la barre supérieure, le fichier ts, nous pouvons voir où nous avons déclaré notre composant. Il existe un sélecteur, mais il existe également un modèle spécifique et des styles spécifiques qui se trouvent au-delà de ce modèle. Il s'agit donc essentiellement de la configuration de notre composant. Sur mon écran en ce moment, nous pouvons voir notre barre supérieure. Il y a un journal sur le côté gauche et des liens d' accueil et à propos sur le côté droit. Je peux même zoomer un peu pour que vous puissiez mieux le voir. L'avantage de cette barre supérieure, c'est que c'est un composant partagé, ce qui signifie que lorsque je vais sur que c'est un composant partagé, ma page d'accueil, je verrai toujours, je devrais toujours voir mon composant de barre supérieure. Et aussi, quand je passerai à la page à propos, je verrai toujours mon composant de barre supérieure une fois que j'aurai tout bien configuré, mon routage et les pages aussi, parlant de dette, n'est-ce pas ? Dans la vidéo suivante, nous allons travailler sur notre routage. 6. Router: Donc, le routage en général, sur le Web, est rarement utilisé aujourd'hui. y a presque aucun site Web ou aucune application qui n'ait vraiment aucun itinéraire. Donc, en gros, chaque fois que vous souhaitez passer d'une page à l'autre ou cliquer sur un article spécifique pour lire cet article. Ce serait le routage. Toutes ces routes doivent être configurées dans l'application. De plus, tous ces itinéraires doivent savoir exactement quel contenu présenter à l'utilisateur. Et en Angleterre, c' est très pratique car Angular possède son propre routage angulaire. Alors pourquoi est-il important qu' Angular dispose de son propre routage ? Eh bien, de nombreuses technologies actuelles, même les plus populaires, ne prennent pas en charge le routage dès le départ. Vous devrez donc configurer les itinéraires et le routage. Et c'est assez mouvementé de travailler avec, mais dans Angular, c' est déjà configuré. Donc, si vous vous souvenez quand nous avons généré notre application à côté du module angulaire, nous avions également ce module de routage d' applications. Et c'est ici que nous établirons nos itinéraires. Pour ces itinéraires, je souhaite connaître ma page d'accueil et ma page à propos. Je vais donc créer maintenant deux pages, accueil et la page de propos. Les pages ne sont rien de différent que de simples composants. Donc, ce que nous pourrions faire en fait c'est générer ici deux composants. Encore une fois, utilisons cet outil CLI. J'utiliserai N, G, G pour générer un composant C4, et cela générera ma page d'accueil ici. Une fois que c'est terminé, je vais répéter la même commande, mais cette fois pour environ la page. Maintenant que nous avons nos pages sans composants pour une maison. Et aussi à propos de la page, eh bien, nous pourrions configurer nos itinéraires ici dans ce tableau d'itinéraires. Donc, pour configurer l'itinéraire ici, je vais utiliser l'objet. Et à l'intérieur de cet objet, je peux utiliser la propriété path, ce chemin. Eh bien, nous devons également déclarer une paire là où nous souhaitons mener notre utilisateur. Donc, comme j'ai cette page d'accueil, je crois que mon utilisateur accède à un chemin de retour. Pour cette route d'origine, je dois également créer le composant qui utilisera le composant spécifique qui doit être présenté sur cette route d'origine. Et pour moi, ce sera un élément essentiel. Assurez-vous simplement d' importer ce composant domestique en haut de la page. Visual Studio Code est suffisamment intelligent pour le faire automatiquement pour moi. Maintenant, créons le prochain itinéraire. Donc, une virgule ici, puis l' objet suivant pour un animal de compagnie d'environ, puis le composant de cette page sera à propos du composant. J'ai également utilisé ici capitalisé sur. Je vais changer cela pour que toutes les lettres soient en minuscules. Eh bien, pour le moment, nous avons nos itinéraires ici dans l'URL. Si je pouvais changer d'hôte local pour réduire la maison. Eh bien, la page d'accueil sera toujours dans l'URL, ce qui est bien. Si je pouvais le changer en environ. Elle est toujours là. Angular est donc au courant de cela. n'y a aucun contenu à l'écran, et nous ne pouvons pas non plus modifier l'itinéraire en cliquant ici Vous pouvez voir juste de l'argent ici, mais nous allons corriger cela. Donc, quand je viens au port hôte local 8200, il n'y a rien ici car ils ont cette page d'accueil et aussi cette route d'accueil. Il serait bon de rediriger automatiquement l'utilisateur vers la page d'accueil pour configurer cette redirection en haut de mon tableau ici, je vais créer la nouvelle route. Cette nouvelle route aura, eh bien, un chemin qui ne sera qu' une chaîne vide, c' qui ne sera qu' une chaîne vide, est-à-dire lorsque l'utilisateur vient de visiter notre domaine. Et une fois que cela se produira, j'utiliserai la propriété de redirection vers et je redirigerai l' utilisateur vers ma page d'accueil. Et enfin, nous devrions également utiliser Path Match, donc comment notre animal de compagnie doit correspondre. Et ici, je peux utiliser Full Match pour mon chemin. Alors maintenant, en vérifiant rapidement mon navigateur, si je supprimais cette colonne de ma page et que je saisissais simplement mon domaine ici, nous pouvons voir que nous sommes toujours redirigés vers la barre oblique d'accueil parce que cette direction rouge était en place. Maintenant que je suis sur cette page d'accueil, je devrais voir du contenu ici, au moins ce texte fictif fourni avec Angular. Des travaux à domicile, non ? Mais il n'y a pas de contenu ici , même si le trajet de retour existe. Et nous savons que nous avons cette composante « maison ». Eh bien, même si nous avons ce routage en place, Angular ne sait toujours où afficher ces composants. Donc, dans mon fichier HTML à points de composant point d'application, où j'ai cette barre supérieure, juste en dessous, j'utiliserai un élément appelé Router outlet. Cette voie et cette sortie évacueront essentiellement nos composants à l'intérieur. Ainsi, selon l'itinéraire que nous empruntons chez nous ou sur lequel nous nous trouvons, il saisira les composants utilisés pour ces itinéraires et les présentera ici écrans partout où nous empruntons cet itinéraire et cette sortie, si je l'utilisais ailleurs, il y présentera ces composants. Et maintenant, nous pouvons déjà constater un changement. Nous voyons ces devoirs. Si je changeais manuellement la page en barres obliques, alors je verrais à propos des œuvres. Mais j'ai dit le manuel et c'est vrai, donc nous ne sommes toujours pas en mesure de changer cela par check, en changeant les liens ici, non ? Nous allons simplement passer à ce hachage, qui n'est pas une voie existante pour nous. Donc, pour cela, nous devons aller dans notre composant de barre supérieure où se trouvent ces liens. Donc, dans Angular et au lieu d'utiliser un brouillon comme celui-ci, nous avons quelque chose de différent. C'est ce qu'on appelle une liaison par routeur. Cette liaison par routeur peut nous mener quelque part. Pour moi, cela me mènera à la page d'accueil de Slash parce que c'est un itinéraire de retour ici, également quatre plus bas. Je vais à nouveau supprimer cette référence H et utiliser hear slash. À propos de. Maintenant, nous avons quelques erreurs ici. C'est parce que ce lien de routeur n'est pas une propriété connue de cet élément spécifique. Et ce n'est pas qu'il s'agisse d'une propriété inconnue. C'est parce que dans ce composant de barre supérieure, eh bien, ce composant de la partie supérieure appartient au module partagé. Ce module partagé ne sait pas que nous utilisons réellement le routage dans certains de ses propres composants. Il est donc très facile de faire face à cela dans le tableau d'entrées où nous importons généralement des modules. Eh bien, nous pouvons simplement importer le module du module du routeur en important ce module et en veillant à l'importer en haut à partir d'un routeur à barre oblique angulaire. En l'important, nous perdrons ces flèches. Qu'est-ce que cela signifie maintenant ? Si je cliquais sur À propos, cela me dirigera vers la page À propos. Si je cliquais sur Accueil, cela me redirigera vers la page d'accueil, ce qui signifie que nos pages sont dans le routage en place. Maintenant, à côté du routage que vous avez vu, la redirection et de la façon de configurer les liens pour qu'ils fonctionnent avec le routage et les pages. C'est bien plus qu'une question de routage. Le routage est un module complet qui peut également être configuré pour un module enfant, nous pouvons avoir des itinéraires pour enfants, nous pouvons également avoir des itinéraires dynamiques par des idées spécifiques ou par des slugs spécifiques comme vous le souhaitez. Nous pourrions également transmettre des données d'un itinéraire à l'autre. Nous pourrions également puiser dans nos itinéraires et faire quelque chose de spécifique avec nos itinéraires, extraire les paramètres des itinéraires et bien plus encore. Mais le routage dans Angular peut être un cours à part entière, pour être honnête, cela peut prendre probablement une heure, deux ou trois heures pour l' expliquer complètement. Donc, au lieu de faire tout cela pour ce cours intensif, nous allons simplement continuer avec ce cours intensif pour finaliser notre application de tâches. Et nous continuerons à fournir les services. 7. Services: Donc, une autre fonctionnalité très importante d'Angular, s'appelle le service. ou les services sont en fait des fonctionnalités injectables, ce qui signifie que nous pouvons injecter chaque service où nous le souhaitons, dans nos différents composants, dans nos différentes directives, tuyaux, où que nous souhait. Et pourquoi voudrions-nous cela ? Eh bien, des services parce que ce sont des injectables. stockent principalement nos données chaque fois que nous souhaitons accéder à notre serveur pour obtenir des données spécifiques, ou que nous souhaitons simplement stocker localement certaines des données de notre application. que nous ferons principalement dans le cadre de notre service. Et comme le service est une fonctionnalité injectable, il peut être injecté là où nous en avons besoin et extraire ces données de ce service spécifique. Pour créer un service, nous utiliserons à nouveau l'interface de ligne de commande. Donc, ici, je vais utiliser N, G, G pour générer, S pour le service. Et le service est injectable partout où nous en avons besoin. Nous allons à nouveau générer ce service dans notre module partagé. Cette fois, je vais générer ce service dans le module partagé plutôt que dans le dossier Services. Ensuite, le programme s' appellera Data Service car nous travaillerons réellement avec les données de ce service. Maintenant, dans mon code Visual Studio, je peux accéder à mon dossier partagé puis aux services et ouvrir le service de données. Lorsque nous générerons le service, il sera livré avec deux fichiers. Un fichier est la classe du service lui-même et l'autre est un fichier de test pour ce service. Nous allons donc maintenant nous concentrer sur ces données qui desservent point ds bar. En haut, on peut voir que le programme lui-même est injectable. Et ici, nous pouvons également voir que nous utilisons ce décorateur injectable pour décrire ce service. Alors, où pouvons-nous injecter ce service par défaut dans Angular ? Le service sera fourni correctement injecté au niveau root, qui signifie que partout où nous utiliserons ce service, nous serons en mesure de l'utiliser si vous souhaitez fournir ce service. Juste un module spécifique. Vous pouvez spécifier ce module ici et en fait service de la dette important dans le tableau des fournisseurs de ce module. De cette façon, vous pouvez avoir des services spécifiques pour un module spécifique. Mais voilà, c'est une petite application. Nous n'avons pas à nous inquiéter à ce sujet. Nous pouvons simplement le laisser tel quel à fournir à la racine afin de pouvoir utiliser notre service partout où nous en avons besoin, car le service conservera nos données. Travaillons ici avec des données fictives et partageons également ces données avec différents composants. Donc, ce que je vais faire ici dans la classe de ce service, je vais créer un bien public. Nous n'avons pas vraiment besoin de déclarer une propriété publique ou privée, mais c'est un bon exercice de le faire car Angular est une technologie TypeScript, n'est-ce pas ? Ainsi, le TypeScript à la fin sera compilé en JavaScript en utilisant ces mots clés spécifiques tels que public ou privé ou des types spécifiques. Le TypeScript le fera beaucoup plus facilement. Donc, ici, je vais créer la propriété publique du nom d'utilisateur. Et ce sera ici le type de chaîne. Par défaut, ce nom d'utilisateur peut être John Doe par exemple. Nous avons maintenant ces données de nom d'utilisateur dans notre service et nous pouvons partager à partir d'ici où nous le souhaitons. Alors, qu'est-ce qui serait bien pour nous de le partager ici ? Eh bien, après mon constructeur ici, je pourrais créer une propriété publique, qui sera un nom d'utilisateur. Ce sera une méthode et elle renverra une chaîne. Pourquoi renverra-t-il une chaîne ? Eh bien, nous pouvons utiliser here return puis ce nom d'utilisateur, ce qui signifie que partout où nous utilisons cette méthode, elle sera d'accord sur le nom d' utilisateur et elle renverra simplement la valeur de ce nom d'utilisateur. Essayons donc d'utiliser ce nom d' utilisateur sur notre page d'accueil ici. Ouvrez donc le fichier TypeScript de cet objectif. À l'heure actuelle, le domicile n'est pas au courant de l'existence de ce service de données. Ainsi, dans le constructeur du trou, nous pouvons créer la propriété privée, qui peut être un service de données. Et nous pouvons définir le type pour qu'il soit Data Service. Assurez-vous simplement d'importer ce service de données en haut de la page. Maintenant, le composant d'origine courant de l'existence de ce service de données. De plus, quelle est la différence entre les propriétés privées et publiques ? Eh bien, les propriétés publiques, vous pouvez les utiliser en dehors de ce fichier, mais les propriétés privées ne peuvent pas être utilisées en dehors du fichier. Ils peuvent être utilisés uniquement dans classe spécifique dans laquelle ils sont déclarés. Donc maintenant, dans cette méthode Mg on init, nous allons récupérer notre nom d'utilisateur. Donc pour cela, créons ici tout d' abord des biens publics. Encore une fois du nom d'utilisateur, qui sera une chaîne. Et par défaut, ce sera une chaîne vide. Donc maintenant, dans ce moteur, je vais utiliser ce nom d'utilisateur et le définir comme suit, ce point de service de données obtient le nom d'utilisateur. Et ainsi, ce get username nous renverra la chaîne du nom d'utilisateur. Et cette chaîne sera stockée dans notre propriété de nom d'utilisateur à l'intérieur de ces composants. Mais pourquoi l'avons-nous utilisé dans cette ONG ? Ngo minute est un hook de cycle de vie dans Angular. Ce hook du cycle de vie s'exécute chaque fois que ce composant spécifique est chargé et bien initialisé. Ce qui signifie que lorsque nous visitons notre page d'accueil, ce code s'exécute. Il existe également d'autres crochets de cycle que nous pouvons utiliser N G lors de modifications en juin, détruire, etc. Mais nous ne nous embêterons pas ici simplement parce qu'ils sont beaucoup plus complexes à expliquer. Et il s'agit toujours d'un cours intensif. Alors, comment pouvons-nous savoir que ce nom d'utilisateur contient réellement des données ? Eh bien, passons à notre code HTML ici. Et au lieu de ce paragraphe, je vais utiliser la balise H1 ici. Ici, je vais utiliser la liaison de propriétés dans Angular pour ce faire, utiliser des accolades bouclées, des accolades doubles, et à l'intérieur, nous pourrions passer notre propriété. Pour cela, nous pouvons transmettre, par exemple, notre nom d'utilisateur. Donc, ce nom d'utilisateur, une fois qu' il aura les données, il sera présenté ici en H1. Nous pouvons donc le présenter. Texte bien dynamique. Maintenant, en vérifiant ma candidature, nous pouvons voir John Doe ici. Si je voulais aller sur la page À propos des œuvres, revenez à la page d'accueil. On peut toujours voir ce John Doe, qui est vraiment bon. Cela signifie que nous stockons nos données dans un service. Ensuite, nous déplaçons ces données dans un composant spécifique et nous les affichons sur un écran. Mais vous pouvez maintenant dire que c' était juste le nom d'utilisateur, ce ne sont pas des données réelles. Il s'agissait simplement d'une donnée fictive que nous avons créée. Eh bien, dans la vidéo suivante, nous travaillerons avec le http, où nous enverrons des appels continués depuis HTTP pour extraire des données d'un serveur et présenter des données réelles sur le écran. 8. HTTP: HTTP ou Hypertext Transfer Protocol est donc un protocole de couche application. Il est conçu pour la communication entre une application Web et des serveurs Web. Il le fait grâce à de multiples méthodes que nous pouvons utiliser. Comme la méthode get pour obtenir des données spécifiques ou méthode post pour enregistrer des données spécifiques. En outre, il peut être utilisé pour transmettre des en-têtes au serveur Web lui-même. Ainsi, nous pourrions, par exemple, authentifier notre utilisateur avec le bon jeton. Nous pourrions également envoyer des paramètres spécifiques via cet appel HTTP. Ainsi, notre serveur pourrait accéder à notre base de données en fonction ces paramètres et extraire des données spécifiques en fonction de ces paramètres. Quelque chose comme ça est principalement utilisé pour filtrer les données ou les trier. Et HTTP fait tout cela à l'aide de simples messages de requête et de réponse. Maintenant, http n'est rien de spécifique à Angular. Il peut être utilisé dans n'importe quel type de technologie capable de contacter le serveur. Nous pourrions donc l'utiliser dans d'autres frameworks JavaScript tels que React ou View, nous pourrions également l'utiliser dans du JavaScript brut. De plus, nous pourrions l'utiliser sur un ordinateur avec NodeJS, Python, C-Sharp, etc. Mais Angular possède son propre module pour le HTTP. De nombreuses autres technologies ne supportent pas leur propre module pour HTTP, mais Angular le fait. Avec ce module. Nous sommes en mesure d'utiliser correctement HTTP et toutes ses fonctionnalités, manière beaucoup plus simple que vous verrez bientôt. Mais la première chose à faire ici est que nous devons importer ce module HTTP dans notre application. Notre application pourrait donc réellement l'utiliser. Pour faire ça. Je vais ouvrir le fichier point txt de mon module de données d'application. Dans le tableau d'entrée de ce fichier, je vais ajouter un module client HTTP. Désormais, cela ne sera pas importé automatiquement. Donc, en haut, je vais importer ce module client HTTP depuis Angular slash, common slash HTTP. Et c'est tout. Avec cela, notre application connaît ce module client HTTP que nous pouvons utiliser et nous allons l'utiliser. Nous allons donc utiliser ce module HTTP pour extraire des données spécifiques et nous allons extraire les données de notre API d'espace réservé JSON. Cette API coûtera également de nombreuses données factices différentes. Nous pourrions donc l'utiliser pour tester notre application, ce qui est un très bon exemple pour ce cours sur lequel nous travaillons ici. Si je fais défiler ce site Web d'espace réservé JSON, nous pouvons voir ici différentes ressources que nous pouvons utiliser, comme des publications, des commentaires, des albums, des photos pour ces utilisateurs. Si je continue à faire défiler la page vers le bas, nous pouvons voir différentes méthodes HTTP que nous pouvons utiliser git pour obtenir les données, publier pour enregistrer des données, PUT ou patcher pour mettre à jour les données, supprimer, supprimer des données. Vous trouverez maintenant un lien vers ce site Web dans les ressources de ce cours afin que vous puissiez toujours le visiter et essayer travailler avec des données spécifiques de ce site Web. Les données avec lesquelles nous travaillerons sont les suivantes. Ainsi, même si nous créons l'application de tâches, nous veillerons à ce que ces deux soient réellement nos propres tâches. Revenons donc au code. Allons dans nos services partagés et ouvrons ces données que le service point ds bar. Maintenant que nous travaillons avec cette méthode get username, je pourrais supprimer cette méthode principale GetUser et également supprimer ce nom d'utilisateur d' ici car nous n'en aurons plus besoin. De plus, je dois entrer dans ma maison plutôt que dans la partie de ma maison. Supprimez le nom d'utilisateur d'ici, et supprimez réellement l'appel à cette méthode get username liée à l'entrée de ce service de données. Je vais quand même le garder ici parce que nous en aurons besoin. Donc, pour en revenir à mon service ici, je devrais être en mesure d'extraire les données de cette API d'espace réservé JSON. Pour faire quelque chose comme ça, nous devons indiquer à ce service que nous utiliserons ce module client HTTP. Et HTTP a son propre fournisseur que nous pouvons utiliser, qui est également injectable, ce qui signifie que nous pouvons l' injecter ici dans ce service. Je vais donc créer une propriété privée de HTTP, et je vais en définir le type pour qu'il s'agisse d'un client HTTP. Ce client HTTP doit être important à partir d'une barre oblique angulaire, une barre oblique courante HTTP. Assurez-vous simplement qu'avant cela, vous avez réellement important ce module client HTTP dans votre propre application, ce fichier de module. De cette façon, vous pouvez utiliser ce client HTTP. Maintenant, créons la méthode qui nous permettra de récupérer ces tâches pour nous. Donc, ici, je vais créer une méthode publique car nous utiliserons cette méthode en dehors de ce fichier. Et je vais le nommer, obtenir des tâches. Même si nous retirons les deux portes de cet endroit adjacent appelé API. Je vais quand même les renommer pour qu'elles soient des tâches car nous créons ici une application de tâches. Cette méthode d'obtention de tâches nous renverra quelque chose. Cela renverra l'observable. Et l'observable devrait avoir un type spécifique ici, lequel je reviendrai. Tout d'abord, qu'est-ce qui est observable ? Vous pouvez voir que l' observable est quelque chose qui appartient à cette bibliothèque supplémentaire, oui, que j'ai mentionnée au début de ce cours. Eh bien, la bibliothèque Alex JS est vaste. Il existe de nombreuses méthodes et de nombreuses fonctionnalités. Je ne vais donc pas l'approfondir car il peut prendre tout le cours juste pour l'expliquer. Mais en résumé, observable est quelque chose qui enveloppera nos données pour nous. Cela clôturera nos tâches. Au fur et à mesure que cela clôturera nos tâches, nous serons en mesure de les exploiter et d'utiliser différentes méthodes pour ces tâches. Donc, si vous devez transformer vos données, l'observable est une bonne option pour vous car vous pouvez les mapper vers ces tâches, transformer comme vous le souhaitez et renvoyer uniquement les données dont vous avez besoin pour nous ici. Cela doit renvoyer une valeur observable ici, car un client HTTP d' Angleterre renvoie toujours l'observable. Parce que de cette façon, il est beaucoup plus facile travailler avec des données en utilisant cet observable, vous le verrez, mais maintenant lié à ce type générique qui doit être transmis à cet observable. Eh bien, nous devons transmettre le type de données réel que nous allons consulter ici. Et pour l'instant, nous ne savons pas vraiment quel type de données nous allons récupérer à partir de cet espace réservé JSON. Je vais donc définir le type pour qu'il soit n'importe lequel ici. Et plus tard, lorsque nous aurons des données réelles, nous les obtiendrons et vérifierons quelles sont les données réelles dont nous disposons. Nous allons créer un modèle spécifique pour ces données, mais nous y reviendrons plus tard. Maintenant, à l'intérieur de cette méthode, nous pouvons écrire notre code pour obtenir la tâche. Donc, ici, j'ai utilisé le retour et je vais retourner ceci, ce HTTP. J'appelle donc ce modèle HTTP. Et seul le temps aura des méthodes différentes que je pourrai utiliser. L'une de ces méthodes est cette méthode GetMethod. Dans cette méthode get, nous devons passer la chaîne à l'API. Eh bien, la chaîne de code réelle qui obtiendra les données pour nous. Pour en revenir au site Web de l' espace réservé JSON, en cliquant sur ces deux portes, je peux voir ici qu'il affichera 200 tâches pour moi. Ici, dans l'URL, je peux voir l'URL réelle qui le fera pour nous. Il suffit donc de le recopier dans le code. Je pourrais simplement coller ces deux portes ici. Et comme il en coûtera trop à faire, c'est environ 200 d'entre eux. Je ne souhaite pas vraiment travailler avec une telle quantité de données. J'ai donc pu entendre définir le paramètre, qui est la limite de soulignement, et je vais le régler à cinq. De cette façon, je vais extraire uniquement les cinq tâches de cette API d'espace réservé JSON. Cette limite de soulignement n' est pas toujours la même. Chaque API aura son propre paramètre. Donc, si vous créez votre propre API, vous aurez vos propres paramètres. Il se trouve que l'API JSON placeholder utilise cette limite de soulignement. Et avec cela, nous en avons presque terminé avec notre service de données. Maintenant, passons à nos composants domestiques dans le, récupérons réellement ces données dans ce composant, dans mon composant domestique ici, dans mon énergie allumée, dedans. J'utiliserai à nouveau ce Dark Data Service. Dans ce temps, j'utiliserai une méthode appelée get tasks. Maintenant, cette méthode devrait nous renvoyer nos tâches, mais comme elle est observable, nous pouvons utiliser des méthodes spécifiques. Comme cela est observable, il renverra cette enveloppe de données. Donc, ici, nous pourrions utiliser cet abonnement pour nous abonner à notre observable. En nous abonnant à notre observable, nous obtiendrons une réponse directe de celui-ci. Donc, ici, je vais utiliser la réponse, dont je dois définir le type spécifique de cette réponse. Le type sera celui des données réelles que nous récupérerons. heure actuelle, nous n' avons pas le type modèle spécifiques pour ces données. J'en utiliserai donc ici, mais j'y reviendrai plus tard. Une fois que j'aurai entendu ma réponse renvoyer mes données, je pourrais utiliser la méthode des flèches ici et simplement console.log ma réponse. Je vais donc utiliser le journal des données de la console, puis la réponse. Nous avons donc pu réellement voir ce que nous récupérons. L'avantage de ces abonnements, c' est qu'ils ne se contentent pas de gérer la réponse, ils peuvent également gérer l'erreur. Donc, ici, je pourrais réellement transmettre l'erreur. Et la console enregistre ces données. Donc, si une erreur survient, nous saurons de quoi il s'agit. Et nous pourrions le gérer en affichant une sorte d'alerte sur un écran, par exemple. La dernière chose à faire avant de vérifier nos données, je vais ouvrir les vues du fichier HTML du composant point d' accueil ici ce nom d'utilisateur. Et lorsque nous supprimons le nom d'utilisateur, nous ne savons pas grand-chose à son sujet. Je vais donc simplement déplacer ce texte pour qu' il redevienne Hello World. Nous pourrions donc réellement rendre ces composants bien utilisables. Maintenant, dans mon application, si je veux bien. Eh bien, vérifiez la console de l'application. Je pourrais en fait, je vais voir ce journal de données, qui présentera le tableau de cinq éléments qu'il contient. Et tous ces éléments sont en fait les tâches à faire depuis cette API d'espace réservé JSON, ce qui signifie que la requête de la tour pour les données a été réussie et que nous obtenons la réponse de ce HTTP. Maintenant, la dernière chose à faire avant de fermer cette vidéo, c'est qu'elle est déjà assez longue. Je vais revenir dans le dossier partagé et créer un autre dossier sur le site appelé modèles. À l'intérieur, je vais maintenant créer le modèle de mes données. Donc, ici, je vais créer un fichier appelé Task Data Model Ts. Donc, dans ce fichier, je pourrais exporter l' interface d'une tâche. Et dans le cadre de cette tâche, je dois déclarer le type de propriétés que les données des tâches devraient avoir. Et dans mon application, j'ai ces propriétés ici. J'ai une valeur complète de Boolean. J'ai également l'ID du numéro, le titre de la chaîne et l' ID utilisateur du numéro. Donc, dans ma tâche, je vais créer une valeur complète de Boolean. Ensuite, j'aurai l'identifiant du numéro. Ensuite, j'aurai le titre de la chaîne. Et enfin, l'identifiant de l'utilisateur, qui sera un numéro. Maintenant que nous avons notre modèle de tâches, nous pouvons réellement utiliser ce modèle au lieu de l'endettement. Eh bien, n'importe quel type que nous utilisons. Donc, tout d'abord, revenir à mon service, j'utilise l'observable, qui renverra toutes les données. Donc, ici, il devrait renvoyer les données de la tâche. Assurez-vous simplement d'importer la tâche ici à partir d'un fichier de modèle de données de tâche approprié. Ici. En fait, il ne renverra pas une seule tâche, mais l'ensemble des tâches. Donc, ici, je vais régler qu'il renverra le curseur de la tâche. Et comme je déclare que le type générique ici, cette GetMethod, devrait également savoir quel type de données il récupérera pour nous. Je vais donc passer à nouveau le type générique ici et utiliser à nouveau ce tableau de tâches avec dette. Nous devons également corriger l'erreur ici. À partir de là, passons à notre composant point d'accueil selon lequel P est un fichier. Ici. Nous avons notre réponse que nous vous retournerons , n'importe quel type. Je vais donc redéfinir la tâche à partir d'un modèle de tâches spécifique que nous avons créé. Et ce sera un tableau de tâches. Avec cela, nous en avons presque fini avec cette conférence. Vous avez vu comment utiliser le module HTTP ? Comment pouvez-vous obtenir les données de votre API ? Transmettez ces données d'un service à votre composant, puis créez le modèle des données et préparez les données pour des données et préparez qu'elles soient utilisables dans votre application. En parlant de cela, c'est prochaine conférence exactement ce que nous ferons lors de la prochaine conférence. 9. Modèles: le cadre de cette conférence, nous allons stocker nos tâches localement dans notre composant d'accueil et les utiliser correctement pour les présenter sur un écran. Donc, tout d'abord, stockons les tâches ici où je reçois la réponse des données. Je pourrais en fait stocker cette réponse dans une sorte de propriété. Donc, ici en haut, je vais créer une propriété publique de tâches. Et il contiendra le type de tâche Curry car il attend ces données. Et par défaut, il s' agira d'un tableau vide. Parce que par défaut, nous ne savons pas si nous avons des données. Mais une fois que nous aurons obtenu les données, une fois que nous aurons intégré ces tâches, j'utiliserai cette propriété de tâches sombres que nous venons de créer. Et je vais le définir comme étant égal à la réponse que nous recevons, à savoir les tâches faciles à effectuer à partir de l'API JSON placeholder. Maintenant que nous les avons, allons chez nous, à ce composant, à ce fichier HTML, créons du contenu et mettons en forme ce contenu. Donc, à l'intérieur, je vais créer l'accord. Cette division peut contenir une classe de tâches. De cette façon, il sera plus facile de le coiffer plus tard. À l'intérieur, je vais mettre le tag h3 pour un titre, lequel nous ne verrons que des tâches. Et après le titre, je pourrais créer la liste des tâches. Pour ce faire, je vais créer la tâche photos, qui contiendra la classe des tâches. Et que devrait réellement faire cette tâche ici ? Eh bien, nous pourrions couvrir, eh bien, le titre de la tâche et je vais le définir dans une fourchette. Je vais également l'envelopper avec le texte en gras et nous pourrions taper, par exemple, apprendre Angular. C'est l'une des tâches, par exemple. Maintenant, à côté de ce titre d'une tâche, il peut être bon d' utiliser également la valeur terminée de la tâche. Nous avons donc pu voir si nous avons terminé une tâche spécifique. Donc, ici, je vais à nouveau utiliser ce stylo et à l'intérieur je n' utiliserai que du texte terminé. Ici, vous pouvez utiliser une sorte d'icône ou une image, mais je vais utiliser des textes complétés. C'est plus facile de cette façon. Maintenant, saisissons toute cette tâche et copiez-la. Disons trois types, 12. Il s'agit donc de trois tâches. Changeons les valeurs de ces tâches. Ici, je dirais laver une voiture. Et le dernier peut aussi se faire par un repas. C'est à peu près ça. Dans notre application, nous devrions voir quelque chose comme ça. Laissez-moi zoomer un peu. Nous avons donc le titre de nos tâches. Chaque tâche aura son propre titre similaire et complétera également le texte correspondant. Donnons-leur également un peu de style maintenant. Donc, pour les styliser, je vais ouvrir le fichier CSS point du composant home point. À l'intérieur, je vais aborder les principales tâches que nous avons. Je vais définir la largeur du div à 500 pixels. Je vais régler la marge sur 100 pixels, en haut et en bas de gauche à droite. Nous pourrions donc l'aligner au centre dans Daniel placer le texte au centre également. Maintenant, chaque tâche qui, pour vous aider, je vais m'occuper de cette tâche. Je vais l'afficher sous forme de flux et je justifierai que le contenu à l'intérieur soit espacé. Enfin, je vais tout aligner par texto sur le côté gauche. De cette façon, cet espace entre titre d'une tâche devrait se trouver sur le côté gauche, dans ce cas, la valeur terminée devrait se trouver sur notre côté droit. Enfin, je vais reprendre cette tâche. Et les éléments d'espace que j'ai à l'intérieur, je vais juste mettre un peu de marge dessus, comme dix pixels, en haut et en bas, 0 pixel à gauche et à droite. Et c'est ce que nous allons faire maintenant, telles sont les tâches. Voici la liste de ces tâches. Mais il est évident que ces tâches sont codées en dur. Nous n'utilisons pas réellement les tâches que nous avons obtenues grâce à l'API. Laissez-moi donc vous montrer comment gérer les modèles dans Angular. Pour faire quelque chose comme ça, je vais revenir au HTML. Nous utiliserons la directive appelée MD4. Md4 est une boucle qui parcourra en boucle certaines données spécifiques. Dans notre exemple, il parcourra en boucle les données des tâches. Et pour chaque tâche spécifique, nous allons générer un ensemble de code comme ce wrapper de tâches, ce div de tâches que nous avons avec le contenu qu'il contient. Comme nous n'aurons besoin que d'une seule d'entre elles, je vais supprimer ces deux tâches. C'était, c'était juste une tâche factice pour que je puisse la montrer. À quoi pouvons-nous ressembler ? Mais maintenant, utilisons cette énergie pour obtenir des directives sur un accord. Je vais utiliser étoile puis mg pour utiliser cette boucle. Je vais donc passer en revue mes tâches ici. Donc, pour chaque tâche, je vais obtenir la variable de la tâche de la vie par exemple, ici vous pouvez la nommer comme vous le souhaitez. Je vais limiter la tâche pour une convention de dénomination. Passons donc à une ou plusieurs tâches. Nous sommes donc en train de les parcourir en boucle, de toutes les tâches. Et tout ce qui s'y trouve va le générer cinq fois parce que nous avons cinq tâches. Donc, au lieu de tous ces cinq, simplement montrer ce texte, je vais supprimer cet apprentissage Angular. Et ici, je vais utiliser la tâche elle-même. Et sur une tâche, j'ai un titre de propriété. Chaque tâche doit donc avoir un titre approprié ici. Et maintenant, elle est là. Nous avons les tâches appropriées à partir de cette API d'espace réservé JSON. Vous pouvez voir que toutes les tâches auront leur propre titre et la valeur terminée à côté de celles-ci, qui n'est pas encore utilisée correctement. Nous l'utiliserons correctement dans la prochaine vidéo lorsque nous travaillerons avec un style spécifique. Mais avant de terminer cette vidéo, j'ai oublié que nous avons aussi une page. Ajoutons donc du contenu à cette page À propos. Pour cette page À propos, je vais créer un div, qui contiendra la classe du contenu principal. À l'intérieur, je crée vraiment le paragraphe avec du texte de Lorem Ipsum. Ce paragraphe, permettez-moi de saisir ce texte et de le copier quelques fois comme celui-ci. Maintenant, à partir de là, je vais ouvrir le fichier CSS, récupérer la classe de contenu principale que nous avons. Je vais régler la largeur à 900 pixels et marge à 50 pixels en haut et en bas de votre gauche et de votre droite. Avec ça, notre page d'accueil est presque terminée. Nous aurons également terminé la page À propos, eh bien, À propos. Pour la page À propos, je ne souhaite pas montrer grand-chose car tout le contenu de l'application de tâches apparaîtra sur une page d'accueil. Mais comme nous avons déjà cette page À propos, ajoutons-y du contenu fictif. Tu peux jouer avec. Vous pouvez utiliser certaines images. Vous pouvez, par exemple, définir le titre et même utiliser les tâches à partir d'ici, également une page À propos. C'est à toi de décider. Mais pour la prochaine vidéo, nous allons travailler sur le style. Vous pouvez donc voir quels styles différents nous pouvons utiliser dans Angular. Et aussi, comment pouvons-nous également utiliser un style dynamique pour chaque élément spécifique. 10. Styler: Quels sont donc ces différents styles que nous pouvons utiliser dans Angular ? Eh bien, tout d'abord, lorsque nous avons généré notre application, vous avez déjà vu que vous pouviez choisir un format de feuille de style différent comme CSS, Sass, less, etc. Mais lorsque vous stylisez votre application, vous avez également différentes méthodes. Donc, par exemple, si je voulais ouvrir ce fichier angulaire, ce fichier JSON, dans ce fichier, il y a un tableau de styles ici. Nous pourrions en fait importer ici des styles externes par exemple à partir de bibliothèques tierces comme Bootstrap ou Tailwind. À côté de ça. Dans notre application, nous devrions également avoir ces styles dans ce fichier CSS, c'est un fichier de styles global et vous pouvez déjà voir le commentaire ici indiquant que vous pouvez ajouter les styles globaux à ce fichier et importez également d'autres fichiers de styles. Ceci est très utile lorsque vous travaillez avec SAS, par exemple. Ainsi, vous pouvez importer tous vos propres fichiers dans un seul fichier à côté de la dette. Si je voulais rentrer chez moi. À l'intérieur du composant home, nous pouvons trouver un fichier CSS, ce qui nous permet de styliser chaque composant avec son propre style spécifique. Et si je voulais styliser quelque chose spécifique dans ce composant, eh bien, ce code CSS n'est spécifique qu'au composant dette, donc il ne sera pas transmis à d'autres composants. Et évidemment, il existe styles en ligne que nous pouvons déjà utiliser en HTML. Mais nous pouvons également utiliser davantage ce style en ligne pour un style spécifique pour les éléments spécifiques que nous souhaitons. Ainsi, par exemple, j'ai ces tâches sur mon écran, et certaines d'entre elles sont effectivement terminées, mais je ne l' indique pas du tout ici. texte vient juste d'être complété ici. Maintenant, je vais utiliser ces styles en ligne pour ne styliser que les tâches spécifiques qui sont effectuées avec la ligne à travers ces textes. Donc, pour faire une telle chose sur mon texte terminé ici, je peux utiliser ces crochets et utiliser du style ici. Par là, je lie l'attribut style de cet élément span. Ici, je vais utiliser le point puis la décoration du texte, ce qui signifie que je cible l'attribut spécifique de la décoration du texte. J'ai mal saisi ici. Décoration de texte. Oui. Et je vais faire en sorte que cela soit égal ici. Ce que je vais faire, je vais vérifier si ma tâche est terminée. Je pourrais donc vérifier si c'est vrai ou si c'est juste des tâches terminées. Nous allons également vérifier si la valeur est vraie. Si tel est le cas, je vais utiliser le style des lignes pour les règles ici. Encore une fois, vous avez mal saisi. Et si ce n'est pas le cas, je vais juste utiliser une chaîne vide ici, donc aucun style ici. Maintenant, sur mon écran, je peux réellement voir que cette tâche est terminée. Il a cette valeur complète. tâche est déjà terminée , ce qui est génial. Comment pourrions-nous poursuivre ? Nous travaillerons avec cette application de tâches. Eh bien, ce serait bien si nous pouvions réellement terminer ou incompléter l'une de nos tâches. Donc, pour cela, je vais me déplacer vers la page d' accueil de ce composant, le fichier point txt. Et ici, je vais créer une méthode. Donc, après avoir intégré ce moteur, je vais créer une méthode publique car cette méthode sera utilisée en dehors de ce fichier. Et la méthode indiquera une tâche complète. La méthode ne renverra rien, ce sera donc une méthode nulle ici. Cette tâche complète s' attend à ce qu'elle lui soit transmise. Et la tâche doit avoir son propre type, qui est le modèle de tâche que nous avons déjà créé. Et ce que je vais faire, c'est saisir cette tâche et en tirer le meilleur parti. Et je vais le mettre sur, eh bien, juste à l'envers. La tâche point s'est donc à nouveau terminée avec ce point d'exclamation au début. Cela signifie donc que si la valeur complète est fausse, elle sera vraie. Si c'est vrai, alors ce sera faux. De cette façon, nous pouvions terminer une tâche inachevée en une seule fois. Alors, comment pourrions-nous utiliser cette tâche complète maintenant ? Eh bien, sur ma maison, ce composant, ce fichier HTML, je l'utiliserai ici même lorsque je cliquerai sur ce texte terminé. Tout d'abord, permettez-moi de le préciser un peu afin que vous puissiez tout voir clairement. Nous avons donc notre style ici et là, je vais maintenant utiliser click event. Pour utiliser l'événement click, nous utilisons simplement des accolades ici et nous avons des options pour différents événements. J'utiliserai l'événement click, et une fois que vous aurez cliqué sur ce texte, j'utiliserai cette méthode de tâche complète laquelle il y a actuellement une erreur car cette tâche complète attend réellement une tâche spécifique. Donc, ici, je vais simplement transmettre la tâche spécifique de notre règle, de notre tâche, notre NG pour boucle. Revenons maintenant à mon application ici. Si je cliquais sur, par exemple, ces textes terminés, nous pouvons voir qu' il est assez complet que nous allons déplacer sa valeur de faux à vrai. Et si la valeur est vraie, alors nous aurons cette décoration de texte à aligner. Nous accomplissons donc nos tâches ici. Je pourrais également cliquer à nouveau pour terminer ces tâches. Vous avez donc vu à quel point il est simple, avec une seule fonction dans le style en ligne, d'avoir un style spécifique pour chacune de nos tâches dans notre gamme. Et avec ça, nous en avons terminé. Ça y est, c'est notre application, mais nous sommes toujours là. Une chose à faire, c'est le déploiement. 11. Déploiement: Ainsi, lors du déploiement de l'application Angular, nous entendons plusieurs options pour le faire. De plus, avant notre déploiement, nous devons suivre quelques étapes. Par exemple, nous devrions créer notre application. Comme vous le savez, notre application actuelle que nous entendons, eh bien, tous les composants sont en fait des fichiers TypeScript. Le script dactylographié est quelque chose qui n' est pas lisible sur un navigateur. Le navigateur lit le code JavaScript. Ainsi, en construisant l'application Angular, nous compilerons également le code TypeScript dans notre code JavaScript. Et c'est pourquoi Angular est un framework JavaScript même s'il utilise des types. Où pouvons-nous donc déployer cette application unique ? Eh bien, il y a plusieurs options. Nous pouvons simplement le déployer, par exemple, sur Netlify, ou nous pouvons créer de l' argent personnalisé et tout déployer ensemble sur Heroku. Mais je vais probablement adopter l'approche la plus simple ici, à savoir le déploiement sur Firebase. Cette approche est également plus professionnelle car Firebase est très souvent utilisée avec Angular. Alors pourquoi Firebase ? Firebase et Angular Will sont en fait des produits Google. Par mort. Ils sont très bien connectés entre eux. Il est donc très facile de déployer une application anglaise sur Firebase. Firebase est un produit de Google nous offrira de nombreuses fonctionnalités différentes. Il peut nous proposer, comme base de données en temps réel ou un magasin de pompiers, sa propre base de données. Il peut nous proposer un hébergement que nous utiliserons dans cette vidéo. Eh bien, pour publier notre application sur Firebase Hosting. Les utilisateurs de Firebase proposent un tas de fonctionnalités et de produits différents . Et vous verrez ces Wellstone lorsque j'entrerai dans la base de feu. Donc, avant de faire quoi que ce soit ici, assurez-vous d'avoir un compte Firebase. Alors, récupérez votre e-mail et inscrivez-vous à Firebase. C'est gratuit, vous pouvez donc le faire. Une fois votre compte configuré, vous pouvez suivre cette vidéo et déployer votre application de tâches. Donc, si vous avez votre propre compte Firebase, vous devriez être redirigé vers cet espace de travail de console de Firebase. Donc, ici, nous pouvons réellement créer un projet. Eh bien, un projet Firebase. Vous pouvez déjà voir que j'ai quelques projets fictifs issus des tutoriels précédents, mais concentrons-nous sur celui-ci. Donc, pour créer le projet, cliquez sur ce bouton Ajouter un projet. Évidemment, ici, nous devrions écrire le nom du produit pour qu'il perde la tâche. Le nom sera Task up, mais un identifiant spécifique sera effectivement attribué à ce projet. Il sera donc unique à votre profil. À partir de là, je peux cliquer sur Continuer, puis on nous posera des questions sur Google Analytics. Google Analytics sera donc utilisé afin que Firebase puisse le configurer automatiquement pour nous. Je vais le désactiver cette année car en fait, nous n'utilisons pas Google Analytics et notre limite de tâches est une application très simple. Nous pouvons donc simplement créer le projet ici. Vous pouvez attendre un peu, et le projet sera bientôt créé. Ensuite, vous devriez être redirigé vers le tableau de bord de votre projet. Eh bien, oups, c'est ma faute. Tu n'étais pas prête à être dirigée. Vous devez donc cliquer sur ce bouton Continuer pour être ressuscité. Et c'est ici. Il s'agit en fait d'un projet. C'est ton projet. Mettons-nous le mur, voyons ce que nous avons dans ce projet Firebase. Ce n'est pas important pour ce tutoriel, mais c'est vraiment bon à savoir car Firebase est un produit de très grande qualité et il est très souvent utilisé. Donc, ici, tout d'abord, nous pouvons commencer à utiliser Firebase en déployant l'une de nos applications telles que iOS, Android, VAB. Même les applications Unity et Flatter sont prises en charge par Firebase. De plus, sur le côté gauche, nous avons différentes options. Si je change cette version, il y a tout ce dont notre application a besoin. En gros, nous avons une authentification spécifique, nous avons une base de données, nous avons une base de données en temps réel. Il existe des extensions, du stockage, hébergement et bien d'autres choses, y compris l'apprentissage automatique. Maintenant, il ne s'agit que du projet, mais si je voulais lancer et surveiller, c'est cette partie avec les analyses, qui vérifiera les performances de l'application afin que vous puissiez voir s'il y a tout crash à côté de la dette. L'analyse elle-même, Google Analytics, est entièrement convertie ici. Vous aurez donc votre propre tableau de bord et vous pourrez suivre en temps réel, vos événements spécifiques, vos conversions, vous pouvez suivre pratiquement tout ce qui se trouve dans le tableau de bord Firebase. Enfin, il y a la section engagée, qui est principalement utilisée à des fins de marketing. Niveau annexe du bouton, je dirais qu'il existe des tests AB que vous pouvez configurer, accéder à votre application. d'autres termes, ajoutez-en plus , vous pouvez vous connecter et faire en sorte que connecter et faire en sorte vos publicités soient présentées directement dans votre application. Et il y a bien d'autres choses à voir là-dedans. Ici, vous pouvez voir tous les produits réellement pris en charge par Firebase, ce qui représente un grand nombre de produits. Vous devez savoir que chacun d'entre eux est fondamentalement un produit distinct qui est pris en charge par ce produit mondial Firebase, ce qui est incroyable. Je vais donc revenir à l'aperçu de mon projet. Et nous pouvons commencer à partir d'ici. Et j'ai aimé encore une fois, avant de faire quoi que ce soit avec la Firebase et de connecter notre projet à la Firebase. Nous devons créer notre application. Nous devons compiler ce TypeScript en JavaScript. Pour cela, vous pouvez simplement utiliser NG build. Dans les versions précédentes d'Angular, vous deviez également utiliser dash, dash prod. Il s'agit d'un drapeau qui indiquera que vous devez créer pour la production. Mais dans cette version, il le fera par défaut. Il suffit donc d'utiliser la commande n g build pour réellement construire votre projet. Si la compilation fonctionne correctement dans votre projet, vous devriez avoir un nouveau dossier appelé beast pour la distribution. Et à l'intérieur, il devrait y avoir une application de tâches, mais cette fois, dans le code JavaScript , le code est assez groupé, minimisé, donc il est difficile à lire, mais c'est à peu près tout. Maintenant, nous avons notre application de distribution, enfin, notre application prête à passer en production. Revenons maintenant à l'aperçu de notre projet. À l'intérieur, je vais entrer dans cette section de construction et sélectionner l'hébergement. Maintenant, au sein de l'hébergement, nous devons l'activer ou commencer à l'utiliser. Je vais donc cliquer dessus et il y a essentiellement les étapes que vous devez suivre. Tout d'abord, nous devons nous assurer que les outils Firebase sont installés globalement de la même manière que pour Angular CLI, car Firebase possède en fait son propre outil CLI qui aidez-nous avec les applications Firebase. Eh bien, pour les produits Firebase, j'ai déjà installé ces outils Firebase, mais je vais continuer avec cela. Vous pouvez donc voir le processus lui-même. Maintenant, dans le terminal, je vais le supprimer, effacer cette partie du terminal, puis je vais coller ce npm install dash g pour global et Firebase pour appuyer sur Enter et attendre pour qu'il puisse l'installer. Maintenant, une fois qu'il a été installé, je vais à nouveau vider mon terminal. Maintenant, comme les outils Firebase sont installés, nous pouvons utiliser la méthode de connexion Firebase pour connecter votre propre outil CLI V à Firebase sur le Web. Assurez-vous donc d'exécuter cette méthode. J'ai également mal saisi la connexion Firebase. Et assurez-vous d'exécuter cette méthode, vous serez redirigé vers la version Web de la connexion. Vous vous connecterez avec votre compte approprié et vous pourrez revenir ici et continuer travailler avec cet outil CLI. Pour moi, je suis déjà connecté avec mon utilisateur, donc je n'ai pas vraiment besoin de le faire. Mais ce que nous devons faire, c'est initialiser le projet Firebase dans notre application. Pour ce faire, je dois y lancer une Firebase pour l'initialiser. Firebase va donc simplement demander une confirmation ou nous sommes prêts à continuer et je répondrai oui, ici. Maintenant, ici, c' est peut-être un peu zoomé. Laisse-moi faire un zoom arrière pour que tu puisses le voir. Mais ici, nous avons différents produits Firebase que nous pouvons utiliser comme une base de données en temps réel via l'hébergement de fonctions de restauration. Cette partie est ce dont nous avons besoin. Il existe également deux types d'hébergement. L'une consiste à héberger directement depuis GitHub. Et ce, la première consiste à configurer les fichiers que nous souhaitons publier sur l'hébergement. Et éventuellement, nous pourrions configurer le GitHub. Et j'opterai pour la mort. Donc, ici, je vais appuyer sur espace pour le sélectionner , puis sur Entrée pour le confirmer. Encore une fois, nous avons maintenant la possibilité d'utiliser notre propre projet spécifique. Nous pouvons donc utiliser un projet existant, créer un nouveau projet avec les outils Firebase, The Fighter, basé sur le projet Google Cloud Platform existant . Mais je ne vais pas m'embêter avec ça. Nous utiliserons certainement le projet existant car nous avons déjà créé une application de tâches. Et maintenant, nous devrions voir la liste de nos projets. Et je vais poursuivre cette tâche. Maintenant, on nous demande ce que vous voulez utiliser comme répertoire public. Ce qu'ils disent en gros, c'est quelle partie de votre répertoire de rôles nous devons déployer sur l'hébergement. Et pour ce qui est de la dette, ce sera notre élément le plus profond. Nous allons supprimer le dossier et l'application de tâches à l'intérieur, car il s'agit l'application réellement réalisable sur le Web. Donc, pour ce faire, je vais perdre cette tâche, puis réduire la tâche. Dans l'Idaho. Si vous pouvez le voir correctement, je vais effectuer un zoom arrière encore plus loin. Donc, cette tâche de taille réduite. Nous pouvons maintenant configurer cette application en tant qu'application d'une seule page. Eh bien, Angular est un framework pour les applications d'une seule page. Je vais donc répondre oui, ici aussi. Maintenant, souhaitons-nous configurer génération et le déploiement automatiques avec well, déploiements avec gift up. Et voici cette partie optionnelle. Je vais donc continuer ici car nous n' avons pas du tout de référentiel GitHub pour ce projet. Maintenant, il s'agit d'une sorte d'avertissement ou de message d'erreur de ce type. Le fichier index.HTML existe déjà dans notre application de tâches. Et c'est à peu près la vérité sur notre disque. Ensuite, réduisez le cap des tâches, nous avons notre fichier index.HTML, qui est essentiellement notre contenu HTML. Mais ici, on nous demande de le faire. Nous souhaitons remplacer cela. Eh bien, non, nous souhaitons toujours conserver contenu HTML de notre application. Et avec cela, nous avons réussi initialiser le projet Firebase. En gros, nous avons connecté notre application angulaire au projet Firebase. Il ne reste donc plus qu' une chose à faire pour le déployer réellement sur l'hébergement. Je vais clarifier cela ici. Maintenant, je vais zoomer un peu. Pour le déployer. Nous pouvons simplement utiliser Firebase Deploy. Alors, comment Firebase saura-t-elle réellement ce dont elle a besoin pour être déployée ? Ici, lorsque nous initialisons le projet avec Firebase, nous avons reçu deux nouveaux fichiers. Le premier fichier est en fait le projet connecté à cette application, qui constitue notre limite de tâches. Et le Firebase point json est la configuration du projet. Par exemple, ce qui doit être déployé, c'est que cette application de tâches slash. C'est ce que nous avons mis en place. Il y a des réécritures que nous pouvons faire. Il y a des en-têtes que nous pouvons définir ici et ainsi de suite. Mais c'est une configuration de base qui le dira à Firebase, accord, c'est ce que je souhaite déployer sur l'ensemble. Nous pouvons donc simplement continuer ici, déployer Firebase, appuyer sur Entrée et attendre qu' il le déploie. Maintenant, une fois que tout sera déployé, nous pourrions obtenir cette URL fictive directement nos applications afin de pouvoir l'ouvrir. Mais je ne le ferai pas. Je vais retourner à ma base Firebase ici. Comme nous avons maintenant un hébergement de configuration, nous n'avons pas vraiment besoin de suivre ces étapes car nous les avons déjà faites. Nous allons donc simplement passer à x ici. Le tout en lui-même. Je pourrais rafraîchir la page. Et sur un site d'hébergement, nous avons maintenant notre Firebase. Eh bien, notre application angulaire, nous pouvons le voir, eh bien, nous n' avons plus ce bouton Get Started, mais en fait, notre application en bas, nous verrons aussi l'historique des versions et aussi différents canaux que nous pouvons utiliser. Mais ici, si je cliquais sur cette URL, notre application s'ouvrira en direct. Cette application est donc entièrement déployée sur Firebase et prête à être utilisée. Ils sont prêts à ce que tout le monde puisse le voir. Et nous pouvons voir que nos appels HTTP fonctionnent également parce que nous obtenons les données des appels HTTP. Et nous sommes également en mesure de confirmer ou non que notre routage fonctionne. Quand je change d'itinéraire, il y a du contenu sur une page différente, mais c'est à peu près tout. Avec cela, les gars, nous avons pu finaliser notre application de tâches et la déployer sur Firebase. Passons maintenant à la vidéo suivante je puisse vous remercier comme il se doit. 12. Merci et au revoir: Eh bien, c'est à peu près ça. Merci encore d'avoir suivi ce cours en premier lieu. Si vous vous en tenez à la fin de ces scores, vous avez en fait votre propre application de tâches angulaires créée et déployée. Vous pouvez désormais utiliser cette application de tâches pour votre propre portefeuille lorsque nous déployons l'application. Cela peut donc vous aider tout au long votre carrière alors que nous créons cette application de tâches J'espère sincèrement que vous apprendrez quelque chose de nouveau, ou du moins que vous améliorerez vos connaissances à ce sujet grâce à ce demande. Et nous avons travaillé avec de nombreuses fonctionnalités majeures des composants angulaires, des services, du module HTTP, du routage, etc. Mais ce que vous devez savoir aussi, c'est qu'il se passe bien plus que sur ma chaîne YouTube. Vous pouvez en fait trouver la série Angular is Central où nous accédons à toutes les fonctionnalités qu'Angular a à nous offrir. Et si vous êtes intéressé par les matériaux, c'est aussi la série Angular Material qui vous convient. Encore une fois, avant de terminer ce cours, eh bien, m'appelle Stefano Marriage, et j'ai plus de sept ans d' expérience dans le développement Web. Ensuite, j'ai été votre instructeur tout au long de ce cours. Et comme je l'ai mentionné, à côté de ces cours Skillshare, j'entends également ma chaîne YouTube appelée digital. Assurez-vous donc de vérifier cela également. De plus, si vous souhaitez regarder plus de cours de ma part ici sur Skillshare, vous pouvez visiter mon profil et sélectionner l'un de mes cours . Par exemple, il y a aussi un parcours angulaire. Il existe d'autres cours pour JavaScript, Bootstrap Node JS, JS, etc. Mais avec cela, nous en avons presque terminé. Merci encore à tous, merci d'avoir suivi ce cours. terminant le cours, assurez-vous également de soumettre vos propres projets et de vous appuyer sur ces notes dans la section projets de ce cours. Nous pouvons donc tous y aller, en parler, peut-être avez-vous des questions spécifiques auxquelles je pourrais répondre, mais merci encore une fois, et à bientôt dans mes autres cours. Au revoir.