Prima di andare avanti con il resto degli esercizi e gli incarichi in questo corso,
ho pensato che questo sarebbe stato un buon momento per me per
dare alla mia applicazione angolare una bella struttura.
Quindi, questo è dove aggiungerò l'intestazione e il piè di pagina
per la mia applicazione angolare in modo che il modo in cui
l'interfaccia utente viene renderizzata sia molto più attraente di quello che è stato finora.
Quindi, vediamo come possiamo costruire più componenti per
occupare diverse parti dello schermo all'interno della nostra applicazione angolare.
Quindi, qui, vedrai che la mia applicazione angolare ora consisterà in un'intestazione,
che è un componente separato, il
piè di pagina, che è un altro componente
, e poi tra i due,
avrò la parte della mia applicazione angolare che
verrà controllata in seguito usando il router angolare.
Quindi, vedi, sto preparando il palco per quello che verrà più avanti in questo corso.
Quindi, lungo la strada,
faremo anche uso di Font Awesome Icons all'interno della nostra applicazione angolare.
Sono solo affezionato alle icone Font Awesome,
quindi ho pensato che questo sarebbe stato un buon posto per
introdurre queste icone nella mia applicazione angolare.
Per procedere in avanti, cerchiamo di installare font impressionante nella nostra applicazione angolare.
Quindi, per farlo, userò NPM per andare,
e recuperare font-awesome per me,
quindi NPM installa font-awesome 4.7.0 e salva.
Quindi, lascia che sia installato font-awesome.
Quindi, una volta che font-awesome entra nella nostra applicazione angolare,
e poi diventa parte dei moduli nodo
che sono inclusi nella nostra applicazione angolare,
il passo successivo è quello di renderlo disponibile per la nostra applicazione angolare.
Abbiamo bisogno di integrare font-awesome nella nostra applicazione angolare.
Quindi, per farlo,
vai alla cartella di origine
e quindi crea un file denominato _Variables.scss nella cartella di origine.
Nel file Variables.scss,
aggiungi $ fa-font-path: e
poi tra virgolette, metti.. /node_modules/font-awesome/fonts.
Quindi, stiamo specificando il percorso del font per i nostri file fantastici font qui.
Quindi, aprire il file Styles.scss
e quindi nel file Styles.scss,
aggiungeremo un paio di righe lì.
In primo luogo, importeremo le variabili che abbiamo appena dichiarato dicendo @import,
e tra virgolette variabili,
quindi importeremo i file font-impressionante lì,
poi diremo
@import.. /node_modules/font-awesome/scss/font-awesome. Stiamo importando la
versione SCSS di esso perché stiamo usando SCSS nella nostra applicazione angolare.
Una volta che abbiamo modificato gli stili per il file CSS,
salviamo le modifiche.
A questo punto, potremmo aver bisogno di riavviare il
nostro server che stava servendo la nostra applicazione angolare.
Quindi, dove hai digitato il servizio NG,
potresti voler interrompere il server che sta servendo la tua applicazione angolare e
riavviarlo in modo che includa queste nuove modifiche che sono state apportate.
Quindi, andando al mio terminale,
interromperò il mio server
e poi riavvierò il server in modo che tenga conto della modifica che ho apportato.
Si vedrebbe lo stato attuale della
nostra applicazione angolare guardandola nel browser.
Quindi, questo è ciò che abbiamo nella nostra applicazione angolare.
Voglio essere in grado di aggiungere un'intestazione e un piè di pagina a
questa vista in modo da poter usare sia l'intestazione che il piè di pagina,
e quindi il contenuto effettivo tra l'intestazione
e il piè di pagina nel modo in cui costruisco la mia applicazione angolare.
Quindi, per fare ciò,
creerò due nuovi componenti chiamati intestazione e piè di pagina
e lascerò che gestiscano la loro parte dello schermo che è allocata per loro.
Andando al prompt, permettetemi di generare un nuovo componente di intestazione.
Posso anche dire ng g,
che è sufficiente per la CLI angolare per
riconoscere che vuole generare un componente.
Quindi, dico intestazione del componente ng g,
e anche ng g footer componente.
Quindi, ora, ho due componenti che sono disponibili per me
da utilizzare all'interno della mia applicazione angolare.
Come faccio a utilizzare questi due componenti?
Andiamo al file component.html App,
e quindi facciamo uso di questi due componenti nel modo in cui
componiamo l'intero schermo per la nostra applicazione angolare.
Tornando alla nostra applicazione,
vediamo che il file dell'app module.ts
include già l'intestazione e il componente piè di pagina
e sono già stati inclusi nelle dichiarazioni qui.
Quindi questo è il vantaggio di utilizzare la CLI angolare,
si prende cura di tutte queste basi per
te in modo da poterti concentrare sulla costruzione della tua applicazione angolare.
Quindi, questo è il motivo per cui amo la CLI angolare
come approccio per costruire la mia applicazione angolare.
Quindi ora, andiamo al file HTML dei componenti dell'app.
Quindi, qui, vedete che abbiamo incluso il menu app laggiù.
Ho intenzione di rimuovere questa barra degli strumenti dal mio file HTML dei componenti dell'app.
Quella barra degli strumenti diventerà parte del modello di intestazione per il mio componente intestazione.
Quindi, invece, il mio
file modello dei componenti dell'app conterrà solo l'intestazione e il piè di pagina nella parte inferiore.
Quindi, vedete che ora,
abbiamo il punto di vista dei tre componenti.
L' intestazione, il menu
e il piè di pagina che occupa l'intero schermo.
Quindi, questi tre componenti ottengono quella parte dello schermo per se stessi.
Salviamo le modifiche e diamo un'occhiata rapida alla nostra applicazione nel browser.
Andando all'applicazione nel browser,
ora vedi che l'intestazione ha già occupato fa
parte dello schermo lassù, e ovviamente,
dal momento che abbiamo appena preparato il componente,
dice solo che l'intestazione funziona,
e poi giù qui sotto,
il piè di pagina ha anche preso il suo posto nel pagina dello schermo.
Ora, andremo avanti e aggiornare i modelli sia per l'intestazione
che per il piè di pagina in modo da poter definire bene la nostra interfaccia utente per la nostra applicazione angolare.
Iniziamo il lavoro sul nostro piè di pagina.
Quindi, per iniziare a piè di pagina,
andiamo al file modello del piè di pagina,
e poi stiamo andando a sostituire questo con il modello appena progettato del piè di pagina.
Ora, per vostra comodità,
vi ho fornito il codice nelle istruzioni.
Sarà saggio copiare l'intero codice da lì
e quindi incollarlo qui.
Quindi, esaminare cosa fa questo piè di pagina.
Quindi qui, vedi che ho incollato nel codice per il mio modello di piè di pagina.
Ora, tornerò a questo codice un po 'più tardi.
Se hai fatto il corso precedente su Bootstrap,
vedrai che questo è il modo materiale angolare di implementare
lo stesso tipo di struttura per il piè di pagina che abbiamo fatto nel corso Bootstrap.
Alcune di queste cose saranno riconoscibili per te già,
ma lasciami completare l'aggiornamento al modello di piè di pagina,
e quindi anche aggiungeremo un po 'di codice SCSS nel mio piè di pagina component.scss file,
e quindi dare un'occhiata a come il piè di pagina ora si forma.
Quindi qui, ho nuovamente incollato nel codice
dalle istruzioni di esercizio che seguono questo video,
per mostrare le diverse classi SCSS che ho aggiunto nel mio piè di pagina.
Quindi, ho alcune classi che ho definito qui,
ho intenzione di farne uso per definire una parte del mio piè di pagina,
e quindi similmente la classe piè di pagina qui,
e ho un mix SCSS qui,
e alcune variabili qui
che definiscono vari colori che userò nella mia applicazione angolare.
Quindi, salviamo le modifiche che abbiamo fatto.
Diamo un'occhiata al piè di pagina nella sua attuale incarnazione,
e poi torneremo e faremo una rapida visita al codice che ho incluso sia
nel file modello dei componenti piè di pagina che nel codice SCSS qui.
Andando alla nostra applicazione angolare nel browser, wallah,
lì hai il nuovo piè di pagina per la nostra applicazione angolare.
Quindi, potete vedere che ho un paio di cose qui.
Questi sul bordo sinistro sono i vari link
a varie pagine che faranno parte della mia applicazione Angular.
Vedremo come facciamo, come parte dei prossimi esercizi.
Ora, qui sto facendo uso del componente pulsante che
fa parte del materiale angolare per definire questi collegamenti qui,
quindi ho l'indirizzo qui,
e poi uso di nuovo i pulsanti per definire questa sequenza
di pulsanti per i vari collegamenti social media per il mio ristorante qui.
Quindi, potete vedere che ho tutti questi.
Per creare questi, uso
il supporto materiale angolare per piccoli pulsanti di azione galleggiante qui,
e questo dà una bella struttura per questo.
Se hai visto la versione Bootstrap di questo,
mi piace molto meglio della versione Bootstrap che ho creato nel corso precedente.
Quindi, il nostro piè di pagina ora è ben al suo posto.
Diamo un'occhiata rapidamente ad alcuni del codice nel piè di pagina.
Ora, non lo spiegherò in un sacco di dettagli perché è quello di
trattare più con il materiale angolare di Angular stesso,
ma lungo la strada semplicemente guardando la struttura del codice,
inizierai a vedere come
questi componenti del materiale angolare possono essere usati per definire qualcosa Come questo.
Andando al componente piè di pagina,
vedi che ho un div esterno qui per il quale ho specificato alcuni layout angolare,
attributi di layout flessibile qui,
quindi dico che la riga FxLayout,
e poi fxLayout sm e xs per essere colonna.
Quindi, per le dimensioni dello schermo piccole ed extra piccole
posizionerà tutto il contenuto come colonne,
ma per le dimensioni dello schermo più grandi,
li posizionerà come riga.
Quindi, questo è ciò che mi dà la bella struttura per il mio piè di pagina.
Come vedi nel div dell'interfaccia utente,
sto posizionando tutto il centro del contenuto qui,
e qui sotto,
definisco il primo.
Quindi, questa torsione matematica qui che sto usando definisce i miei collegamenti qui.
Quindi, in questo sto usando mat come componente materiale angolare,
e al suo interno sto usando la a con
l'attributo componente del pulsante mat assegnato a a per creare questi pulsanti qui.
Più tardi, tornerò e aggiungerò
il codice effettivo per questo link negli esercizi successivi qui.
Questo è ciò che mi aiuta a creare l'elenco dei collegamenti sul lato sinistro.
Questo è l'indirizzo che vedete,
questo è abbastanza semplice da guardare.
Quindi, questo è un div per il quale sto usando FxFlex con 50,
e l'altro con FxFlex con 40.
Quindi, 40 significa 40 percento e 50 significa 50 percento,
e qui sto usando FxFlex offset 20 pixel.
Quindi, sposta questo contenuto a destra di 20 pixel.
Quindi, ho uno spazio di 20 pixel lasciato sul lato sinistro per
questo particolare div contenente questi collegamenti qui.
Poi finalmente qui sotto,
ho questo insieme di link che sto facendo uso per
creare la barra con tutti i link dei social media lì.
Quindi, sto usando un con il pulsante icona mat qui.
Quindi, questo è ciò che crea i pulsanti arrotondati che vedi nel piè di pagina lì.
Ora, per ciascuno di questi,
sto applicando la classe corrispondente qui.
Quindi, puoi notare che il pulsante Google Plus, pulsante Facebook,
tutte queste classi sono definite nel mio file SCSS lì,
dove ho specificato i colori per lo sfondo e così via per questo, in
modo che corrisponda alla tipica combinazione di colori che questi siti di social media usano.
Quindi, trascorri un po 'di tempo a guardare questo codice qui,
e poi avrai rapidamente un'idea di come è stato progettato il piè di pagina.
Allo stesso modo, andando ai componenti piè di pagina codice Sass qui,
in modo da poter vedere che ho definito vari colori qui.
Sto usando un mixaggio con il margine impostato qui,
e poi per il mio piè di pagina,
definisco il colore di sfondo in modo appropriato,
e noto le varie classi che sto definendo qui
un pulsante Facebook per il quale il colore e
il colore di sfondo che ho definito per ognuno di essi.
Quindi, che il colore corrispondente di
quel sito di social media viene utilizzato come colore di sfondo per ciascuno di questi.
Ora, nel corso Bootstrap precedente,
avevo usato il Bootstrap Social per ottenere la stessa cosa.
Questo non funziona molto bene con il materiale Angular,
quindi è per questo che ho appena creato il mio set di occhiali Sass qui,
e quindi aggiungere il codice che ho bisogno di creare quei pulsanti lì.
Se è necessario aggiungere più pulsanti,
basta creare più classi come queste corrispondenti
ai pulsanti che si desidera aggiungere all'applicazione.
Quindi, questo costruisce il nostro piè di pagina.
Ora, l'intestazione è la prossima parte che stiamo andando a prendere di mira.
Andando all'intestazione, si aprirà il
file di modello dei componenti di intestazione e si vedrà cosa contiene.
Stiamo andando a sostituire questo con
il modello che ho dato per voi nelle istruzioni che seguono qui.
Quindi, vai avanti e taglia e incolla quel codice qui,
perché questo non ha nulla a che fare specificamente con angolare.
Quindi, è per questo che ti sto solo permettendo di tagliare e incollare il codice direttamente da lì,
risparmiando un po 'di tempo per noi.
Puoi vedere che ora ho sostituito il modello di intestazioni con qualche codice qui.
Allo stesso modo, mentre ci
siamo, aggiungeremo anche un codice SCSS per il mio file Header.components.scss qui,
basta andare e copiare il codice dalle istruzioni.
Allo stesso modo, mentre ci
siamo, aggiungeremo in alcune altre classi SCSS al mio file styles.scss principale.
Quindi, in questo file styles.scss principale,
aggiungerò sottocolori e un paio di altre classi in questo.
Quindi, incolla il codice dalle istruzioni che ti ho dato.
Quindi, l'aggiornamento al file Styles.scss è ora completo,
quindi ho aggiunto alcuni colori qui e mescolato lì,
e poi in fondo ho aggiunto alcune altre classi qui che
mi aiutano quando sto progettando i miei modelli per la mia applicazione angolare.
Quindi, tutte queste modifiche,
salviamo le modifiche, diamo
una rapida occhiata a come appare la mia intestazione ora nell'applicazione,
e poi torneremo e rivisiteremo rapidamente il codice che abbiamo appena incluso qui.
Tornando alla mia applicazione Angular nel browser,
ora vedi la barra degli strumenti riappare nell'intestazione qui,
insieme a alcuni collegamenti
lì e poi un'immagine che rappresenta il logo per il mio ristorante
, e poi qui, hai qualcosa che usiamo il file jumbotron nel corso precedente.
Userò solo una classe chiamata jumbotron per creare questo
anche nell'applicazione Angular,
quindi qui sul lato sinistro ho le informazioni del mio ristorante e
il logo del ristorante e mi sono lasciato un po 'di spazio qui per aggiungere qualcosa in futuro.
Quindi, qui vedi la mia applicazione ora prendendo forma con un'intestazione,
con alcuni collegamenti lì dentro.
Ora, faremo uso di questi collegamenti nei
prossimi esercizi per impostare la mia applicazione angolare,
e poi il menu seduto in mezzo e poi giù qui sotto il mio piè di pagina.
Andando al mio file modello di componenti di intestazione,
ora puoi vedere come ho creato la barra degli strumenti con i pulsanti aggiuntivi qui.
Quindi, ti ricordi che avevamo la barra degli strumenti
già in uso nel file del modello dei componenti dell'app, l'
ho tagliata da lì e invece uso la barra degli strumenti nel modello delle intestazioni qui.
Ora, all'interno di questa barra degli strumenti,
ho incluso alcuni collegamenti con la classe pulsante applicata ad esso e questo è ciò che
mi permette di creare quei collegamenti nella barra degli strumenti come menu per la mia applicazione web.
Qui sotto, ho creato un div con il contenitore di classe e jumbotron.
Questo è il motivo per cui ho aggiunto le classi contenitore e jumbotron nel mio file SCSS, in
modo che io possa farne uso all'interno dei miei modelli qui.
Quindi, per il quale ancora una
volta, applico e alcuni attributi di layout flessibile qui per aiutarmi a progettare lo schermo lì.
Quindi puoi vedere come ho usato un paio di div qui con
l'attributo FxFlex applicato di conseguenza per creare l'interfaccia utente,
per la mia applicazione qui.
Quindi, trascorri un po 'di tempo qui per dare un'occhiata a questo codice qui per
capire rapidamente come è stato creato il mio layout per il mio modello di intestazione.
Non è così complicato,
una volta completato il corso Bootstrap,
questo non è così difficile da capire.
Lungo la strada, stai anche imparando il layout flessibile angolare e poi
anche i componenti del materiale angolare qui.
Andando al file SCSS per il componente di intestazione,
puoi vedere che ho aggiunto alcuni colori qui e poi un mix
e poi aggiunto anche in una classe jumbotron qui.
Ora, la classe contenitore non è qui,
la classe contenitore è nel file di stili principale.
Perché la classe contenitore è qualcosa che
userò per molti dei modelli lì.
Quindi, ecco perché, ho aggiunto nella classe contenitore al file Styles.scss
che è il file comune per la mia intera applicazione angolare.
Quindi, lì ho aggiunto alcuni colori aggiuntivi qui,
e ho anche creato un mix qui,
e poi ho aggiunto nel contenitore,
il primario di sfondo e i colori di accento di sfondo,
e poi sto usando anche un'altra classe chiamata distanziatore flexes,
che ho intenzione di utilizzare in uno dei gli esercizi successivi.
Tutti questi passaggi sono in preparazione per ciò che
verrà nei prossimi esercizi.
La mia applicazione Angular ha ora preso una buona forma in termini di come l'interfaccia utente è disposta,
in modo che ora posso iniziare a introdurre molte più nuove funzionalità per angolare.
Pagando un'altra visita alla mia applicazione Angular nel browser,
fammi vedere come questa applicazione appare in diverse dimensioni dello schermo.
Quindi, questa è la dimensione standard dello schermo del desktop,
quindi passiamo a una dimensione dello schermo più piccola e poi vediamo come appare l'applicazione.
Quindi, questa è una dimensione dello schermo di iPhone 6 Plus,
in modo da poter vedere come il layout è diverso per le dimensioni dello schermo più piccole.
Quindi, la mia intestazione è proprio lì e il mio menu in basso e il piè di pagina qui,
nota come le diverse parti del piè di pagina sono state
disposte in modo diverso per le dimensioni dello schermo extra piccole.
Questa è la stessa applicazione in modalità orizzontale o iPhone 6 Plus,
quindi puoi vedere che la mia intestazione è disposta in questo modo e il menu lì e il piè di pagina.
Quindi, questo ti mostra che ho sfruttato il layout flessibile angolare
per essere in grado di creare layout diversi per diverse dimensioni dello schermo.
Quindi, ancora una volta, se hai seguito il corso Bootstrap in precedenza,
inizierai a vedere come il design reattivo con
il layout flessibile angolare può essere utilizzato anche per ottenere risultati simili.
Quindi, con questo, completiamo questo esercizio.
In questo esercizio, abbiamo preparato la nostra applicazione Angular e
l'abbiamo preparata per il resto degli esercizi di questo corso.
Questo è anche un buon momento per fare un commit git con l'intestazione del messaggio e i piè di pagina.