[MUSIC]
In questo esercizio vedremo come possiamo sfruttare il
modulo di routing di Angular per essere in grado di supportare più componenti ed
essere in grado di navigare a uno qualsiasi di questi componenti nella nostra applicazione Angular.
Dando una rapida occhiata allo stato della nostra applicazione.
Alla fine dell'ultimo esercizio,
abbiamo già notato che in questa applicazione, nell'intestazione,
abbiamo collegamenti a quattro diverse citazioni, pagine non quotate qui.
Ora, in termini angolari, questo sarebbe supportato utilizzando
componenti diversi, come vedremo in questo esercizio.
Quindi qui vediamo che quando clicchiamo sulla Home,
vogliamo essere in grado di vedere i dettagli di ciò che dovrebbe essere presente nella Home page.
E allo stesso modo, l'About e il Menu ovviamente lo vedi già lì,
e poi il Contatto, probabilmente mostra alcune informazioni sul contenuto di
questo particolare ristorante.
Quindi come fanno a sostenere una cosa del genere?
Innanzitutto, dando una rapida occhiata vediamo che il Menu è
già supportato visualizzando qui le informazioni sul menu, e
questo è già facilitato con l'uso del componente Menu.
Quindi vediamo che il componente Menu è giustapposto tra l'intestazione e
il piè di pagina ed è in grado di visualizzare le informazioni proprio lì.
Ora, come possiamo sfruttare l'uso del modulo router angolare per
consentirci di supportare questi componenti multipli ed essere in grado di navigare tra di loro.
Ora, per iniziare, in primo luogo, ovviamente, abbiamo bisogno di più componenti,
ognuno di essi mostra la propria vista in modo che possiamo navigare tra le viste.
Quindi aggiungiamo altri tre componenti alla nostra applicazione angolare,
la Home, l'About e il Contatto.
Sai già come farlo, quindi passiamo a quel passo successivo.
Al prompt, digitare ng g component
home per creare il componente home.
Allo stesso modo generare
il componente su e
anche mentre siamo a esso
il componente di contatto.
Così ora abbiamo tre componenti aggiunti insieme al nuovo componente che
abbiamo già.
Il componente di dettaglio del disco è già in uso nei componenti del menu, quindi
non lo consideriamo per il momento.
Ma ora abbiamo a casa, circa, contatti e componenti di menu, e
abbiamo bisogno di un modo per andare tra di loro.
Allora, come facciamo a farlo?
Quindi è qui che faccio uso del modulo router angolare.
Per iniziare a utilizzare il modulo router per permetterci di navigare
tra questi componenti, aggiungiamo un nuovo modulo angolare.
Ora questo modello di utilizzo del modulo router è qualcosa che è suggerito per
applicazioni angolari leggermente più complesse, ma
se lo facciamo come pratica standard va un lungo cammino per aiutarci in futuro.
Quindi sto iniziando anche la semplice applicazione con
l'inserimento del modulo router nel proprio modulo separato.
Questo include tutte le nostre esigenze di routing in un modulo separato.
Per iniziare, usiamo di nuovo la CLI angolare per
creare un altro modulo, e chiameremo quel modulo come routing app.
Quindi questo modulo di routing app che stiamo per creare sta andando a sfruttare
il modulo di scanalatura angolare per fornire funzionalità di routing per la nostra applicazione.
E poi abbiamo intenzione di fare uso di questo nel nostro modulo app per abilitare il routing.
Per creare un nuovo modulo chiamato routing app,
al prompt digitare ng g module app-routing,
e che dovrebbe creare un modulo di routing app e
inserire un file app-routing.module.ts in quella particolare cartella lì.
Ora questo modulo di routing delle app è appena lasciato lì.
Dobbiamo includerlo esplicitamente nel nostro modulo app,
quindi deve essere in grado di farne uso.
Andando all'editor ora vediamo che ora abbiamo un'altra cartella qui
chiamata app-routing e all'interno che abbiamo un ApproutingModule qui,
scegliamo un modulo angolare generico che la CLI angolare ha generato per noi.
Questo non ha nulla di specifico sul routing in quanto tale al momento,
ma stiamo andando ad aggiungere quelle funzionalità lì dentro.
Ma, prima di farlo, usiamo questo ApproutingModule nel nostro app.module,
il modulo principale per la nostra applicazione Angular.
Per fare ciò, apri l'app.module, e
mentre siamo qui, fammi fare un po 'di pulizia qui.
Tendo a non piacere il codice disorganizzato, quindi
ho intenzione di spostare tutto questo codice per
i componenti insieme in un posto lì e
poi ho i miei servizi richiesti qui sotto.
Ora abbiamo un nuovo modulo che stiamo ottenendo
dal ApproutingModule,
che abbiamo appena creato e
poi ho intenzione di richiedere che
ApproutingModule nel mio,
modulo Route o AppModule qui.
Quindi, includo ApproutingModule importandolo prima lì.
E poi dopo, nelle importazioni, vado e
poi aggiungo ApproutingModule.
Proprio lì, ApproutingModule.
Quindi con questo, il mio modulo app,
il modulo root, è ora risolto per utilizzare ApproutingModule.
Ora questo mi dà la libertà di sviluppare la mia parte di routing nel
mio ApproutingModule con piena sicurezza che verrà utilizzata dal mio modulo app.
Quindi cerchiamo di salvare le modifiche al modulo app, e
poi torneremo indietro e aprire il ApproutingModule qui.
E qui faremo uso
del modulo router che Angular ci fornisce.
Quindi qui lasciami importare il,
RouterModule qui, e anche il
modulo Routes compagno disponibile da Angular.
E poi così ho intenzione di importarlo da Angular,
e poi, RouterModule qui.
Quindi dalla libreria del router angolare, importazione sia il RouterModule che
il modulo Routes.
Quindi una volta che lo faccio, ovviamente, ho bisogno di essere in grado di includere il RouterModule qui.
Quindi, oltre al CommonModule che ho importato lì,
ho bisogno di usare anche RouterModule qui.
Ora, lo lascio a questo punto.
Svilupperemo i percorsi per la nostra applicazione Angular e
poi torneremo e sistemeremo questo un po 'più tardi.
Quindi con questo, lasciami salvare le modifiche al modulo di routing dell'app.
E quello che farò è, solo per mantenere il mio codice pulito e
organizzato, definirò tutti i percorsi per la mia applicazione in un altro file.
Ma creerò nella cartella di routing dell'app e
poi lo chiamerò come routes.ts5.
Ora, all'interno di questo file, creerò tutti i percorsi di cui ho bisogno.
Quindi qui, ho intenzione di importare,
The Routes from, @angular /router,
e quindi usarlo per costruire i percorsi per la mia applicazione.
Ora, inoltre, ho bisogno di essere in grado di importare tutti
i componenti che ho all'interno della mia applicazione.
Perché voglio essere in grado di navigare a tutti i componenti.
Quindi, dove ho l'elenco di tutti i componenti?
Li ho nell'app_module.
Quindi lasciami andare al app_module.
Cerco di non digitare le cose il più possibile per tenere le cose sotto controllo.
Quindi andrò all'app_module, e poi copio tutti i componenti che ho.
Non ho bisogno di AppComponent perché non navigherò direttamente a quello nella mia
applicazione, ma i restanti di cui avrò bisogno.
Quindi ho intenzione di copiare semplicemente tutti questi e
poi includerli nel mio file route, qui.
Quindi ora ho il MenuComponent, il Dishdetail, Header, Foot.
In realtà, non ho bisogno di Header e FooterComponent.
Non ho bisogno di Header e
FooterComponent perché non ho intenzione di navigare verso di loro usando i percorsi.
Quindi lasciami eliminare l'intestazione e i componenti piè di pagina.
Mi serve solo il menu, la casa, l'informazione, i contatti.
Ho incluso il Dishdetail, arriveremo a questo in uno degli esercizi successivi.
Quindi, ora che abbiamo incluso tutti questi, il passo successivo è
per me definire i vari percorsi che sono disponibili qui.
Definirò una costante qui
denominata rotte del tipo Routes.
Quindi ora capisci perché ho percorsi importanti dal router angolare lì.
Quindi questo mi permetterà di definire un array che specifica
i vari percorsi che fanno parte della mia applicazione.
Qui, lasciatemi specificare tutti i percorsi qui.
Ora, quando specifichi percorsi nella tua
applicazione angolare, specificherai il percorso.
Che inizierò con HomeComponent,
e poi quando navigo al percorso home,
il componente corrispondente è HomeComponent.
Quindi, quando il mio URL include casa,
allora navigherò su HomeComponent.
Nella lezione precedente, abbiamo già visto come usiamo l'HTML
pushState () per riconoscere la
navigazione interna, utilizzando il supporto HTML per pushState ().
Quindi questo è quello che sto sfruttando qui per definire questi vari percorsi qui.
Quindi, quando dico localhost: 4200/home,
allora questo sta puntando a homeComponent, qui.
Quindi questo è il modo in cui navigherò su HomeComponent.
Allo stesso modo, possiamo definire per gli altri componenti nella nostra applicazione.
Il prossimo percorso che ho intenzione di definire è il MenuComponent.
Per questo esercizio, ho intenzione di definire solo questi due.
I restanti saranno compilati come parte
di alcuni degli esercizi successivi e assegnazioni che seguono.
Quindi ne abbiamo due, Home e Menu.
Ora, dovrei anche fornire il percorso predefinito qui.
Quindi, quando l'utente naviga su localhost: 4200,
finirai nella posizione predefinita.
Quindi, in tal caso, reindirizzerò semplicemente l'utente a HomeComponent,
che è ciò che verrà visualizzato nell'applicazione Angular.
Quindi, per farlo, digiterò la proprietà reDirectTo.
E poi definiscilo per essere/home.
Significato che quando si naviga senza fornire un percorso URL lì,
si dovrebbe automaticamente passare a HomeComponent,
e questo dovrebbe corrispondere completo qui.
Quindi questi tre, vi forniro' per le rotte qui, per il momento.
I restanti,
come ho detto, saranno aggiunti come parte del resto degli esercizi.
Ora, ovviamente vedi queste
linee rosse squiggly lì perché queste sono tutte in
../Quindi lasciami sistemare quelle.
Così ora, dal file routes.ts,
stiamo preparando questa costante Routes qui e
poi renderlo disponibile.
Quindi ora che questo è pronto per noi, torneremo all'app-routing.module.
E nell'app-routing.module,
ho intenzione di importare la costante
route, Routes costante.
Se vuoi dirlo come rotte, instrada costanti e usalo qui.
Ora, come faccio a usarlo qui?
Ora, il RouterModule prende come
parametro per il forRoot,
Il parametro è la configurazione route.
Quindi ho intenzione di fornire le rotte come parametro per questo, il RouterModule.
Ok, questo corregge la nostra configurazione di routing per la nostra applicazione.
Un ultimo cambiamento che dobbiamo risolvere è che da app-routing.module,
vogliamo essere in grado di esportare RouterModule nel nostro app-module in modo
che possa anche farne uso.
Quindi questo è dove facciamo uso della
proprietà di esportazione nel nostro decoratore ngModule.
E rendere il nostro RouterModule disponibile per l'AppModule.
Quindi salviamo le modifiche anche finora.
Ora, quando si instradano a una di queste parti,
qualunque cosa si visualizzi la vista per il particolare componente.
Al momento non abbiamo nulla nella nostra applicazione.
Quando si guarda il file AppComponent.html.
Qui, per impostazione predefinita abbiamo solo l'app-header, app-menu,
e l'app-footer qui.
Fortunatamente,
l'Angular RouterModule ci fornisce
una direttiva chiamata come router-outlet.
Quindi ogni volta che specifichi questa direttiva come,
Il tag nel tuo file modello.
Quindi la tua applicazione Angular
lo userà automaticamente come luogo in cui deve essere inserita la vista corrispondente.
Quindi, specificando la presa del router nel file modello del mio AppComponent.
Ora sarò in grado di visualizzare qualsiasi di queste informazioni in quella particolare posizione.
Così abbiamo apportato modifiche al modulo di routing app,
il file AppComponent.html, dove abbiamo aggiunto il router-outlet.
Abbiamo definito le rotte nel file Routes.ts e
poi abbiamo l'AppModule dove abbiamo aggiunto nel ApproutingModule
come una delle importazioni lì, dopo averlo importato qui.
Quindi, dopo tutti questi cambiamenti, andiamo a
dare un'occhiata a ciò che le nostre applicazioni angolari stanno mostrando nel browser.
Andando al nostro browser, ora possiamo vedere che nel nostro browser
la cosa predefinita che è stata mostrata qui è lavori domestici.
Dalla tua conoscenza di come funziona il componente generato da Angular CLI.
Riconosci già che questo deve essere nel modello per il componente home.
Inoltre, dai un'occhiata all'URL nella parte indirizzo del browser.
Vedete che dice localhost: 4200/casa.
Se digito semplicemente localhost: 4200,
questo si reindirizzerà automaticamente a localhost: 4200/home.
Perché abbiamo impostato quel particolare percorso nella nostra configurazione di rotte qui.
Ora non abbiamo modo di andare ai moduli rimanenti, quindi
come forniamo il collegamento in modo da poter navigare al modulo rimanente.
Quindi, per riempirlo, dobbiamo andare ed essere in grado di aggiungere ulteriori
informazioni nei file di modello dei componenti di intestazione in modo
che possa navigare tra questi vari componenti.
Tornando al nostro editor, lasciami aprire il file HeaderComponent.html.
All' interno di questo file HeaderComponent, vediamo che abbiamo questi pulsanti
qui che dovrebbero permetterci di navigare a quei particolari componenti lì.
Quindi qui, prendiamo l'aiuto di un'altra direttiva attributo che
il modulo di routing fornisce per noi chiamato come RouterLink.
Quindi a questi forniremo
RouterLink come/home.
Il che significa che per questo particolare pulsante,
il link home nella nostra barra degli strumenti.
Quando clicchiamo su questo, che dovrebbe indirizzarmi automaticamente a casa.
Quindi in questo modo, la mia applicazione Angular sa dove mandarmi a questo punto.
Quindi questo è per casa lì.
Ora allo stesso modo, lasciatemi aggiungere anche uno per il menu qui.
Per il menu, quando clicco sul link del menu lì,
questo dovrebbe portarmi al componente del menu.
Quindi la direttiva dell'attributo RouterLink mi consente di specificare, come vedi
qui una stringa in cui posso specificare il percorso che deve essere aggiunto.
Salviamo anche queste modifiche, e poi ora diamo un'occhiata finale alla nostra applicazione.
Andando alla nostra applicazione, ora vediamo che un componente Home viene visualizzato qui.
Quando clicchiamo sul componente Menu, siamo al menu.
Quindi nota come la mia applicazione è navigata automaticamente
al componente menu per mostrare la vista con il menu qui.
E anche dando un'occhiata alla barra degli indirizzi,
si noti come la barra degli indirizzi ora mostra localhost: 4200/menu.
Ancora una volta, possiamo tornare al componente home e al componente menu,
avanti e indietro.
Quindi questo mostra come aggiungendo questo routing alla nostra applicazione,
siamo in grado di navigare e mostrare diverse viste all'interno della nostra applicazione.
Ora, il circa e il contatto, lo faremo come parte di
un altro esercizio e il compito che segue in seguito.
Questo completa questo esercizio in cui abbiamo usato modulo router angolare e
quindi configurato la nostra applicazione angolare per utilizzare vari percorsi
per mostrare le diverse viste.
Questo è un buon momento per
fare un commit Git con il messaggio Nozioni di base del router angolare.
[ MUSIC]