Il est temps de poursuivre notre prochain exercice où nous examinerons à nouveau les composantes.
Nous allons modifier le modèle pour
le composant de menu que nous avons déjà inclus dans notre application Angular
en utilisant un nouveau type de composant matériel pour mettre en page notre menu d'une manière différente.
En cours de route, nous examinerons également l'utilisation de la directive structurelle nGiF.
En allant dans le fichier template de notre composant de menu,
Je vais apporter quelques modifications à ce fichier template.
Tout d'abord, je vais ajouter dans un autre div ici
avec FxFlex et ensuite fermer ce div là.
Donc, remarquez que maintenant à l'intérieur de mon div externe,
j'ai deux divs ici.
Donc, un avec le div et le second avec la liste vide.
Donc, ce sont deux éléments de contenu qui doivent être disposés sur l'écran.
Mais notez que j'ai spécifié le FXLayout pour être coloré.
Donc, ce qui signifie que, ces deux morceaux de contenu
seront disposés l'un sur l'autre,
empilés l'un sur l'autre.
Donc, dans la première div,
, je vais inclure un peu de contenu ici.
Donc, je vais mettre un autre div à l'intérieur ici.
Plus tard, je vais ajouter plus dans ce div.
Mais pour le moment, je n'aurai qu'un h3 avec l'élément de menu là-bas,
, puis ajouterai un élément de ligne horizontale à ce menu.
Donc, cela donnera le titre de
cette page particulière directement en haut dans mon application quand elle est rendue.
Donc, c'est une modification.
Maintenant, pour la deuxième partie,
au lieu d'utiliser le mat-list-item,
je vais maintenant prendre l'aide d'une mat-grid-list.
Mat-Grid-list me permet de mettre en page le contenu comme
une grille d'éléments plutôt qu'une liste d'éléments.
Nous avons vu comment le menu était aménagé avec la liste des éléments de l'exercice précédent.
Maintenant, je voudrais disposer le même menu d'une manière différente une disposition
un peu plus attrayante pour le menu.
Donc, au lieu d'utiliser la liste de mat-list,
je vais maintenant changer ceci de mat-list à mat-grid-list.
Donc, avant de faire cela,
Je vais aussi l'inclure dans une autre div à laquelle j'appliquerai le FxFlex ici,
afin que la mat-grid-list soit dans sa propre.
Donc, cela me donnera plus de flexibilité pour ajouter des éléments
à cette unité particulière si j'en ai besoin plus tard.
La liste des grilles prend maintenant un paramètre appelé
colonnes qui spécifie le nombre de colonnes que cette grille doit contenir.
En ce moment, je vais spécifier les colonnes comme deux parce que je n'ai que quatre éléments dans mon menu.
Donc, deux colonnes suffisent.
Donc, au moins j'ai deux rangées de la grille là-bas.
Aussi, cela prend un autre paramètre appelé
comme RowHeight ou un attribut appelé RowHeight,
que je spécifierai pour être 200 pixels ici.
Donc, cela compléterait la liste de mat-grid-list que j'ai à l'intérieur de la div là-bas.
Maintenant, une fois que j'ai fait le changement, puis à l'intérieur de ceci,
Je vais entrer et utiliser,
au lieu du mat-list-item,
ce sera maintenant un mat-grille-tuile ici.
Donc, la tuile de la grille.
Fondamentalement, les tuiles de la grille.
Cette grille, comme vous le réalisez,
Je vais parcourir la liste des plats.
Donc, j'utilise toujours ma directive ngFor avec elle.
Ce mat-grille-tuile enfermera maintenant
le contenu qui va être disposé dans chaque tuile de ma grille ici.
Maintenant, à l'intérieur de la tuile,
Je vais utiliser l'image telle qu'elle existe.
Mais je vais utiliser l'image,
pas avec le MatlistAvatar parce que cela ne peut pas être appliqué ici, et à la place,
je vais spécifier la hauteur de l'image comme 200 pixels.
Donc, cela correspond à la hauteur de la ligne afin que mon image s'étire
toute la hauteur de ma tuile là-bas.
Donc, la hauteur de l'image, 200 pixels,
et la source et l'alt resteront en tant que tels.
Ensuite, la partie suivante,
au lieu du h1,
Je vais changer celui-ci
pour être
enfermé dans mat-grid-tuile-footer.
Donc, quel que soit le contenu à l'intérieur ici apparaîtra dans le mat-grid-tuile-footer ici.
Maintenant, à l'intérieur, je peux spécifier le contenu que je veux.
Donc, pour la tuile de grille,
étant donné la description complète est un peu trop.
Donc, je vais supprimer cette description,
et à la place, n'utiliser que le h1 là-bas.
Maintenant, en plus, je vais prendre l'aide d'un tuyau angulaire ici.
Le tuyau que je vais appliquer à cela, comme vous pouvez le voir,
le tuyau est la barre verticale de votre clavier.
Ensuite, j'utiliserai le tuyau majuscule.
Alors, que fait ce tuyau ?
Ce tuyau, le tuyau majuscule transformera le nom du plat de
tout ce qu'il est en un mot entier avec des lettres majuscules.
Donc, quel que soit le nom du plat serait rendu comme
lettres complètement majuscules quand il est rendu sur le modèle là-bas.
Donc, c'est l'utilisation d'un tuyau angulaire ici.
Donc, nous allons utiliser plus de tuyaux angulaires à mesure que nous avançons.
C'est notre première rencontre avec l'un des tuyaux angulaires intégrés dans ce cours.
Donc, avec cela, nous avons maintenant modifié notre mise en page
pour montrer cette div ici, puis cette liste de grille ici.
Sauvegardons les modifications.
En allant maintenant au fichier app.module.ts,
nous devons importer le MattGridListModule là-dedans.
Donc, en allant en haut là-bas, nous allons dire,
« Importer MatGridListModule à partir de angulaire/material/grille/list. »
Une fois que nous avons ajouté ceci,
alors nous allons descendre aux importations dans le décorateur,
et ensuite inclure le MattGridListModule dans les entrées.
Sauvegardons encore les modifications.
Allons jeter un coup d'œil à notre page Web et à quoi elle ressemble à l'écran.
En allant sur notre page web,
, vous pouvez maintenant voir que votre menu est maintenant aménagé d'une manière différente.
Bien que, ce n'est pas vraiment si beau regarder le moment.
Je ne suis pas designer,
donc c'est le meilleur que j'ai pu obtenir de lui.
Maintenant, si j'avais 20 éléments dans mon menu,
alors je pourrais disposer plusieurs éléments sur chaque rangée et plusieurs colonnes,
et ensuite je pourrais compresser l'espace que chaque article occupe,
ou je peux augmenter la taille de l'image pour qu'elle occupe toute la chose jusqu'à ce qu'elle paraisse beaucoup plus attrayante
sur l'écran.
Maintenant, jetons un coup d'oeil à cette même chose quand elle est affichée sur l'écran d'un plus petit appareil.
Donc, c'est là que je vais prendre l'aide de
les options de développeur dans mon navigateur Chrome.
Donc, je vais commencer ici les outils de développement.
Quand j'ai les outils de développement ici,
vous pouvez voir ce bouton ici disant, « Basculer la barre d'outils de l'appareil. »
Alors, laisse-moi revenir en arrière.
Ensuite, vous pouvez voir la même page rendue sur différentes tailles d'écran.
Donc ici, vous voyez la page en cours de rendu dans un Galaxy S5,
et puis la même chose
vous pouvez le voir être rendu en mode paysage.
Donc, vous pouvez voir que cela me permet de voir la même page
sur différentes tailles d'écran en utilisant les outils de développement intégrés dans Android.
Alors, regardons à quoi il ressemble sur un iPhone.
Le menu semble beaucoup plus attrayant ici.
C'est ce que je voudrais réaliser sur l'écran.
Si mes images étaient beaucoup plus grandes en taille même sur les écrans haute résolution,
le menu ressemblerait à ceci.
En mode paysage, c'est à ça que ça va ressembler.
Maintenant, prenez note de ces outils de développement dans Chrome.
Nous allons utiliser les outils de développement plus tard lorsque nous utilisons Angular en
plus en détail parce que nous pouvons examiner des choses comme ce que Angular
peut imprimer pour nous sur la console.
Ensuite, nous pouvons même examiner comment les différentes parties de notre application sont récupérées.
Nous pouvons regarder les performances réseau de notre application, et ainsi de suite.
Donc, c'est là que l'ajout de ces outils de développement est très,
très utile pour nous.
Retourner à la manière normale,
c'est à quoi ressemble notre page Web sur un navigateur de bureau standard.
Nous n'avons pas encore fini.
Revenons aux composants du menu.
Fichier dactylographié et ensuite ce plat que j'ai
défini ici au lieu de garder ceci dans ma classe,
Je vais déplacer cette vaisselle dans une constante que j'
définirai juste là-haut et nous le nommerons comme des plats de const,
et ce serait du type plat un tableau,
et puis je va couper tout cet ensemble de plats d'ici et ensuite le déplacer là-haut.
Ceci est en préparation pour un futur exercice où nous allons
pour ne pas inclure ce genre de données dans notre application,
mais nous allons plutôt déplacer cela dans un service.
Donc, ce que j'ai fait c'est couper que l'information de la vaisselle et
puis mettre dans une constante ici avec le nom des plats dans toutes les capitales ici,
et puis maintenant mes plats sont laissés comme un orphelin ici.
Donc, je vais le rendre égal à la vaisselle ici.
Maintenant, vous devez vous demander comment se fait-il que j'aie retiré le type de la vaisselle.
TypeScript est assez intelligent pour réaliser que lorsque vous faites cela,
, il attribuera automatiquement le type aux plats pour correspondre à ce que vous avez dans les plats.
Donc, même si vous ne le tapez pas dans TypeScript le fera,
mais si vous voulez être complètement clair, vous
pouvez le faire aussi et cela fonctionnera tout aussi bien.
Ok, si vous préférez, cela le laissera comme tel.
Maintenant, en plus, je vais introduire une autre variable ici appelée SelectedDish.
Cette variable que je vais utiliser dans cet exercice et l'un des exercices ultérieurs aussi.
Donc, je vais rendre cela égal au premier plat de mon tableau.
Maintenant, ce SelectedDish sera utile pour la prochaine partie de cet exercice.
Alors, sauvegardons les modifications, puis revenons à notre modèle.
Dans le modèle, ce que je vais faire est juste en dessous du menu,
Je vais utiliser un élément de carte de matériel angulaire à
afficher ce SelectedDish juste en dessous du menu là-bas.
Maintenant, bien que ce ne soit pas la meilleure façon de le faire,
mais ceci que je fais en préparation pour le prochain exercice juste pour
vous illustrer comment un élément de carte matériel peut être utilisé pour notre application.
Donc, je vais utiliser un div avec un flex fx ici,
et puis à ce div je vais ajouter en
un NGiF avec le SelectedDish.
Donc, notez que j'applique un NGif à ce div ici pour
spécifier que si le SelectedDish est actuellement nul,
alors je n'ajouterai pas ce div au dom.
Si ce n'est pas le cas,
alors cette div sera ajoutée au dom,
et affichera l'élément de carte avec le contenu dans le If.
Donc, je vais utiliser un élément de carte pour afficher les détails du SelectedDish.
Donc, pour ce faire,
J'utilise une carte de mat-card ici de la carte de conceptions de matériaux ici.
La carte de mat-card elle-même a
une partie d'en-tête de mat-card
et aussi avec le mat-card-header,
elle aura un mat-card-content.
Laissez-moi fermer ce mat-card-content.
Alors, dans l'en-tête, que dois-je montrer dans l'en-tête ?
Dans l'en-tête, je veux utiliser
un mat-card-title pour afficher
les détails du nom du SelectedDish ici.
Donc, j'irais dire h3 et fermer le h3 et ici je vais utiliser
l'interpolation et ensuite dire
SelectedDish nom et pipe majuscules.
Donc, notez comment j'ai inclus le nom du SelectedDish en utilisant le mat-card-title.
Maintenant, en plus, je vais utiliser une méthode,
une image appelée qui prend un attribut appelé mat-card-image et
la source serait comme vous vous attendiez,
cela devrait être selectedDish.image et
puis l'alternative que je vais
pour donner comme selectedDish.name.
Donc, ce serait l'image qui sera incluse dans ma carte ici.
Donc, dans le contenu,
Je vais inclure SelectedDish description,
et ensuite avec le contenu ici,
je peux aussi ajouter quelques boutons au bas de la carte.
Donc, je vais utiliser mat-card-actions ici et à l'intérieur
, je peux inclure un bouton.
Donc, vous voyez que c'est l'utilisation d'un bouton
dans mon application, deux boutons.
Remarquez l'utilisation de ce bouton mat-button ici.
Donc, cela va transformer ce bouton en un design matériel comme bouton ici,
et ainsi, ces deux boutons apparaîtront en bas de ma carte ici.
Donc, avec cela, j'ai ajouté dans les détails du SelectedDish.
Il y a des raisons pour moi de le faire.
Je vous montre comment vous pouvez afficher les détails dans une carte,
bien, ceci est en préparation pour votre première mission.
Donc, vous pouvez voir comment nous pouvons utiliser une carte de conception matérielle dans notre modèle ici.
En allant à @module .ts, nous devons importer la carte et le module de bouton.
Donc, en allant au sommet, nous allons dire importer MatCardModule à partir de la carte matérielle angulaire
et
importer MatButtonModule à partir du bouton matériau angulaire.
Maintenant que nous avons ajouté ces deux vers le haut,
allons au décorateur,
et dans les importations nous allons ajouter dans le MatCardModule et le MatPatternModule.
Alors, sauvegardons les changements, puis jetez un coup d'œil à notre page web.
En regardant notre application angulaire dans le navigateur,
vous voyez maintenant que nous avons le menu affiché
ici, puis en bas nous avons maintenant un élément de carte.
Donc, vous pouvez voir l'élément de la carte ici avec le titre là-bas et l'image là-bas.
Bien sûr, l'image semble horrible parce que c'est
la taille réelle de l'image que je vous ai donnée est si
petite et elle a été étendue pour remplir tout l'écran.
Regardez le fond ici. Donc, ce
contient la description de l'image, puis deux boutons ici,
juste en bas ici.
Donc, c'est ainsi que le mat-button styles les boutons dans un modèle angulaire,
de sorte que vous avez comme et le bouton de partage.
Bien sûr, ils ne font rien,
mais notez la conception matérielle comme le comportement est là.
Donc, quand vous cliquez sur le bouton,
vous pouvez voir les ondulations qui passent.
Donc, c'est la raison pour laquelle j'ai décidé d'utiliser
le module de matériau angulaire pour concevoir les modèles dans ce cours.
Donc, en regardant sur un appareil plus petit,
il semble beaucoup plus attrayant sur un appareil plus petit.
Donc, vous pouvez voir que le rendu est beaucoup mieux sur un appareil plus petit,
vous pouvez voir que sur l'écran vous pouvez voir
la carte juste là montrant les détails et les deux boutons là,
le like et le bouton de partage,
et les détails du plat.
Donc, cela complète cet exercice.
Ainsi, dans cet exercice,
, nous avons examiné l'utilisation de la liste de grille et
les composants de conception de matériel de carte pour concevoir le modèle de notre composant de menu.
C'est peut-être un bon moment pour vous de faire un bon commentaire avec le message,
Composants angulaires deuxième partie.