È ora di continuare con il nostro prossimo esercizio in cui esamineremo ancora una volta i componenti.
Modificheremo il modello per
il componente di menu che abbiamo già incluso nella nostra applicazione Angular
utilizzando un nuovo tipo di componente materiale per il layout del nostro menu in modo diverso.
Lungo il percorso, esamineremo anche l'uso della direttiva strutturale NGif.
Andando al file modello del nostro componente menu,
ho intenzione di apportare alcune modifiche a questo file modello. Per
prima cosa, aggiungerò un altro div qui
con FxFlex e poi chiuderò quel div lì.
Quindi, nota che ora all'interno del mio div esterno,
ho due div qui.
Quindi, uno con il div e il secondo con la lista vuota.
Quindi, questi sono due pezzi di contenuto che devono essere disposti sullo schermo.
Ma nota che ho specificato che FxLayout deve essere colorato.
Quindi, il che significa che, questi due pezzi di
contenuto saranno disposti uno sopra l'altro,
impilati uno sopra l'altro.
Quindi, nel primo div,
includerò un po 'di contenuto qui.
Quindi, metterò un altro div qui dentro.
Più tardi, aggiungerò di più in questo div.
Ma per il momento, avrò solo un h3 con la voce di menu lì,
e quindi aggiungerò un elemento di linea orizzontale a questo menu.
Quindi, questo darà il titolo per
questa particolare pagina proprio in cima alla mia applicazione quando viene renderizzata.
Quindi, questa è una modifica.
Ora, per la seconda parte,
invece di usare il mat-list-item,
ora prenderò l'aiuto di un mat-grid-list.
Mat-grid-list mi consente di layout del contenuto come
una griglia di elementi piuttosto che un elenco di elementi.
Abbiamo visto come il menu è stato disposto con l'elenco degli elementi nell'esercizio precedente.
Ora, vorrei disporre lo stesso menu in un modo diverso un
po 'più attraente layout per il menu.
Quindi, invece di usare la mat-list,
ora cambierò questo da mat-list a una mat-grid-list.
Quindi, prima di farlo,
racchiuderò anche questo all'interno di un altro div a cui applicherò il FxFlex qui, in
modo che la mat-grid-list sia nel suo lì.
Quindi, questo mi darà più flessibilità per aggiungere articoli
a questa particolare unità se ne ho bisogno in seguito.
La lista griglia ora accetta un parametro chiamato come
colonne che specifica quante colonne dovrebbe contenere questa griglia.
In questo momento specificherò le colonne come due perché ho solo quattro voci nel mio menu.
Quindi, due colonne sono sufficienti.
Quindi, almeno ho due file della griglia lì.
Inoltre, questo accetta un altro parametro chiamato
come rowHeight o un attributo chiamato come rowHeight,
che specificherò come 200 pixel qui.
Quindi, questo completerebbe la lista di mat-grid-list che ho all'interno del div lì.
Ora, una volta apportato il cambiamento, poi all'interno di questo,
entrerò e userò,
invece del mat-list-item,
questo sarà ora un mat-grid-tile qui.
Quindi, la tessera della griglia.
Fondamentalmente, piastrelle della griglia.
Questa tessera griglia, come ti rendi conto,
sto per scorrere la lista dei piatti.
Quindi, sto ancora usando la mia direttiva ngFor con esso.
Questo mat-grid-tile ora racchiuderà
il contenuto che verrà disposto in ogni riquadro della mia griglia qui.
Ora, all'interno della tessera,
userò l'immagine così come esiste.
Ma userò l'immagine,
non con MatlistAvatar perché non può essere applicato qui, e invece,
specificherò l'altezza per l'immagine come 200 pixel.
Quindi, questo corrisponde all'altezza della riga in modo che la mia immagine estenda
l'intera altezza della mia tessera lì.
Quindi, l'altezza dell'immagine, 200 pixel,
e la sorgente e l'alt rimarranno come tali.
Quindi, la parte successiva,
invece di h1,
cambierò questo per
essere
racchiuso all'interno di mat-grid-tile-footer.
Quindi, qualunque contenuto sia qui dentro apparirà all'interno del mat-grid-tile-footer qui.
Ora, dentro lì posso specificare qualsiasi contenuto che voglio.
Quindi, per la tessera della griglia,
data la descrizione completa è un po 'troppo.
Quindi, ho intenzione di rimuovere questa descrizione,
e invece, utilizzare solo l'h1 lì.
Ora, inoltre, prenderò l'aiuto di un tubo angolare qui.
Il tubo che ho intenzione di applicare a questo, come puoi vedere,
il tubo è la barra verticale sulla tastiera.
Quindi, userò il tubo maiuscolo.
Allora, cosa fa questa pipa?
Questa pipa, la pipa maiuscola trasformerà il nome del piatto da
qualunque cosa sia in un'intera parola con lettere maiuscole.
Quindi, qualunque sia il nome del piatto sarebbe reso come
lettere completamente maiuscole quando viene eseguito il rendering sul modello lì.
Quindi, questo è l'uso di un tubo angolare qui.
Quindi, useremo più tubi angolari mentre andiamo avanti.
Questo è il nostro primo incontro con uno dei tubi angolari incorporati in questo corso.
Quindi, con questo, abbiamo ora modificato il nostro layout
per mostrare questo div qui e poi questa lista di griglia qui.
Salviamo le modifiche.
Andando ora al file app.module.ts,
abbiamo bisogno di importare il MatGridListModule lì dentro.
Quindi, andando in cima lì, diremo,
«Importa MatGridListModule da angolare/materiale/griglia/lista».
Una volta aggiunto questo,
allora andremo giù alle importazioni nel decoratore
e quindi includeremo il MatGridListModule negli input.
Salviamo, ancora una volta, le modifiche.
Andiamo a dare un'occhiata veloce alla nostra pagina web e come appare sullo schermo.
Andando alla nostra pagina web,
ora puoi vedere che il tuo menu è ora disposto in un modo diverso.
Anche se, non è davvero così bello guardare al momento.
Non sono un designer,
quindi questo è il meglio che ho potuto ottenere da esso.
Ora, se avessi 20 elementi nel mio menu,
potrei disporre più elementi su ogni riga e più colonne,
e quindi potrei comprimere lo spazio che ogni elemento occupa,
oppure posso aumentare la dimensione dell'immagine in modo che
occupi l'intera cosa fino a quando sembrerà molto più attraente sul schermo.
Ora, diamo un'occhiata a questa stessa cosa quando viene visualizzato in uno schermo di dispositivi più piccoli.
Quindi, questo è dove ho intenzione di prendere l'aiuto
delle opzioni di sviluppo nel mio browser Chrome.
Quindi, inizierò gli strumenti di sviluppo qui.
Quando ho gli strumenti di sviluppo qui,
puoi vedere questo pulsante qui dicendo «Attiva/disattiva barra degli strumenti del dispositivo».
Quindi, fammi tornare indietro.
Quindi puoi vedere la stessa pagina che viene renderizzata su schermi di dimensioni diverse.
Quindi qui, vedi la pagina che viene renderizzata in un Galaxy S5,
e poi la stessa cosa
puoi vedere che viene renderizzata in modalità orizzontale.
Quindi, puoi vedere che questo mi consente di visualizzare la stessa pagina
su schermi di diverse dimensioni utilizzando gli strumenti di sviluppo integrati in Android.
Quindi, diamo un'occhiata a come appare su un iPhone.
Il menu sembra molto più attraente qui.
Questo è ciò che vorrei ottenere sullo schermo.
Se le mie immagini fossero di dimensioni molto più grandi anche sugli schermi a risoluzione più alta,
il menu sarebbe simile a questo.
In modalità orizzontale, questo è come apparirà.
Ora, prendi nota di questi strumenti di sviluppo in Chrome.
Useremo gli strumenti di sviluppo più avanti quando usiamo Angular in
modo più dettagliato perché possiamo esaminare cose come quello che Angular
può stampare per noi sulla console.
Quindi possiamo anche esaminare come vengono recuperate le diverse parti della nostra applicazione.
Possiamo guardare le prestazioni di rete della nostra applicazione e così via.
Quindi, questo è dove questi strumenti di sviluppo aggiunta è molto,
molto utile per noi.
Tornando al modo normale,
questo è come appare la nostra pagina web su un browser desktop standard.
Non abbiamo ancora finito.
Torniamo ai componenti del menu.
File dattiloscritto e poi questi piatti che ho
definito qui invece di mantenere questo all'interno della mia classe,
ho intenzione di spostare questi piatti in una costante che
definirò proprio lassù e lo chiameremo come piatti const,
e questo sarebbe del tipo piatto un array,
e poi taglierò tutta questa serie di piatti da qui e poi spostarla lassù.
Questo è in preparazione per un esercizio futuro in cui
non includeremo questo tipo di dati nella nostra applicazione,
ma invece lo sposteremo in un servizio.
Quindi, quello che ho fatto è tagliare che le informazioni piatti e
poi metterlo in una costante qui con il nome piatti in tutte le capitali qui,
e poi ora i miei piatti sono lasciati come un orfano qui.
Quindi, questo lo renderò uguale ai piatti qui.
Ora, devi chiederti come mai ho rimosso il tipo per i piatti.
TypeScript è abbastanza intelligente da rendersi conto che quando
lo fai, assegnerà automaticamente il tipo ai piatti per abbinare ciò che hai nei piatti.
Quindi, anche se non lo digiti in TypeScript lo farà,
ma se vuoi essere completamente chiaro
puoi farlo anche tu e funzionerà altrettanto bene.
Ok, se preferisci questo lo lascera' come tale.
Ora, in aggiunta, ho intenzione di introdurre un'altra variabile qui chiamata SelectedDish.
Questa variabile ho intenzione di utilizzare in questo esercizio e uno degli esercizi successivi anche.
Quindi, ho intenzione di rendere questo uguale al primo piatto nella mia matrice.
Ora, questo SelectedDish sarà utile per la parte successiva di questo esercizio.
Quindi, salviamo le modifiche e poi torniamo al nostro modello.
Nel modello, quello che ho intenzione di fare è proprio sotto il menu,
ho intenzione di utilizzare un elemento di carta da materiale angolare per
visualizzare questo SelectedDish proprio sotto il menu lì.
Ora, anche se questo non è il modo migliore per farlo,
ma questo lo sto facendo in preparazione per il prossimo esercizio solo per
illustrarvi come un elemento di carta materiale può essere utilizzato per la nostra applicazione.
Quindi, ho intenzione di usare un div con un flex fx qui,
e poi a questo div ho intenzione di aggiungere in
un NGIF con SelectedDish.
Quindi, nota che sto applicando un NGIF a questo div qui per
specificare che se SelectedDish è attualmente nullo,
allora non aggiungerò questo div al dom.
Se non lo è,
allora questo div verrà aggiunto al dom
e mostrerà l'elemento della scheda con il contenuto in If.
Quindi, ho intenzione di utilizzare un elemento di carta per visualizzare i dettagli di SelectedDish.
Quindi, per farlo,
io uso una mat-card qui dalla scheda disegni materiali qui.
La mat-card stessa ha
una parte di intestazione mat-card
e anche insieme all'intestazione mat-card,
avrà un mat-card content.
Lasciate che chiuda quel contenuto della scheda.
Quindi, nell'intestazione, cosa voglio mostrare nell'intestazione?
Nell' intestazione, voglio usare
un mat-card-title per mostrare
i dettagli del nome del selectedDish qui.
Quindi, vorrei entrare e dire h3 e chiudere l'h3 e dentro qui ho intenzione di
usare l'interpolazione e poi dire
SelectedDish nome e pipe maiuscole.
Quindi, nota come ho incluso il nome di SelectedDish usando il mat-card-title.
Ora, in aggiunta, ho intenzione di utilizzare un metodo,
uno chiamato immagine che prende un attributo chiamato mat-card-image e
la fonte sarebbe come previsto,
questo dovrebbe essere selectedDish.Image e
quindi l'alternativa che ho intenzione di
dare come selectedDish.name.
Quindi, questa sarebbe l'immagine che verrà inclusa nella mia scheda qui.
Quindi, nel contenuto,
includerò la descrizione SelectedDish,
e quindi insieme al contenuto qui,
posso anche aggiungere alcuni pulsanti alla parte inferiore della scheda.
Quindi, userò le azioni di mat-card qui e
dentro posso includere un pulsante.
Quindi, vedi che questo è l'uso di un pulsante
nella mia applicazione, due pulsanti.
Si noti l'uso di questo tappetino pulsante qui.
Quindi, questo trasformerà questo pulsante in un design materiale come il pulsante qui,
e così, questi due pulsanti appariranno nella parte inferiore della mia carta qui.
Quindi, con questo, ho aggiunto i dettagli del SelectedDish.
C' è ragione per me di farlo.
Ti sto mostrando come puoi visualizzare i dettagli in una scheda,
beh, questo è in preparazione per il tuo primo incarico.
Quindi, puoi vedere come possiamo usare una scheda di progettazione materiale nel nostro modello qui.
Andando a @module .ts, abbiamo bisogno di importare la scheda e il modulo pulsante.
Quindi, salendo in cima diremo importare MatcardModule dalla
scheda materiale angolare e
importare MatButtonModule dal pulsante materiale angolare.
Ora che abbiamo aggiunto questi due in alto,
andiamo al decoratore,
e nelle importazioni aggiungiamo il MatcardModule e il MatPatternModule.
Quindi, salviamo le modifiche e poi diamo una rapida occhiata alla nostra pagina web.
Dando un'occhiata alla nostra applicazione angolare nel browser,
ora vedi che abbiamo il menu visualizzato
qui e poi in basso ora abbiamo un elemento scheda.
Quindi, puoi vedere l'elemento della carta qui con il titolo lì e l'immagine lì.
Naturalmente, l'immagine sembra orribile perché è
la dimensione effettiva dell'immagine che ti ho dato è così
piccola ed è stata espansa per riempire l'intero schermo.
Guarda qui in fondo. Quindi, questo
contiene la descrizione dell'immagine e poi due pulsanti qui,
proprio qui sotto.
Quindi, questo è il modo in cui il mat-button stili i pulsanti in un modello angolare, in
modo da avere come e il pulsante di condivisione.
Certo, non stanno facendo nulla,
ma nota il design del materiale come il comportamento è lì.
Quindi, quando fai clic sul pulsante,
puoi vedere le increspature che attraversano.
Quindi, questo è il motivo per cui ho deciso di utilizzare
il modulo materiale angolare per progettare i modelli in questo corso.
Quindi, dandogli un'occhiata su un dispositivo più piccolo,
sembra molto più attraente su un dispositivo più piccolo.
Quindi, puoi vedere che il rendering è molto meglio su un dispositivo più piccolo,
puoi vedere che sullo schermo puoi vedere
la scheda che mostra i dettagli e i due pulsanti lì,
il like e il pulsante di condivisione
e i dettagli del piatto.
Quindi, questo completa questo esercizio.
Quindi, in questo esercizio,
abbiamo esaminato l'uso della lista della griglia e dei
componenti di progettazione del materiale della scheda per progettare il modello per il nostro componente di menu.
Questo potrebbe essere un buon momento per fare un buon commento con il messaggio,
Componenti angolari parte due.