Ora che abbiamo una comprensione delle applicazioni a pagina singola,
continueremo a lavorare sulla
nostra applicazione angolare che abbiamo lavorato negli esercizi
finora e
svilupparla nell'applicazione a pagina singola utilizzando il supporto del modulo router angolare.
Abbiamo già incluso più componenti come parte della
nostra applicazione angolare nell'esercizio precedente e abbiamo già
configurato per la nostra applicazione angolare per essere in grado di instradare
tra due componenti diversi.
Ora, integreremo di più nella nostra applicazione angolare e
la svilupperemo nell'applicazione angolare a tutti gli effetti insieme
alla navigazione tra le varie viste
rese dai vari componenti della nostra applicazione.
Continuando con la nostra applicazione così com'è ora,
abbiamo la casa di essere renderizzata quando si naviga alla nostra applicazione in
questo momento e poi il modello Home
è stato mostrato tra l'intestazione e il piè di pagina e poi quando si va al
menu, il menu viene visualizzato tra l'intestazione e il piè di pagina nella vista qui.
Ora, ovviamente, dobbiamo integrare gli altri componenti che abbiamo
incluso nella nostra applicazione angolare
per sviluppare questo come un'applicazione angolare a tutti gli effetti.
In questo esercizio integreremo ContactComponent,
aggiorneremo il modello per ContactComponent,
aggiorneremo anche il modello per HomeComponent e faremo
un passo avanti verso la nostra applicazione angolare a pagina singola.
Iniziamo con il ContactComponent.
Per iniziare, prima copia il modello per
il ContactComponent che ti ho dato nelle istruzioni dell'esercizio e quindi
incollalo nel file contactcomponent.html in modo che
elimineremo la vista effettiva del nostro ContactComponent in un po 'più dettagliato qui.
Ora, puoi vedere che ho tagliato e incollato il codice per
il file modello dalle istruzioni nel mio ContactComponent.
Completeremo l'integrazione
del ContactComponent nella nostra applicazione e poi vedremo
come appare il ContactComponent e poi torneremo
e guarderemo rapidamente questo codice un po 'più tardi.
Ora, per integrare il ContactComponent nella nostra applicazione angolare,
abbiamo bisogno di includere un percorso per il ContactComponent nei nostri percorsi.
Quindi, andando al file routes.ts subito dopo il menu,
includerò un altro percorso per il contactComponent userò
l'URL come contattarci e
il componente corrispondente è ContactComponent qui.
Così, con questo, abbiamo ora integrato il nostro ContactComponent
nella nostra applicazione e cerchiamo di salvare le modifiche a
questo e poi avremo anche bisogno di aggiornare il componente intestazione e aggiornare
il un link nel componente intestazione per aiutarci a navigare al ContactComponent.
Quindi, ho intenzione di copiare questo dal menu un link nella
barra degli strumenti del mio componente di intestazione lì e poi copiarlo
nel ContactComponent e quindi aggiornarlo come contattaci.
Salviamo le modifiche a tutti i file e
quindi diamo un'occhiata all'applicazione risultante.
Andando all'applicazione nel nostro browser,
se ora navighiamo al ContactComponent,
possiamo vedere che i dettagli del ContactComponent sono visualizzati
qui tra l'intestazione e il piè di pagina come ci aspettiamo.
Quindi, all'interno del ContactComponent,
abbiamo il titolo Contattaci
lì e poi alcune informazioni sulla posizione in cui ho visualizzato l'indirizzo.
Quindi, questo è simile all'indirizzo che
abbiamo nel piè di pagina quindi non ho intenzione di spiegare che in
dettaglio allora abbiamo un'altra parte qui dove includiamo la Mappa della nostra posizione.
Non abbiamo intenzione di farlo al momento,
stiamo andando a lasciare come vuoto e poi anche vedere che ho
tre pulsanti che ho incluso qui per Call, Skype, ed Email.
Questi tre pulsanti sono attivati nella nostra applicazione
e sto usando il tappetino sollevato pulsante per rendere questi tre pulsanti.
Quindi, puoi vedere che questi pulsanti sembrano diversi
dagli altri pulsanti che hai incluso nella tua applicazione lì.
Quindi, questo è un componente pulsante sollevato dal nostro materiale angolare lì.
Quindi, dopo aver visto il ContactComponent e
il fatto che siamo in grado di navigare al ContactComponent.
Ora, dagli altri componenti,
diamo una rapida occhiata al
codice HTML che abbiamo incluso per il modello per il nostro ContactComponent.
Andando a contactcomponent.html, vedrai che abbiamo
il titolo per questa pagina incluso usando questo div
qui e il secondo div dentro qui con FxFlex
include le informazioni sulla posizione e quindi questo all'interno di queste informazioni sulla posizione,
sto ancora definendo un altro div che mi permetterà per
includere più viste in questo altro div qui.
Quindi, all'interno di questo, sto definendo
un altro div con la colonna di layout degli effetti e la riga del livello degli effetti.
Quindi, questo è un modo nidificato di definire le mie viste CSS Flex qui.
Quindi, all'interno di questo,
sto usando una vista Flex div con FxFlex 50 quindi
occupa una metà e poi FxFlex offset di 20 pixel.
Quindi, questa vista CSS sarà spostata a destra di 20 pixel quindi ho
qualche margine lì e poi abbiamo
l'indirizzo incluso qui e poi giù qui sotto,
puoi vedere che all'interno di un altro div,
ho un tag con il pulsante sollevato mat ad esso associato.
Questo è ciò che causa i pulsanti sollevati che
abbiamo nella parte inferiore della pagina Contatti lì.
Quindi, tre di loro qui.
Uno per il numero di telefono.
Uno per Skype e uno per l'e-mail qui e nota anche che sto facendo uso
delle icone Font Awesome per ciascuno di essi e poi la
mappa della tua posizione in un altro div qui.
Quindi, entrambi racchiudono all'interno di questo div esterno che è racchiuso di nuovo all'interno del div.
Quindi, modo nidificato di definire i layout flessibili per le nostre diverse parti qui.
Quindi, questo è tutto per il ContactComponent.
Ora lo abbiamo integrato nella nostra applicazione a pagina singola.
Ora, andiamo al DishService.
Ora, nel DishService insieme al metodo
GetDises, introdurrò altri due metodi.
Un metodo chiamato getDish,
un piatto specifico e quindi identificherò il piatto con un id specificato qui.
Quindi, l'id
sarebbe e che specificherebbe darmi il piatto con l'id corrispondente a questo numero.
Quindi questo sarà un altro metodo che aggiungerò
e aggiungerò anche un altro metodo chiamato getFeaturedDish.
Quindi, questo piatto in primo piano utilizzerà
la proprietà in primo piano che abbiamo aggiunto
e quindi restituirà il piatto per il quale la funzione è impostata su true.
Quindi, questo è il modo in cui puoi selezionare un piatto specifico e poi renderlo disponibile.
Ora, il motivo per cui ho quel flag in primo piano è che quando la funzione è impostata su true,
quel particolare piatto verrà reso su homeComponent.
Ora, come selezioniamo questi piatti?
Quindi, aggiungiamo il codice per questo.
Quindi, per il GetDish,
ho bisogno di restituire qualcosa dalla costante dei piatti che ho già lì.
Quindi, dalla costante dei piatti,
userò il modo di JavaScript di fare il filtraggio di un array.
Quindi, il filtraggio di un array mi aiuterà a selezionare
solo quegli elementi dall'array che
corrispondono a un particolare criterio che verranno specificati
all'interno del filtro qui e poi tra loro restituirò solo il primo.
Ora, si dà il caso che quando specifichi un id,
selezionerà solo un elemento ma poi diventerà un array.
Quindi, da quell'array, ho bisogno di estrarre quell'elemento in quell'array.
Quindi, è per questo che sto usando tra parentesi graffe zero lì.
Quindi, questo mi aiuterà a identificarmi.
Quindi, come faccio a filtrare i miei piatti?
Quindi, per ogni piatto nella mia lista di piatti,
quindi questo è dove userò
un'altra funzionalità di dattiloscritto chiamata come funzioni di freccia.
La funzione freccia è un modo abbreviato di scrivere una funzione.
Quindi, se sei abituato a scrivere funzioni,
invece di scrivere la funzione elaboratamente dicendo
funzione e poi tra parentesi piatto e così via,
posso semplicemente scriverlo nei casi in cui la funzione è molto semplice,
è molto facile scrivere questo come una funzione freccia qui.
Quindi, qui, specificherò dicendo che l'id del piatto è uguale all'id.
Quindi, quello che sto specificando qui è filtrare l'array di piatti ed estrarre
solo quegli elementi dalla matrice per cui l'id del piatto.
Quindi, ogni elemento qui viene identificato da questo parametro piatto qui.
Quindi, per il quale l'id del piatto corrisponde all'
id che è stato fornito come parametro per il piatto.
Quindi, in questo modo estrarrai quel piatto specifico da
questo array e poi restituirai quel piatto da questo metodo getDish.
Le funzioni freccia mi hanno aiutato a scrivere codice in un modo più semplice.
Se non ti piacciono le funzioni di freccia
, puoi scriverle nel modo più convenzionale dicendo
«function dish», e poi da questo restituirai dish.id triple uguale a id,
quindi questo restituirà un booleano.
Quando il filtro incontra un vero dentro qui,
quegli elementi dai piatti saranno selezionati nella matrice.
Quindi, questo è dove la tua conoscenza JavaScript viene a tuo vantaggio.
Quindi, è necessario sapere come
funziona un filtro JavaScript per aiutarti a capire come questo viene fatto.
Ok, ora allo stesso modo per il piatto in primo piano,
userò un metodo simile per estrarre dal mio
array piatti usando un filtro qui, ma il filtro che
definirò qui sarebbe di nuovo una funzione freccia qui.
Ti abituerai alle funzioni di freccia e poi una volta che ci si abitua a loro,
allora ti renderai conto di quanto siano semplici troppo a destra.
Quindi, qui il modo per selezionarmi
è la proprietà dish.featured perché questa dish.feature è già un booleano lì.
Quindi, questo mi aiuterà a restituire il piatto in evidenza.
Quindi, per qualunque sia il piatto,
la caratteristica del piatto è vera.
Quel piatto particolare sarà filtrato fuori
dalla matrice di piatti e poi ci sarà solo un giorno.
Ad ogni modo, dovresti
assicurarti di questo in modo da impostare funzionalità solo su true per uno di questi,
e poi lo uso perché questo filtro restituirà un sub array dall'array di piatti,
quindi ho bisogno di selezionare quell'elemento.
Ci sarà un singolo elemento lì all'indice zero.
Quindi, sto usando l'indice zero per selezionare quell'elemento e restituirlo
dal metodo piatto get featured qui.
Quindi, questo completa l'aggiornamento al servizio di piatti.
Per costruire il nostro modello di casa,
presenteremo sulla vista casa un piatto selezionato,
una promozione corrente selezionata dal ristorante
e un leader aziendale selezionato dalla lista dei lettori.
Il leader aziendale che è presente in prima pagina
farà parte del tuo incarico che segue questa particolare lezione.
Ma stiamo per includere ora,
abbiamo un piatto in primo piano e la promozione in primo piano sulla prima pagina.
Quindi, il che significa che ho bisogno di un servizio di promozione che restituisca
la serie di promozioni che vengono condotte da questo particolare ristorante.
Quindi, lasciami aggiungere un servizio di promozioni per la mia applicazione.
Quindi, per farlo, nella cartella condivisa,
creerò un nuovo file chiamato promotion.ts.
Nella promotion.ts, creerò una classe, una
promozione di classe e restituirò questa promozione qui.
Allora, cosa contiene questa classe di promozione?
Contiene una proprietà id,
quindi contiene il nome per la promozione del ristorante.
Quindi, per esempio, la promozione potrebbe essere come buffet di fine settimana.
O il 10% di ogni singolo giorno all'
ora di pranzo e cose del genere possono essere presentate sulla prima pagina dei tuoi ristoranti lì.
Quindi, nome quindi includerò anche un'immagine,
che deve essere della stringa di tipo l'URL dell'immagine,
quindi etichetta che sarà una stringa.
Prezzo anche una stringa.
Ora, il lavoro implica,
non mi vedi usare al momento,
li porteremo in uso in uno degli esercizi successivi presentati Boolean.
Quindi, si vede nuovamente il flag in primo piano visualizzato nella promozione anche,
e quindi stringa di descrizione.
Quindi, vedete che la promozione strutturata è praticamente
simile alla struttura del piatto che abbiamo visto in precedenza.
Quindi, questo e' il corso di promozione qui.
Ora, insieme alla classe di promozione,
ho bisogno di creare un'altra classe che
esporta il set di promozione dire costante con le promozioni qui.
Quindi qui, ho intenzione di importare
la classe di promozione
dal file promotion.ts,
e quindi esporterei una costante chiamata promozione.
Quindi, vedi che sto usando una struttura molto simile ai piatti qui.
Quindi, si inizia a vedere che,
quella struttura che abbiamo usato in precedenza per
le promozioni per i piatti è utile anche per dichiarare promozioni.
Se hai una struttura diversa,
vedrai che con i leader la struttura sarà un po
'diversa per l'oggetto JavaScript qui. Le promozioni.
Ora, i dettagli di una promozione specifica
che ho dato nelle istruzioni, quindi ti suggerisco di copiarlo e incollarlo da
lì invece di digitare tutto qui.
Quindi, lasciami andare avanti e copiare e incollare
quell'oggetto JavaScript in questo array di oggetti JavaScript qui,
quindi eccoti.
La promozione ha un solo oggetto al momento.
In futuro, possiamo aggiungerne di più.
A questo punto, ne ho solo uno così ho appena aggiunto lì,
e ho intenzione di usarlo e questa è la promozione in primo piano per il mio ristorante lì.
Questa è solo promozione,
quindi lasciami aggiornare le promozioni,
questo è quello di cui ho bisogno.
Quindi, ho intenzione di salvare le modifiche al file promotion.ts.
Successivamente, creerò un altro servizio chiamato servizio di promozione.
Quindi, per farlo, andiamo alla riga di comando al prompt dei comandi tipo
ng generare servizi di sondaggi/promozione.
Quindi, il servizio di promozione viene creato lì.
Quindi, ora il PromotionService è in atto.
Quindi, aggiungiamo le funzionalità per PromotionService.
Quindi, andando al PromotionService,
si vede che il PromotionService è ora incluso nella cartella dei servizi qui,
quindi abbiamo bisogno di preparare un PromotionService.
Quindi, nel PromotionService,
ho intenzione di importare
la promozione da condivisione/promozione,
la classe di promozione e anche importare
promozioni dalla classe condivisa/promozioni lì.
Le promozioni costanti da lì.
Ora, proprio come abbiamo avuto per il servizio di piatti,
dobbiamo creare tre metodi all'interno del servizio PromozioniServizio.
Quindi, quello che ho intenzione di fare è salvare me stesso il problema,
andrò nel dish.service,
e poi copiare questi tre,
e poi incollarlo nel mio servizio di promozione,
quindi basta modificare il codice.
Ok, quindi dal servizio di promozione,
ho bisogno di restituire GetPromotions e
questo è del tipo di promozione e quindi questo restituirà PROMOZIONI,
e quindi ottenere il secondo sarebbe la promozione
che riceve nuovamente l'id della promozione,
quindi ho intenzione di restituire
promotions.Filter promo.id è id,
quindi la promozione getFeatured.
Quindi, puoi vedere che la struttura del Promotionservice è molto simile
al dishservice e questo non sarebbe tipo di promozione,
e questo restituirà
promotions.Filter promo e questo sarà promo.featured e basta.
Il mio PromotionService è pronto.
Ora, ho intenzione di entrare nel componente di casa, e prepararlo, in
modo che nel mio componente di casa,
mostrerò un piatto in primo piano e una promozione in primo piano.
La caratteristica, il piatto e la funzionalità/promozione saranno visualizzati nel
componente home utilizzando il componente della scheda materiale angolare.
Quindi, abbiamo bisogno di prima ottenere i dati nel nostro componente di casa,
quindi questo è quello che faremo nel file di script di tipo componenti di casa lì.
Quindi, andando al file di script di tipo componenti di casa, component.ts.
Qui, ho bisogno di importare il piatto
da condivisione/dish e anche il
corrispondente dish.service da services/dish.service.
Ok, ora farò anche la stessa cosa per le promozioni,
quindi ho intenzione di copiarlo e incollarlo qui,
e poi modificare questo,
quindi questa sarebbe la promozione,
questo sarebbe PromotionService,
e poi la promozione, e poi questo sarebbe PromotionService.
Quindi, con questo, abbiamo sia i
servizi per piatti e piatti e il servizio di promozione disponibili per noi,
all'interno della nostra componente di casa.
Venendo ora al costruttore.
Consente ora iniettare i due servizi qui,
e renderli disponibili per le nostre applicazioni o servizio piatto,
e il servizio di promozione iniettato qui.
Quindi, con questo, abbiamo accesso a entrambi i servizi.
Quindi ora all'interno del metodo ngOnInit,
vado a prendere i due piatti in evidenza.
Quindi, direi questo.dishservice.getFeatureddish
e anche promozione,
PromotionService e getFeaturedPromotion.
Solo per essere completo,
lasciami dichiarare il piatto qui come di
tipo Dish e la promozione come di tipo Promozione qui.
Quindi, questo dovrebbe chiarire tutti i valori che stiamo usando qui dentro.
Quindi, con questo, completiamo l'aggiornamento al nostro file dattiloscritto dei componenti di casa.
Passiamo ora al file modello,
quindi aggiungiamo le due schede per visualizzare il piatto in primo piano e la promozione in primo piano.
Ora, per questo, ti ho dato il codice nelle istruzioni.
Quindi, ho intenzione di copiare quel codice e incollarlo qui.
Sai già come creare carte,
quindi saresti in grado di seguire facilmente il codice che incolla qui.
Quindi, anche il modello dei componenti di casa viene aggiornato,
quindi puoi vedere che ha due schede qui.
Per uno, visualizzando il piatto e l'altro mostrando la promozione qui,
e racchiuso all'interno di un div FxLayout qui.
Quindi, salviamo le modifiche e poi diamo una rapida occhiata alla nostra applicazione.
Dopo aver creato il servizio di promozione,
abbiamo anche bisogno di includere il servizio di promozione in AppModule
e renderlo disponibile per la nostra applicazione.
Allora, andro' qui dentro,
e poi importero'
il servizio promozionale qui dentro.
Quindi, ha dichiarato il servizio di promozione
come uno dei provider
nel mio file AppModule.ts qui.
Quindi, nel file AppModule,
sto richiedendo entrambi questi
e quindi salvare le modifiche.
Andando al browser,
ora puoi vedere che nel browser,
il componente home ora mostra le due carte,
una per il piatto in primo piano e una per la promozione in primo piano qui.
Quindi, si può vedere che le due auto sono visualizzate qui.
Ora posso passare alla pagina Menu
e quindi anche alla pagina Contatti.
La pagina Informazioni su non è ancora presente,
verrà compilata la pagina Informazioni come parte del secondo incarico.
Dando un'occhiata alla stessa applicazione su una dimensione dello schermo più piccola,
quindi questo è uno schermo iPhone 6 Plus.
Diamo un'occhiata al componente di casa e a uno schermo di iPhone 6 Plus.
Puoi vedere che piatto in primo piano e promozione in primo piano sulla homepage lì.
Quindi, il menu che abbiamo visto in precedenza,
e anche la pagina di contatto visualizzata qui.
Quindi, puoi vedere che ora la nostra applicazione a pagina singola è molto più configurata.
Tranne per l'About,
che faremo nel secondo incarico.
Un altro piccolo cambiamento che puoi fare nel file HTML dei componenti di intestazione,
è che insieme alla direttiva del collegamento del router,
il percorso angolare supporta anche un'altra direttiva chiamata routeLinkActive.
Questo ci permette di applicare alcune classi al particolare elemento qui.
Quindi, in questo caso,
se questo link diventa attivo rispetto a qualsiasi cosa io specifichi qui,
verrà applicato come classe a questo particolare elemento lì.
Quindi, ho intenzione di specificare una classe chiamata attiva.
Quindi qui, sto specificando RouterLinkActive con active.
Quindi, se definisco una classe CSS chiamata attiva,
la classe verrà applicata a questo link,
ogni volta che questa particolare vista viene mostrata nella pagina delle applicazioni qui.
Copierò la stessa cosa e la applicherò a tutti i pulsanti rimanenti,
dove ho già definito il collegamento del router.
Quindi, ho intenzione di applicare la classe RouterLinkActive,
alla Home, al Menu e al Contattaci.
Ora, questo significa anche che dovrei definire una classe CSS attiva.
Quindi, per farlo, andrò nel file SESS dei componenti di intestazione,
e quindi definirò una classe attiva qui,
quindi definirò la classe attiva proprio lì.
Per definire la classe attiva,
aggiungerò un'altra variabile di colore qui chiamata background-moredark.
Quindi, il colore corrispondente è 4527A0,
questa è una versione più scura di questo colore scuro di sfondo, 4527A0.
Quindi, per il mio attivo,
quello che farò è, dalla classe attiva,
lascerò che la classe definisca uno sfondo,
imposti lo sfondo di
quell'elemento sul colore di background-moredark.
Quindi, quando quella particolare vista è selezionata e mostrata nella pagina,
allora questa classe attiva verrà applicata a
quel particolare tag A
lì dalla direttiva attiva collegamento router che abbiamo applicato qui.
Ora, che cambiamento fa questo causa sulla nostra pagina web.
Ora, andando alla nostra pagina web,
vedremo cosa questo introduce sulla nostra pagina web.
Andando alla nostra applicazione,
ora si vede che quando siamo
nella vista home nel componente home visualizzato qui, la sua vista corrispondente.
Quindi, il pulsante Home qui ha un colore di sfondo diverso che viene
applicato perché la classe attiva è stata aggiunta in perché
definiamo RouterLinkActive per attivo qui.
Quindi, quella classe viene applicata.
Allo stesso modo, quando si seleziona il menu,
si vede che il menu è evidenziato nell'intestazione,
e la vista menu è mostrata qui,
e in modo simile per il contenuto.
Ora, questo ci permette di vedere a colpo d'occhio su quale pagare particolare vista VR,
nella nostra applicazione a pagina singola.
Quindi, questo è un ulteriore po 'di miglioramento offerta per l'interfaccia utente,
che ci permette di vedere alcune caratteristiche interessanti.
Anche se, non aggiunge molto alla funzionalità dell'applicazione,
ma basta aggiungere qualche piccola funzionalità che sarà un'utile aggiunta alla tua applicazione.
Quindi, con questo, completiamo questo esercizio.
In questo esercizio, abbiamo lavorato per integrare
il componente di contatto nella nostra applicazione a pagina singola.
Abbiamo anche progettato un paio di schede che abbiamo incluso nel componente home
e aggiunto alcune nuove funzionalità alla nostra applicazione.
Questo è un buon momento per salvare le modifiche al tuo repository Git con il messaggio,
Single Page Application Part 1.