Ora passeremo al
nostro prossimo esercizio in cui creeremo
un nuovo componente e aggiungerlo alla nostra applicazione angolare.
Quindi, faremo uso di quel componente per controllare una parte
dello schermo che abbiamo progettato per la nostra applicazione angolare.
Lo schermo per la nostra applicazione Angular è piuttosto noioso al momento.
Tutto ciò che abbiamo è una barra degli strumenti in alto e poi uno
schermo bianco qui, ma che ci dà anche idee.
Ora possiamo prendere contenuti aggiuntivi e poi
metterlo in questa parte dello schermo qui. Come facciamo a farlo?
Possiamo creare un nuovo componente e poi
consegnare questa parte dello schermo a quel componente e dire,
«Ti occupi di rendere ciò che vuoi in quella parte dello schermo.»
Quindi, quella vista sarà controllata dal nuovo componente.
Come facciamo a farlo? Passiamo ora all'esercizio.
Per iniziare con l'esercizio,
vai alle istruzioni per l'esercizio che seguono questo particolare video.
Quindi nelle istruzioni per l'esercizio,
vedrai alcune risorse di esercizio,
che è un file zip a tua disposizione.
Scarica quel file zip sul tuo computer
e questo ti darà un file images.zip.
Quindi, basta salvarlo come file images.zip nella cartella download,
decomprimerlo, e quindi questo vi darà
una cartella di immagini contenente un insieme di immagini che faremo uso nella nostra applicazione.
Decomprimere il file images.zip appena scaricato
e spostare il file images.zip nel progetto,
e all'interno del progetto,
nella cartella fonti e risorse qui.
Quindi, ancora una volta, sposta la cartella delle immagini che ottieni
decompripendo il file images.zip e quindi sposta quella cartella delle immagini nella tua applicazione,
quindi, all'interno dell'applicazione,
sotto le fonti e le risorse sottocartella.
Queste immagini fornite qui saranno
disponibili per l'uso all'interno dell'applicazione Angular.
Ora, ci accingiamo a fare uso della CLI angolare per
generare automaticamente un componente per noi e aggiungerlo alla nostra applicazione angolare.
Quindi, nel terminale,
vai alla cartella contenente la tua applicazione Angular e digita
ng genera il menu dei componenti.
Quindi, chiameremo questo componente come il MenuComponent.
Questo MenuComponent conterrà il menu per
il ristorante per cui stiamo preparando la nostra applicazione Angular.
Quindi, quando digiti questo,
questo genererà automaticamente
il MenuComponent e quindi lo aggiungerà alla tua applicazione Angular.
Questo MenuComponent verrà creato e aggiunto
nella cartella origine/app/menu dell'applicazione.
Quindi, creerà un set di file nella cartella del menu.
Quindi, si può vedere che crea un file SCSS,
un file HTML, e il file ts,
e poi qualcosa chiamato il file spettrale ts.
Ci torneremo più tardi.
Quindi, inoltre, aggiornerà il file del modulo dell'app.
Quindi, andiamo a dare un'occhiata a cosa è successo quando hai
creato questo MenuComponent e lo hai aggiunto alla tua applicazione Angular.
Andiamo dall'Editore.
Venendo al nostro Editor,
ora noterai che,
nella cartella app,
c'è una nuova cartella chiamata menu lì,
e questa cartella menu contiene tutti i file relativi MenuComponent qui.
L' Angolare CLI segue la guida di stile standard Angular.
La guida di stile suggerisce che ogni componente dovrebbe essere
inserito nella propria cartella come si vede qui,
e mi piace praticamente questo perché sono molto ossessivo nel
mantenerlo gerarchia pulita per le mie cartelle dell'applicazione qui.
Quindi, questo funziona molto bene per me.
Ad alcune persone piace una gerarchia piatta,
ma mi confondo con quella parte.
Quindi, preferisco memorizzare ogni componente nella propria cartella.
Quindi, funziona bene per me.
Ora, se apri il file module.ts dell'
app, noterai che il file module.ts dell'app è stato aggiornato
includendo un'altra importazione nel file.ts dell'app.
Quindi, si vede che, insieme con AppComponent,
il MenuComponent è stato aggiunto automaticamente come importazione al modulo app.
Quindi, questo significa che il MenuComponent è ora
disponibile per l'applicazione Angular da utilizzare.
Inoltre, se si controlla la proprietà delle dichiarazioni all'interno del decoratore ngModule,
si vedrà che nella proprietà delle dichiarazioni,
oltre a AppComponent,
si avrà anche il MenuComponent incluso.
Questo è il motivo per cui amo Angular CLI,
perché semplifica tutto questo ha funzionato per me.
Se dovessi farlo a mano,
dovrò andare manualmente nell'app module.ts e quindi digitare tutto questo codice lì,
e c'è un'alta probabilità che finisca per commettere errori lì.
Quindi, ci stiamo risparmiando un sacco di problemi usando la CLI angolare.
Quindi, ecco perché mi sono innamorato di
Angular CLI per la creazione delle mie applicazioni Angular.
Quindi, con questo, abbiamo impostato
il nostro MenuComponent per essere disponibile per la nostra applicazione angolare.
Ora, dove ho intenzione di utilizzare il MenuComponent?
Ho intenzione di fare uso del MenuComponent all'interno del mio modello AppComponents.
Quindi, andrò al modello AppComponents e quindi
includerò il MenuComponent qui nel mio AppComponent.
Quindi, questo essenzialmente consegnerà quella parte dello schermo al mio MenuComponent.
Come facciamo a farlo?
Per fare ciò, daremo prima una rapida occhiata al file MenuComponent.ts.
Quindi, quando apri il file MenuComponent.ts,
vedrai che il selettore per il MenuComponent è stato definito come app-menu.
Quindi, questo è il nome del selettore standard che la CLI angolare fornisce per i tuoi componenti.
Puoi cambiarlo se vuoi,
ma qualunque selettore tu specifichi qui,
formerebbe i tag che usi per includerlo nel tuo file modello.
Quindi, tornando a AppComponent.html
, ora, se voglio includere il file del menu qui,
quindi dirò solo,
tag menu app e voilà,
quella parte dello schermo viene ora consegnata al mio MenuComponent,
e tocca a MenuComponent decidere cosa vuole inserire lì.
Quindi, qualunque cosa sia definita,
il modello MenuComponents verrà inserito qui.
Quindi, ora, tutto ciò che ci rimane è quello di andare a preparare
il nostro MenuComponent per mostrare le informazioni appropriate per noi.
Salviamo le modifiche,
quindi passeremo al
passaggio successivo in cui creeremo il menu per il nostro ristorante utilizzando il MenuComponent.
Prima di farlo,
quello che ho intenzione di fare è,
andare alla cartella dell'app qui,
e poi nella cartella dell'app,
creerò una nuova sottocartella e chiamarla come sottocartella condivisa.
Ora, tutti i file che ho intenzione di condividere tra vari componenti,
ho intenzione di metterlo nella cartella condivisa qui.
Ora, all'interno della cartella condivisa,
creerò un nuovo file chiamato dish.ts.
All' interno di questo piatto.ts, ho intenzione di creare una classe per definire
un piatto e renderlo disponibile per i componenti rimanenti da utilizzare.
Quindi, per definire una classe TypeScript qui,
dirò esportazione,
quindi sto esportando questa classe TypeScript qui,
classe di esportazione, e poi nominerò la classe come piatto.
All' interno di questa classe di piatti,
ora posso definire varie proprietà.
Quindi, per la classe piatto,
definirò una proprietà,
che è un ID, che definisco come una stringa.
Ora, nota, se vieni dal mondo JavaScript,
in JavaScript, non è necessario specificare il tipo di qualsiasi variabile.
TypeScript porta in questa funzione per voi di specificare il tipo per ogni variabile.
Quindi, se si specifica nome, colonna e stringa,
ciò significa che la variabile name sarà sempre del tipo di stringa.
Quindi, se provi ad assegnare un intero al nome, il
compilatore TypeScript lo
catturerà automaticamente e quindi ti dirà che c'è un errore.
Questo è il motivo, usando TypeScript,
puoi ridurre il numero di errori che potresti causare.
JavaScript tradizionalmente non esegue questo
controllo degli errori perché non ha alcun concetto di tipi di dati.
Ma se vieni da un linguaggio di programmazione tradizionale come C ++ o Java,
hai molta familiarità con i tipi di
dati, i tipi di dati primitivi e
altri tipi di dati che sono già definiti nel linguaggio.
TypeScript porta quella funzione a JavaScript o meglio come parte di TypeScript,
e questo consente di definire variabili e allegare tipi a tali variabili,
da cui il nome TypeScript.
Quindi, per il piatto,
ho intenzione di creare una proprietà del nome.
Quindi creerò una proprietà dell'immagine,
che è anche una stringa.
Questa stringa di immagine sarà una stringa che punta
all'URL dell'immagine che userò per questo particolare piatto.
Quindi definirò una categoria per questo piatto come anche un'altra stringa descritta come booleano,
etichetta come una stringa.
Prezzo come stringa e quindi descrizione come stringa.
Quindi, queste sono proprietà che associo alla classe di piatti.
Quindi, questo definirà vari piatti nel mio menu del mio ristorante,
e per ogni piatto ho bisogno di specificare tutte queste varie proprietà.
Ora, perche' dovrei averne bisogno?
Questo mi aiuterà a costruire il menu per il mio ristorante, come vedrai presto.
Quindi, con questo, completiamo la definizione della mia classe lì.
Salviamo le modifiche al file dish.ts.
Ora, questo file dish.ts sta esportando una classe.
Ora, posso importare questa classe in uno qualsiasi dei
file di script del tipo di componente della mia applicazione.
Successivamente, passerò al mio file menu.component.ts.
All' interno del file menu.component.ts oltre a importare il componente,
vedrò anche che stai importando un OnInit lì.
Verremo alla parte OnInit in uno degli esercizi successivi.
Ti spiegherò cosa fa in un esercizio successivo.
Importeremo anche la nuova classe che abbiamo creato chiamata classe Dish.
Perché importiamo questa classe di piatti?
In modo che possiamo usarlo come tipo per una variabile che sto definendo qui.
Allora, dov'e' questa classe di piatti?
È in.. Cartella /condivisa/piatto.
Quindi, questo è nella cartella piatti condivisa qui sopra.
Poi vedrete che abbiamo definito il componente menu qui.
Quindi, puoi vedere che dice,
«Esporta componente menu classe» e poi dice, «Implementa su di esso».
Torneremo a questo tra un po' più tardi.
Vedi anche che c'è un costruttore e c'è un altro metodo qui chiamato ngOnit.
Useremo questi in alcuni degli esercizi successivi.
Quindi, lasciamolo lì come tale e
torneremo a capire cosa sia in breve tempo.
Inoltre, si noti che per questo componente,
il modello è definito nel componente del menu HTML punto,
e gli URL di stile definiti lì.
Ora, inoltre, nella mia classe di componenti del menu,
includerò una nuova variabile chiamata come
piatti che sarebbe una matrice del tipo di piatto.
Ok? Quindi includerò semplicemente il set di
piatti nella variabile dei miei piatti che ho definito qui.
Ora, digitare tutta la cosa a mano mi ci vorrà un sacco di tempo.
Quindi, invece, quello che ti suggerirei di fare è semplicemente andare a copiare
il contenuto direttamente dalle istruzioni che seguono questo video.
Quindi e' quello che faro'.
Allora torna indietro e incollalo qui.
Ora potete vedere che ho tagliato e incollato le informazioni per
tutti i miei piatti dalle istruzioni qui dentro.
Quindi, questo completa l'array di tutti i piatti che sono definiti nelle mie istruzioni.
Quindi, questo è il modo più semplice per ottenere queste informazioni.
Quindi, basta tagliarlo e incollarlo da lì.
Ora, si noti che per questo piatto,
ognuno di loro è un oggetto JavaScript qui.
Quindi, che può essere mappato nella classe di script di tipo corrispondente lì.
Quindi, puoi vedere che ogni oggetto JavaScript ha proprietà lì
e queste proprietà corrispondono esattamente alle proprietà che ho definito per la mia classe di piatti.
Quindi, una volta definito questo,
allora questi piatti diventeranno ora una serie di
piatti e questo diventerà ora disponibile per
me da usare quando definisco il mio modello HTML per il mio menu.
Salviamo le modifiche che abbiamo fatto finora e poi
apriremo il file menu.component.html.
Quindi, andremo al file menu.component.html.
Vedrai che nel file menu.component.html,
attualmente hai solo una P con menu funziona qui.
Quindi, se l'hai incollato lì e poi vedi l'applicazione funzionante,
avresti visto solo questo menu funziona sullo schermo.
Ho intenzione di sostituire questo con il mio codice modello qui.
Questo è dove prenderò l'aiuto del layout flessibile angolare per aiutarmi
a stendere bene il mio contenuto nel mio schermo.
Quindi, per
iniziare, inizierò con un div,
a cui applicherò una classe chiamata contenitore.
Ho intenzione di definire la classe contenitore utilizzando del
codice CSS un po 'più tardi in questo esercizio.
Quindi, applicherò il contenitore della classe qui.
Ho intenzione di definire anche una proprietà chiamata fxlayout.
Un attributo chiamato fxlayout.
Ora, questo fxlayout è un attributo
che il layout flessibile angolare mi consente di applicare a un div.
Questo specifica se i vari contenuti
che includo all'interno di quei div devono essere disposti orizzontalmente o verticalmente.
Quindi, ho intenzione di specificare che questa è una colonna.
Quindi, qualunque contenuto includa all'interno di questo div,
sarà disposto verticalmente uno sotto l'altro sul mio schermo.
Se hai visto il modo della griglia di lavorare con i contenuti in Bootstrap,
vedresti che questo mi dice essenzialmente che ho intenzione di
deporre tutto in una singola colonna laggiù.
Non confondere questa colonna con la colonna di Bootstrap dalla griglia di Bootstrap.
Sono due cose diverse.
Qui, l'attributo è fxlayout e specifico la colonna.
Posso anche specificarlo come riga,
il che significa che il contenuto sarà disposto orizzontalmente.
Ora anche, un altro attributo che ho intenzione di specificare per questo è fxLayoutGap,
che specificherò come 10 pixel.
Quindi, ciò che significa è che qualunque contenuto includo qui
sarà separato l'uno dall'altro da uno spazio di 10 pixel tra ciascuno di essi.
Dalla conoscenza di Bootstraps, vedi cos'è un cutoff qui.
Questo definisce una separazione di cutoff tra
due parti di contenuto nel mio modello di applicazione.
Quindi, con questo, chiuderemo il div qui.
Ora, all'interno di questo div,
definirò il contenuto effettivo che andrà nel mio file menu.component.html.
Ora, qui, ho intenzione di fare uso di un altro componente che il
design del materiale mi fornisce chiamato come componente lista mat.
Quindi, questo componente mi consente di creare un elenco di
elementi che includo nel mio modello qui.
Quindi, questo è un componente di lista materiale angolare.
Da Bootstrap, si nota che in Bootstrap avevamo l'oggetto multimediale.
Quindi, l'elenco mat è come l'oggetto multimediale in un certo senso da Bootstrap.
Ora a questo, ho intenzione di applicare una classe,
un attributo chiamato come FxFlex.
Ora, ciò che significa è che tutta questa cosa sarà trattata come un'unità o un pezzo di
contenuto che saranno disposti dal mio layout flessibile qui.
Quindi, se hai familiarità con il layout flessibile CSS.
Quindi, questo è un pezzo di contenuto che verrà disposto dal mio layout flessibile CSS.
Quindi, applica FxFlex qui,
e poi dentro qui definirò mat-list-item.
Quindi, questa è una voce della lista qui.
Quindi, dalla tua conoscenza HTML,
se il tag LI che usi in HTML è simile a questo qui.
Quindi, questa è una voce della lista di mg qui.
Quindi, ovviamente, all'interno di questa voce della lista,
stai per definire l'elenco delle cose.
Ora, angolare fornisce alcune direttive strutturali che puoi applicare
ai tuoi tag qui che ti permettono di creare il tuo contenuto.
Ora, ho intenzione di utilizzare una direttiva strutturale chiamata NgFor.
Vedremo come lo usiamo in questo modello.
Poi, dopo questo esercizio,
vi spiegherò brevemente quali sono le direttive strutturali e
qual è lo scopo che servono per definire i vostri modelli qui.
Quindi, all'interno di questa voce di lista vuota, ho intenzione di dire,
stella, nota la sintassi, stella ngFor.
Quindi, questa è la direttiva strutturale,
la direttiva strutturale NGfor in angolare.
Ciò che questa direttiva strutturale ngFor consente di
fare è iterare su una serie di elementi.
Ricorda che abbiamo definito i piatti come una serie di oggetti piatti nel nostro codice.
Ora, nel mio modello,
avrò accesso a quell'oggetto piatti.
Quindi qui, se voglio iterare su di esso,
il modo in cui lo specifico è dirò,
«Lascia piatto di piatti».
Ecco come funziona la sintassi per la direttiva strutturale ngFor.
Quindi, lasciare piatto di piatti.
Ciò significa che i piatti sono la matrice di oggetti piatti.
Quando selezioniamo diciamo let piatto di piatti,
questo mi permetterà di accedere a ogni elemento
della matrice e quindi mi aiuta a scorrere sull'array.
Questo è come un ciclo for,
se si ha familiarità con i cicli for dalla programmazione.
Quindi, questo agisce come un ciclo for per te e quindi ti aiuta a scorrere
su tutti gli elementi della matrice di piatti qui.
Questo piatto diventa un oggetto JavaScript che mi permette di
accedere a ogni elemento di quell'array lì.
Ora, da questo, possiamo anche ottenere
l'accesso alle proprietà di ogni singolo oggetto all'interno del mio array di piatti.
Quindi, posso farne uso per definire il mio modello qui.
Lasciami stendere il modello e poi torneremo indietro e
guarderemo come questi due sono correlati qui.
Ora, all'interno della mia voce di lista vuota,
posso includere un'immagine con l'attributo come matlistAvatar.
Quindi, questo mi permette di includere un'immagine e quindi con la fonte specificata qui.
Ora è interessante, guarda la sintassi che sto usando qui.
All' interno di doppie parentesi graffe, ho intenzione di dire dish.image.
Ciò significa che si tratta di un'interpolazione unidirezionale di cui stiamo parlando.
Qui, quando lo specifico,
ciò significa che questa fonte otterrà il valore di dish.image che ha definito nel
mio oggetto JavaScript che ho definito nella
mia classe di script di tipo lì e che è disponibile per me per fare il layout qui.
Quindi, che il valore dish.image sarà disponibile per me e anche per questa immagine,
specificherò un valore alternativo come dish.name.
Ricordiamo che il mio piatto aveva anche la proprietà name disponibile per
me in modo che definisca un'immagine per la mia lista qui.
Presto ti renderai conto di come questo elenco appare
sullo schermo quando completiamo questo modello qui.
Inoltre, ho intenzione di utilizzare un h1 con tag MatLine.
Ancora una volta, questo è l'uso
della lista componente materiale angolare per definire il mio modello qui.
Quindi, dico h1 MatLine quindi questo mi aiuta a definire una linea qui e poi dentro lì,
ho intenzione di usare le doppie parentesi graffe e dire dish.name qui.
Quindi, questo mi permette di ottenere il valore del nome del piatto lì.
Quindi, questo definisce una riga e poi la nella riga successiva ho intenzione di dire p MatLine.
Quindi, userò il tag p qui e poi
chiuderò il tag p e poi all'interno del tag p,
userò uno span per definire dish.description.
Quindi, se hai familiarità con gli oggetti JavaScript,
ora vedi come sto accedendo alle proprietà del
mio oggetto JavaScript qui, dish.description qui.
Per nota, eseguendo questa ancora una volta
l'attributo ngFor mi consente di scorrere su una serie di oggetti qui.
Quindi, i piatti qui sono una serie di oggetti piatti.
Quindi, quando dico lasciare piatto di piatti,
questo piatto mi darà accesso a ogni elemento del
mio array piatti e iterare su ogni elemento della matrice
e poi creerò questo contenuto per ciascuno di essi.
Quindi, questa voce di elenco vuoto,
agisce essenzialmente come un ciclo for dal
tuo linguaggio tradizionale del computer e quindi scorre
sull'elenco dei piatti e quindi distribuisce ognuno di essi sul mio schermo.
Quindi, con questa modifica,
salviamo il file componente del menu.
Successivamente, andiamo a app.module.ts e abbiamo bisogno di importare il modulo MatList in questo.
Quindi, diciamo, importa MatlistModule
da Angular/Material/List.Una volta che abbiamo importato questo lì,
allora scendiamo e quindi aggiorniamo le importazioni nel
decoratore del modulo Ng e aggiungiamo
il modulo MatList all'elenco delle importazioni lì.
Questo mio module.ts app è ora aggiornato e poi anche,
andrò al file styles.scss e quindi aggiungo
qui la classe contenitore.
Cosa definisce la classe contenitore qui?
La classe contenitore è margine 20
pixel e visualizza flex e salva le modifiche.
Ora, andiamo a dare un'occhiata alla nostra pagina web.
Andando alla nostra pagina web.
Voilà. Ecco a te.
Il menu per il nostro ristorante mostrato in tutto il suo splendore sullo schermo.
Si vede come è stato creato questo menu.
Guarda l'array di oggetti JavaScript che hai visto.
Guarda come ciascuna delle proprietà per l'array di oggetti JavaScript è stata utilizzata e
mappata ai quattro elementi del mio elenco.
Guarda come le immagini corrispondenti sono state incluse qui
usando MatlistAvatar qui.
Quindi, questo crea immagini rotonde qui e poi nota come il nome del
piatto viene visualizzato qui e poi la descrizione del piatto incluso qui.
Meraviglioso Ora, abbiamo il menu per il nostro ristorante
sullo schermo utilizzando un componente di menu in Angular.
Questo completa questo esercizio.
In questo esercizio abbiamo imparato a creare un nuovo componente.
aggiungerlo nella nostra applicazione angolare,
come includere quel componente nel modello di
un altro componente in modo che crei la gerarchia dei componenti.
Poi abbiamo visto come possiamo fare uso del layout flessibile angolare e anche dei
componenti di progettazione del materiale per progettare
il modello per il nostro componente menu per visualizzare il contenuto qui.
Ora, se mi chiedi come faccio a ricordare tutte queste cose.
Beh, ad essere
onesti, non puoi ricordare tutto, ma devi capire l'approccio.
Questo è più importante che cercare di memorizzare una di queste cose.
Ora, se mi chiedi dove ottengo le informazioni sul
componente della lista dal materiale angolare.
Siamo in grado di ordinare la documentazione materiale angolare e lì
avrete i dettagli su come un componente lista dovrebbe essere preparato.
Ora, dove otteniamo i dettagli su come progettiamo un componente in angolare?
Abbiamo appena esaminato un po 'di questo e poi in questo esercizio,
abbiamo imparato come creare un nuovo componente e poi applicarlo nella nostra applicazione angolare.
Quindi, questo è un buon punto per fare un
commento get con i componenti del messaggio parte uno.
Nel prossimo esercizio,
miglioreremo un po 'di più utilizzando un altro tipo
di componente materiale angolare per la stesura del contenuto sul mio schermo.