Maintenant, nous allons passer à
notre prochain exercice où nous allons créer
un nouveau composant et l'ajouter à notre application Angular.
Ensuite, nous utiliserons ce composant pour contrôler une partie
de l'écran que nous avons conçu pour notre application Angular.
L'écran de notre application Angular est assez ennuyeux pour le moment.
Tout ce que nous avons est une barre d'outils en haut, puis un écran blanc
vierge ici, mais cela nous donne aussi des idées.
Nous pouvons maintenant prendre du contenu supplémentaire et ensuite
placer cela dans cette partie de l'écran ici. Comment on fait ça ?
Nous pouvons créer un nouveau composant, puis remettre
sur cette partie de l'écran à ce composant et dire,
« Vous prenez soin de rendre ce que vous voulez dans cette partie de l'écran. »
Donc, cette vue sera contrôlée par le nouveau composant.
Comment faisons-nous ça ? Passons à l'exercice maintenant.
Pour commencer l'exercice,
allez aux instructions d'exercice qui suivent cette vidéo particulière.
Ensuite, dans les instructions d'exercice,
vous verrez quelques ressources d'exercice,
qui est un fichier zip à votre disposition.
Téléchargez ce fichier zip sur votre ordinateur,
et cela vous donnera un fichier images.zip.
Donc, enregistrez-le en tant que fichier images.zip dans votre dossier de téléchargements,
décompressez-le, puis cela vous donnera
un dossier d'images contenant
un ensemble d'images que nous allons utiliser dans notre application.
Décompressez le fichier images.zip que vous venez de télécharger,
et déplacez ce fichier images.zip dans votre projet,
et dans votre projet,
dans le dossier sources et assets ici.
Donc, encore une fois, déplacez le dossier images que vous obtenez en
décompressant le fichier images.zip, puis déplacez ce dossier images dans votre application,
donc, à l'intérieur de votre application,
sous le sous-dossier sources et assets.
Ces images qui sont fournies ici seront
disponibles pour une utilisation dans votre application Angular.
Maintenant, nous allons utiliser la CLI Angular pour
générer automatiquement un composant pour nous et l'ajouter à notre application Angular.
Donc, dans le terminal,
allez dans le dossier contenant votre application Angular et tapez
ng generate menu composant.
Donc, nous nommons ce composant comme MenuComponent.
Ce MenuComponent contiendra le menu pour
le restaurant pour lequel nous préparons notre application Angular.
Donc, lorsque vous tapez ceci,
cela générera automatiquement
le MenuComponent, puis l'ajoutera à votre application Angular.
Ce MenuComponent sera créé et ajouté dans
le dossier source/app/menu de votre application.
Donc, il va créer un ensemble de fichiers dans le dossier de menu.
Ainsi, vous pouvez voir qu'il crée un fichier SCSS,
un fichier HTML, et le fichier ts,
et ensuite quelque chose appelé le fichier ts spectral.
On y reviendra plus tard.
Ensuite, aussi, il mettra à jour votre fichier app module.ts.
Alors, allons jeter un oeil à ce qui vient de se passer lorsque vous
a créé ce MenuComponent et l'a ajouté à votre application Angular.
Allons à l'éditeur.
En arrivant à notre éditeur,
, vous remarquerez maintenant que
dans le dossier app,
il y a un nouveau dossier appelé menu,
et ce dossier contient tous les fichiers associés au MenuComponent ici.
L'interface de ligne de commande angulaire suit le guide de style standard angulaire.
Le guide de style suggère que chaque composant devrait être placé
dans son propre dossier comme on le voit ici,
et j'aime à peu près ceci parce que je suis très obsessionnel à propos de
le garder propre hiérarchie pour mes dossiers d'application ici.
Donc, cela fonctionne très bien pour moi.
Certaines personnes aiment une hiérarchie plate,
mais je suis juste confondu avec cette partie.
Donc, je préfère stocker chaque composant dans son propre dossier.
Donc, ça marche bien pour moi.
Maintenant, si vous ouvrez le fichier app module.ts,
, vous remarquerez que le fichier app module.ts a été mis à jour
en incluant une autre importation dans le fichier app module.ts.
Donc, vous voyez que, avec AppComponent,
le MenuComponent a été automatiquement ajouté en tant qu'importation dans votre module d'application.
Donc, cela signifie que MenuComponent est maintenant
disponible pour votre application Angular à utiliser.
Aussi, si vous vérifiez la propriété des déclarations à l'intérieur du décorateur NgModule,
vous verrez que dans la propriété des déclarations,
en plus du AppComponent,
vous avez également le MenuComponent inclus.
C'est la raison pour laquelle j'aime Angular CLI,
parce que cela simplifie tout cela a fonctionné pour moi.
Si je devais le faire à la main,
je devrai aller manuellement dans l'application module.ts et ensuite taper tout ce code là-bas,
et il y a une forte probabilité que je finisse par faire des erreurs là-bas.
Donc, nous nous épargnons beaucoup de problèmes en utilisant l'interface de ligne de commande angulaire.
Donc, c'est pourquoi je suis tombé amoureux de
Angular CLI pour créer mes applications Angular.
Donc, avec cela, nous avons mis en place
notre MenuComponent pour être disponible pour notre application Angular.
Maintenant, où vais-je utiliser le MenuComponent ?
Je vais utiliser le MenuComponent dans mon modèle AppComponents.
Donc, je vais aller au modèle AppComponents, puis
inclure le MenuComponent ici dans mon AppComponent.
Donc, cela va essentiellement passer cette partie de l'écran à mon MenuComponent.
Comment faisons-nous ça ?
Pour ce faire, nous allons d'abord jeter un coup d'œil au fichier MenuComponent.ts.
Ainsi, lorsque vous ouvrez le fichier MenuComponent.ts,
, vous verrez que le sélecteur du MenuComponent a été défini comme app-menu.
Donc, c'est le nom de sélecteur standard que l'interface de ligne de commande angulaire donne pour vos composants.
Vous pouvez changer cela si vous le souhaitez,
mais quel que soit le sélecteur que vous spécifiez ici,
qui formerait les balises que vous utilisez pour l'inclure dans votre fichier de modèle.
Donc, revenant à AppComponent.html,
maintenant, si je veux inclure le fichier de menu ici,
donc je dirai juste,
app menu tag et voila,
que une partie de l'écran est maintenant remise à mon MenuComponent,
et c'est au MenuComponent de décider ce qu'il veut y placer.
Donc, peu importe ce qui est défini,
le modèle MenuComponents sera placé ici.
Donc, maintenant, tout ce qui nous reste est d'aller préparer
notre MenuComponent pour montrer les informations appropriées pour nous.
Sauvegardons les changements,
et ensuite nous passerons à
l'étape suivante où nous allons créer le menu pour notre restaurant en utilisant le MenuComponent.
Avant de faire cela,
ce que je vais faire est,
aller dans le dossier de l'application ici,
et ensuite dans le dossier de l'application,
Je vais créer un nouveau sous-dossier et le nommer comme sous-dossier partagé.
Maintenant, tous les fichiers que je vais partager sur différents composants,
Je vais le mettre dans le dossier partagé ici.
Maintenant, dans le dossier partagé,
Je vais créer un nouveau fichier nommé dish.ts.
A l'intérieur de ce dish.ts, je vais créer une classe pour définir
un plat et le rendre disponible pour les composants restants à utiliser.
Donc, pour définir une classe TypeScript ici,
je dirai export,
donc j'exporte cette classe TypeScript ici,
classe export, puis je nommerai la classe comme plat.
A l'intérieur de cette classe de plat,
Je peux maintenant définir diverses propriétés.
Donc, pour la classe dish,
je vais définir une propriété,
qui est un ID, que je définis comme une chaîne.
Maintenant, notez, si vous venez du monde JavaScript,
en JavaScript, vous n'avez pas besoin de spécifier le type d'une variable.
TypeScript vous permet de spécifier le type de chaque variable.
Donc, si vous spécifiez le nom, la colonne et la chaîne,
cela signifie que la variable name sera toujours du type string.
Donc, si vous essayez d'attribuer un entier au nom,
alors le compilateur TypeScript va automatiquement
attraper cela pour vous et vous dire qu'il y a une erreur.
C'est la raison pour laquelle, en utilisant TypeScript,
, vous pouvez réduire le nombre d'erreurs que vous pourriez causer.
JavaScript ne fait traditionnellement pas cette erreur
en vérifiant car il n'a aucun concept de types de données.
Mais si vous venez d'un langage de programmation traditionnel comme C ++ ou Java,
vous êtes très familier avec les types de données,
les types de données primitifs et
d'autres types de types de données déjà définis dans le langage.
TypeScript apporte cette fonctionnalité à JavaScript ou plutôt dans le cadre de TypeScript,
et qui vous permet de définir des variables et d'attacher des types à ces variables,
d'où le nom TypeScript.
Donc, pour le plat,
Je vais créer une propriété de nom.
Ensuite, je vais créer une propriété image,
qui est aussi une chaîne.
Cette chaîne d'image sera une chaîne qui pointe vers
l'URL de l'image que je vais utiliser pour ce plat particulier.
Ensuite, je vais définir une catégorie pour ce plat comme une autre chaîne en vedette comme booléenne,
étiquette comme une chaîne.
Prix sous forme de chaîne, puis description sous forme de chaîne.
Donc, ce sont des propriétés que j'associe à la classe de plat.
Donc, cela va définir différents plats dans mon menu de mon restaurant,
et pour chaque plat, je dois spécifier toutes ces différentes propriétés.
Maintenant, pourquoi aurais-je besoin de ça ?
Cela m'aidera à construire le menu de mon restaurant comme vous le verrez bientôt.
Donc, avec cela, nous terminons la définition de ma classe là-bas.
Sauvegardons les modifications dans le fichier dish.ts.
Maintenant, ce fichier dish.ts exporte une classe.
Maintenant, je peux importer cette classe dans n'importe lequel des fichiers de script de type composant
de mon application.
Ensuite, je vais passer à mon fichier menu.component.ts.
À l'intérieur du fichier menu.component.ts en plus d'importer le composant,
, je verrai également que vous importez un OnInit là.
Nous reviendrons à la partie OnInit dans l'un des exercices ultérieurs.
Je vais vous expliquer ce que cela fait dans un exercice ultérieur.
Nous allons également importer la nouvelle classe que nous avons créée appelée la classe Dish.
Pourquoi importons-nous cette classe de plats ?
Pour que nous puissions l'utiliser comme type pour une variable que je définit ici.
Alors, où est ce cours de plat ?
Il est dans../shared/dish.
Donc, c'est dans le dossier plat partagé ci-dessus.
Ensuite, vous verrez que nous avons défini le composant de menu ici.
Donc, vous pouvez voir qu'il dit,
« Exporter le composant de menu de classe », puis il dit, « Implémenter dessus. »
Nous reviendrons à cela dans un peu plus tard.
Vous voyez aussi qu'il y a un constructeur et qu'il y a une autre méthode ici appelée NGOnit.
Nous allons les utiliser dans certains exercices ultérieurs.
Alors, laissons-le là en tant que tel et nous reviendrons à
pour comprendre ce que c'est dans un court laps de temps.
Aussi, notez que pour ce composant,
le modèle est défini dans le composant de menu point HTML,
et les URL de style qui y sont définies.
Maintenant, en plus, dans ma classe de composant de menu,
, je vais inclure une nouvelle variable appelée comme
plats qui serait un tableau du type de plat.
Ok ? Ensuite, je vais simplement inclure l'ensemble de plats
dans ma variable vaisselle que j'ai définie ici.
Maintenant, taper tout ça à la main va me prendre beaucoup de temps.
Donc, au lieu de cela, ce que je vous suggère de faire est juste d'aller copier
le contenu directement à partir des instructions qui suivent cette vidéo.
Alors, c'est ce que je vais faire.
Alors revenez et collez ça ici.
Vous pouvez maintenant voir que j'ai coupé et collé les informations pour
tous mes plats à partir des instructions ici.
Donc, cela complète le tableau de tous les plats qui sont définis dans mes instructions.
Donc, c'est la façon la plus simple d'obtenir cette information.
Donc, il suffit de le couper et de le coller à partir de là.
Maintenant, notez que pour ce plat,
chacun d'eux est ici un objet JavaScript.
Donc, cela peut être mappé dans la classe de script de type correspondante là-bas.
Donc, vous pouvez voir que chaque objet JavaScript a des propriétés là-bas,
et ces propriétés correspondent exactement aux propriétés que j'ai définies pour ma classe de plat.
Donc, une fois que j'ai défini cela,
alors ces plats deviendront maintenant un tableau de
plats et cela deviendra maintenant disponible pour
à utiliser lorsque je définirai mon modèle HTML pour mon menu.
Sauvegardons les modifications que nous avons faites jusqu'à présent et puis nous allons
ouvrir le fichier menu.component.html.
Donc, nous allons aller au fichier menu.component.html.
Vous verrez que dans le fichier menu.component.html,
vous avez actuellement juste un P avec menu fonctionne ici.
Donc, si vous venez de coller là-dedans et de voir l'application fonctionner,
vous auriez vu que ce menu fonctionne à l'écran.
Je vais remplacer ceci par mon propre code de modèle ici.
C'est là que je vais prendre l'aide de la disposition de flex angulaire pour m'aider
à bien exposer mon contenu sur mon écran.
Donc, pour commencer,
Je vais commencer par un div,
auquel j'appliquerai une classe appelée conteneur.
Je vais définir la classe de conteneur en utilisant
du code CSS un peu plus tard dans cet exercice.
Donc, je vais appliquer le conteneur de classe ici.
Je vais également définir une propriété appelée fxlayout.
Un attribut appelé fxlayout.
Maintenant, ce fxlayout est un attribut
que la disposition de flex angulaire me permet d'appliquer à un div.
Cela spécifie si les divers contenus
que j'inclut à l'intérieur de ces div doivent être disposés horizontalement ou verticalement.
Donc, je vais spécifier ceci pour être une colonne.
Donc, quel que soit le contenu que j'inclue dans ce div,
sera disposé verticalement l'un en dessous de l'autre sur mon écran.
Si vous avez vu la façon de travailler sur la grille avec du contenu dans Bootstrap,
vous verrez que cela me dit essentiellement que je vais aller
tout mettre en une seule colonne là-bas.
Ne confondez pas cette colonne avec la colonne de Bootstrap de la grille de Bootstrap.
Ce sont deux choses différentes.
Ici, l'attribut est fxlayout et je spécifie colonne.
Je peux également spécifier ceci comme ligne,
ce qui signifie que le contenu sera disposé horizontalement.
Maintenant aussi, un attribut de plus que je vais spécifier pour cela est fxLayoutGap,
que je vais spécifier comme 10 pixel.
Donc, ce que cela signifie est que tout contenu que j'inclue ici
sera séparé l'un de l'autre par un écart de 10 pixels entre chacun d'eux.
De la connaissance de Bootstraps, vous voyez ce qu'est une limite.
Cela définit une séparation de coupure entre
deux éléments de contenu dans mon modèle d'application.
Donc, avec cela, nous fermerons la div ici.
Maintenant, dans ce div,
, je vais définir le contenu réel qui ira dans mon fichier menu.component.html.
Maintenant ici, je vais utiliser un autre composant que la conception matérielle
me fournit appelé comme composant de liste de tapis.
Donc, ce composant me permet de créer une liste d'éléments
que j'inclut dans mon modèle ici.
Donc, il s'agit d'un composant de liste de matériaux angulaires.
De Bootstrap, vous remarquez que dans Bootstrap nous avions l'objet média.
Donc, la liste des tapis est comme l'objet multimédia dans un sens de Bootstrap.
Maintenant, je vais appliquer une classe,
un attribut appelé FxFlex.
Maintenant, ce que cela signifie est que tout cela sera traité comme une unité ou un morceau de contenu
qu'ils seront disposés par ma disposition flex ici.
Donc, si vous êtes familier avec CSS flex layout.
Donc, c'est un morceau de contenu qui sera mis en page par ma mise en page CSS flex.
Donc, appliquez FxFlex ici,
et puis à l'intérieur ici je vais définir mat-list-item.
Donc, ceci est un élément de liste ici.
Donc, à partir de vos connaissances HTML,
si la balise LI que vous utilisez en HTML est similaire à ceci ici.
Donc, ceci est un élément de liste de mg ici.
Donc évidemment, à l'intérieur de cet élément de liste,
, vous allez définir la liste des choses.
Maintenant, angular fournit quelques directives structurelles que vous pouvez appliquer
à vos balises ici qui vous permettent de créer votre contenu.
Maintenant, je vais utiliser une directive structurelle appelée ngFor.
Nous verrons comment nous l'utilisons dans ce modèle.
Ensuite, après cet exercice,
, je vais vous expliquer brièvement ce que sont les directives structurelles et
quel est le but qu'elles servent dans la définition de vos modèles ici.
Donc, à l'intérieur de cet élément de liste vide, je vais dire,
star, notez la syntaxe, star ngFor.
Donc, ceci est la directive structurelle,
la directive structurelle ngFor en angulaire.
Ce que cette directive structurelle ngFor vous permet de faire est
d'itérer sur un tableau d'éléments.
Rappelez-vous que nous avons défini les plats comme un tableau d'objets plats dans notre code.
Maintenant, dans mon modèle,
, j'aurai accès à cet objet vaisselle.
Donc ici, si je veux itérer dessus,
comme je le spécifie, je dirai,
« Laissez plat de plats. »
C'est ainsi que fonctionne la syntaxe pour la directive structurelle ngFor.
Alors, laissez plat de plats.
Ce que cela signifie, c'est que la vaisselle est le tableau d'objets plats.
Lorsque nous sélectionnons dire laisser plat de plats,
cela me permettra d'accéder à chaque élément de
le tableau et ensuite cela m'aide à itérer sur le tableau.
C'est comme une boucle for,
si vous êtes familier avec pour les boucles de programmation.
Donc, cela agit comme une boucle for pour vous et puis cela vous aide à itérer
sur tous les éléments du tableau de plats ici.
Ce plat devient un objet JavaScript qui me permet
d'accéder à chaque élément de ce tableau là.
Maintenant, à partir de cela, nous pouvons également maintenant obtenir un accès
aux propriétés de chaque objet individuel à l'intérieur de mon tableau de plats.
Alors, je peux les utiliser pour définir mon modèle ici.
Laissez-moi exposer le modèle et ensuite nous allons revenir en arrière et
regarder comment ces deux sont interdépendants ici.
Maintenant, à l'intérieur de mon élément de liste vide,
Je peux inclure une image avec l'attribut comme matListAvatar.
Donc, cela me permet d'inclure une image et ensuite avec la source spécifiée ici.
Maintenant intéressant, regardez la syntaxe que j'utilise ici.
À l'intérieur des doubles accolades, je vais dire dish.image.
Ce que cela signifie, c'est qu'il s'agit d'une interpolation unidirectionnelle dont nous parlons.
Ici, quand je spécifie cela,
ce que cela signifie est que cette source obtiendra la valeur de dish.image qui a défini dans
mon objet JavaScript que j'ai défini dans
ma classe de script de type là-bas et qui est disponible pour moi pour faire la mise en page ici.
Donc, que la valeur dish.image sera disponible pour moi et aussi pour cette image,
je vais spécifier une valeur alternative comme dish.name.
Rappelons que mon plat avait aussi la propriété name disponible pour
moi afin que cela définit une image pour ma liste ici.
Vous allez bientôt réaliser à quel point cette liste ressemble à
l'écran lorsque nous remplissons ce modèle ici.
De plus, je vais utiliser un h1 avec la balise MatLine.
Encore une fois, c'est l'utilisation de
le composant de matériau angulaire de liste pour définir mon modèle ici.
Donc, je dis h1 MatLine donc cela m'aide à définir une ligne ici et puis à l'intérieur,
Je vais utiliser les doubles accolades et dire dish.name ici.
Donc, cela me permet d'obtenir la valeur du nom du plat là-bas.
Donc, cela définit une ligne, puis le dans la ligne suivante, je vais dire p MatLine.
Donc, je vais utiliser la balise p ici, puis fermer
de la balise p, puis à l'intérieur de la balise p,
je vais utiliser une span pour définir dish.description.
Donc, si vous êtes familier avec les objets JavaScript,
vous voyez maintenant comment j'accède aux propriétés de
mon objet JavaScript ici, dish.description ici.
Pour noter, courir à travers cette fois de plus
l'attribut ngFor me permet d'itérer sur un tableau d'objets ici.
Donc, la vaisselle est ici un tableau d'objets plats.
Donc, quand je dis laisser plat de plats,
ce plat me donnera accès à chaque élément de
mon tableau de plats et je itère sur chaque élément du tableau
et puis je vais créer ce contenu pour chacun d'eux.
Donc, cet élément de liste vide,
agit essentiellement comme une boucle for de
votre langage informatique traditionnel, puis il itère sur
la liste des plats, puis dispose chacun d'eux sur mon écran.
Donc, avec ce changement,
enregistrons le fichier composant du menu.
Ensuite, nous allons à l'app.module.ts et nous devons importer le module MatList dans ce.
Donc, disons, importer MatListModule
de Angular/Material/List.Une fois que nous avons importé cela là,
puis nous descendons et mettons à jour les importations dans
le décorateur de module Ng et ajouter dans
le module MatList à la liste des importations là-bas.
Ceci mon application module.ts est maintenant mis à jour et puis aussi,
Je vais aller dans le fichier styles.scss, puis ajouter
dans la classe conteneur ici.
Que définit la classe conteneur ici ?
La classe conteneur est marge 20 pixels
et afficher flex et enregistrer les modifications.
Maintenant, allons jeter un oeil à notre page Web.
Aller à notre page web.
Voila. Voilà, tu y vas.
Le menu de notre restaurant montré dans toute sa splendeur sur l'écran.
Vous voyez comment ce menu a été créé.
Regardez le tableau d'objets JavaScript que vous avez vu.
Regardez comment chacune des propriétés du tableau d'objets JavaScript a été utilisée et
mappée aux quatre éléments de ma liste.
Regardez comment les images correspondantes ont été incluses ici
en utilisant le MatlistAvatar ici.
Donc, cela crée des images rondes ici, puis notez comment le nom de
le plat est affiché ici, puis la description du plat inclus ici.
Merveilleux. Maintenant, nous avons le menu pour notre restaurant sur
l'écran en utilisant un composant de menu dans Angular.
Ceci termine cet exercice.
Dans cet exercice, nous avons appris à créer un nouveau composant.
l'ajouter dans notre application Angular,
comment inclure ce composant dans le modèle de
un autre composant afin de créer la hiérarchie des composants.
Ensuite, nous avons vu comment nous pouvons utiliser la disposition de flex angulaire et aussi
les composants de conception de matériaux pour concevoir
le modèle pour notre composant de menu pour afficher le contenu ici.
Maintenant, si vous me demandez comment je me souviens de toutes ces choses.
Eh bien, pour être honnête,
vous ne vous souvenez pas de tout, mais vous devez comprendre l'approche.
C'est plus important que d'essayer de mémoriser ces choses.
Maintenant, si vous me demandez où puis-je obtenir les informations sur
le composant de liste à partir du matériau angulaire.
Nous pouvons trier la documentation matérielle angulaire et là vous
aurez les détails sur la façon dont un composant de liste doit être préparé.
Maintenant, où obtenons-nous les détails sur la façon dont nous concevons un composant en angulaire ?
Nous avons juste examiné un peu de cela et puis dans cet exercice,
nous avons appris comment créer un nouveau composant et ensuite l'appliquer dans notre application angulaire.
Donc, c'est un bon point pour vous de faire un commentaire
get avec les composants du message première partie.
Dans le prochain exercice,
nous allons améliorer cela un peu plus en utilisant un autre type
de composant de matériau angulaire pour disposer le contenu sur mon écran.