[MUSICA]
Iniziamo ora a parlare di Routing angolare.
Sta instradando o sta facendo il tifo?
Sto per fare il tifo per il routing.
Quindi d'ora in poi, pronuncerò tutti questi come routing,
percorsi, router e così via.
Se vi capita di venire da una zona in cui in inglese lo pronunciate come percorso o
router, per favore portatemi con me.
Quindi, cos'è esattamente il routing angolare e come ci aiuta?
In termini di applicazione angolare che abbiamo visto
finora, non abbiamo mai visto l'uso per il routing.
Abbiamo visto che possiamo sviluppare un'applicazione angolare con
più componenti e quindi farne uso uno all'interno dell'altro, e
sviluppare un'intera applicazione Angular senza nemmeno parlare di routing.
Ora supponiamo di avere più componenti e di
voler essere in grado di navigare tra i componenti in
un modo che è possibile causare questa navigazione attraverso,
ad esempio, facendo clic su collegamenti o pulsanti nell'interfaccia utente ed
essere in grado di rendere diverse visualizzazioni nella schermata dell'applicazione,
quindi Angular Routing viene in tuo soccorso.
Vedremo come possiamo usare il routing per sviluppare qualcosa chiamato
applicazioni a pagina singola.
Parleremo di applicazioni a pagina singola nella prossima lezione.
Ma per il momento, concentriamoci su Angular Routing e
in particolare sul Route un modulo che è disponibile in Angular.
Il modulo router stesso è separato dal modulo core angolare, quindi
è disponibile come modulo separato e sarà necessario importarlo esplicitamente
nell'applicazione Angular per utilizzare il
modello Angular Router supportato fornisce la navigazione tra le
viste raggio fuori dai componenti del raggio che fanno parte della tua predazione angolare.
Quindi, come parte dell'esercizio, aggiungeremo più componenti e
vedremo come possiamo navigare tra loro utilizzando il router angolare.
Quindi, come ho già detto, il router angolare
consente la navigazione tra varie viste.
In modo tale che è possibile includere questa navigazione nei
collegamenti o nei pulsanti basati
sulla barra degli strumenti e così via che è possibile includere nell'interfaccia utente dell'applicazione Angular e
quindi è possibile attivare la navigazione da una vista all'altra
facendo clic sul collegamento o sul pulsante nel UI.
Questo è dove il router angolare sfrutta l'URL del browser e
utilizza l'URL del browser come istruzione
per navigare tra le viste generate dal client raggio.
Queste viste sono tutte tipicamente supportate dai più componenti
che formano la difficile applicazione Angular.
Ora, quando si passa da una vista a un'altra,
è anche possibile passare parametri facoltativi a tali viste.
Come abbiamo appreso in quella diapositiva precedente,
il Router angolare sfrutta l'URL per
consentirgli di riconoscere la necessità di navigare tra il centro.
Quindi, questo è dove Angular Router sfrutta ciò che
è già supportato in HTML5 tramite l'API di cronologia?
Quindi, cosa ci consente di fare l'API della cronologia?
Dà agli sviluppatori la possibilità di modificare l'
URL di un sito web senza causare un aggiornamento della pagina.
Ora, se siete abituati a visitare vari siti web nel vostro browser,
normalmente si dovrebbe o fare clic sulla barra dei segnalibri o
su un link in una pagina o si dovrebbe digitare esplicitamente
l'URL nella barra degli indirizzi del browser.
Ora, quando lo fai, stai specificando esplicitamente l'URL lì.
Ora, quando si specifica un URL,
si sta attivando il browser per andare automaticamente a un server e
recuperare la nuova pagina e rendere la pagina nella finestra del browser.
Ora, se può sopprimere questa necessità di andare a un server e recuperare le informazioni, ma
invece modificare l'URL senza causare questo aggiornamento della pagina,
allora possiamo approfittarne per permetterci di essere in grado di navigare
tra le viste che fanno parte di una singola applicazione e
questo è dove prendiamo vantaggio del HTML5.
History API che supporta metodi come PushState e ReplaceState.
Quindi, PushState consente di aggiungere una voce di cronologia nella
cronologia del browser senza causare effettivamente un aggiornamento della pagina.
Allo stesso modo, un ReplaceState modificherà
la voce della cronologia esistente nella cronologia del browser.
Quindi, è anche possibile utilizzare il
pulsante avanti e indietro del browser per essere in grado di spostarsi
avanti e indietro tra gli URL senza causare un aggiornamento della pagina.
Ora, questo è dove è necessario specificare qualcosa all'interno
della pagina HTML indice chiamato base.
Quindi, quando l'API della cronologia HTML fa uso di questi metodi,
quindi per la modifica, è necessario specificare una
posizione di base da cui si specificano le parti aggiuntive
del percorso URL che non comporterà un aggiornamento della pagina.
Quindi in questo caso, per la nostra applicazione Angular,
questo inizia sempre dalla radice.
Quindi, è per questo che specifichiamo la base come href=»/».
Tutto il resto che viene dopo che nell'URL verrà
trattato all'interno dell'applicazione Angular come qualcosa che
attiva la navigazione che viene gestita il router angolare stesso
senza causare che il browser abbia bisogno di un aggiornamento da un server.
Quindi, è così che il router angolare sfrutta l'API di cronologia HTML5.
Ora, se non hai l'API della cronologia,
l'altro modo di fare la navigazione è usare hashtag.
Lo sai già in HTML, se specifichi un link che inizia
con un hashtag, che fa riferimento a un link all'interno della stessa pagina.
Quindi, quando si fa clic su tali collegamenti, non causerà un aggiornamento della pagina.
Invece, ti reindirizzerà a un'altra posizione all'interno della stessa pagina.
Quindi, questo è un altro modo di fare le cose.
Ma per il rendering pulito, l'API HTML5 supporta questa
API di cronologia che consente di manipolare la cronologia del
browser senza causare un aggiornamento della pagina.
Dopo questa lunga spiegazione
prolissa, prendiamo un esempio per aiutarci a capirlo ancora di più.
Supponiamo di definire il tuo URL come questo, ad esempio, esempio.abc.com/home.
Ora con l'API di cronologia HTML5,
puoi semplicemente prendere l'ultima parte dell'URL e
modificarla in un altro URL come avevo mostrato qui con esempio.abc.com/menu.
Quindi vedi che l'URL ora è stato modificato da barra home a menu barra,
questa modifica può essere attivata utilizzando un metodo di stato push dell'
API della cronologia HTML5 senza come ho detto, senza ricaricare la pagina.
Invece, questo sarà un trigger interno per la
navigazione che il router angolare sfrutta esplicitamente per
supportare la navigazione tra varie viste dell'applicazione Angular.
Ora ovviamente devi essere interessato a come fa il Router angolare ad approfittare
di questo.
Quindi questo è dove il router angolare sfrutta la manipolazione della cronologia
per modificare l'URL del browser senza attivare un aggiornamento della pagina.
Prendiamo un esempio.
Supponiamo di avere la tua applicazione angolare che risiede in questo particolare URL.
Ora, si dà il caso che l'applicazione Angular su cui si
sta lavorando venga renderizzata al browser accedendo a questo particolare URL.
Quindi, ci aiuterà a capire rapidamente cosa ci consente di fare il router angolare.
Quindi, in questo caso, quando si digita questo nell'URL del browser, il
router angolare può essere facilmente configurato per reindirizzare l'utente
a una posizione predefinita all'interno dell'applicazione angolare.
Di solito, ricordami che qualcosa come casa.
Quindi ti porterà al punto di ingresso predefinito per la
tua applicazione angolare che per
ragioni di facile comprensione, lo etichetterò come/home.
Quindi, se il tuo URL contiene localhost: 4200/home,
significa che sei nella tua posizione home predefinita.
Ora, quando questa navigazione viene attivata,
puoi lasciare che il tuo router angolare ti porti automaticamente alla vista,
ad esempio, supportata da quel componente home.
Quindi, quando l'URL diventa localhost: 4200/home,
eseguirai automaticamente il rendering della vista del componente home nella schermata del browser.
Molto esattamente quando si posiziona la visualizzazione che verrà esaminata nella diapositiva successiva e
nell'esercizio che segue.
Allo stesso modo, puoi avere altre viste all'interno
dell'applicazione Angular che possono anche essere supportate tramite altri URL
che sono estensioni per localhost: 4200.
Quindi, ad esempio, se l'URL è localhost: 4200/aboutus, allora ciò
potrebbe portare a mostrarti la vista che viene renderizzata da aboutComponent.
E allo stesso modo, il menu ti mostrerà il MenuComponent e così via.
Quindi ciò che questo ci permette di fare è,
a seconda di ciò che l'URL utilizzato nel tuo browser,
lo userai per navigare automaticamente tra le varie
viste dei tuoi vari componenti della tua applicazione Angular.
Ora, non devi preoccuparti esplicitamente di questo.
Se configuri il Router angolare per occuparsi di tutto questo, il router
si prenderà automaticamente cura di fornirti la navigazione tra questi
componenti come vedremmo nell'esercizio che segue questa particolare lezione.
Ora, prima di procedere all'esercizio in cui impareremo di più
sul router angolare, lasciami attirare rapidamente la tua attenzione su alcuni termini
all'interno del router angolare che incontrerai durante l'esercizio e
vorrei che prestassi particolare attenzione a questi termini,
perché sono fondamentale per capire come funziona effettivamente il router angolare.
Quindi vedresti prima che quando progettiamo il router angolare,
prenderemo quell'aiuto del modulo router che
fa parte della libreria del router a barra angolare.
Quindi, stiamo andando ad importare il modulo router in o l'applicazione angolare
nel modulo app e poi anche noi importeremo i percorsi.
Quindi, i percorsi ci permettono di definire i vari percorsi che la nostra
applicazione Angular fa uso di o che il router angolare fa uso di.
Quindi, in tal caso, saremmo specificando i percorsi sotto forma di un percorso e
il componente corrispondente.
Così, come si è visto nella diapositiva precedente, si è visto che ognuna di queste
estensioni URL è stata mappata alla vista di un particolare componente.
Quindi, quel tipo di informazioni viene fornito a quel router angolare
attraverso percorsi e questi percorsi sono tutti specificati utilizzando
un oggetto JavaScript come questo percorso con due proprietà.
Percorso e componente e alcune proprietà aggiuntive che non
incontreremo in questo momento, ma vedremo in alcuni degli esercizi successivi.
Inoltre, la seconda domanda che ti chiederesti è dove verrebbe
resa questa vista nella tua applicazione Angular?
Questo è dove all'interno del nostro modello del nostro componente app,
includeremo una direttiva chiamata come il routeRoutlet che è specificato come
vedete come e .
Questo sarà incluso nel file modello componente dell'app,
ora il tuo router angolare naviga
alle diverse viste dei diversi componenti.
La vista corrispondente del componente verrà inclusa nella
vista delle applicazioni ovunque si specifichi questa presa router particolare.
Quindi, attenzione per questo nell'esercizio che segue.
Inoltre, per attivare la navigazione, si vedrebbe che
con molti dei tag a che vengono utilizzati all'interno dell'applicazione.
Quindi, per esempio, vorrei includere un setup un tag con il
pulsante MD componente materiale angolare nella barra degli strumenti,
nel componente intestazione della nostra applicazione angolare.
Vorrei associare i tag a con un'altra direttiva,
una direttiva attributo chiamata routerLink.
Il RouterLink è una direttiva effettiva che il modulo router ci fornisce.
Questo collegamento router ci permette di specificare il percorso come, ad esempio,
codici scritti, posso vedere un «/menu».
È possibile avere più dettagli di questo per RouterLink.
Ma per l'esercizio, inizieremo con un semplice esempio in cui avremmo,
per esempio, /menu barra home barra contattaci e così
via specificato utilizzando l'attributo RouterLink diretto.
Quindi, quando fai clic su un link come questo nella barra degli strumenti,
allora questo attiverà il Router angolare per causare una modifica o
una navigazione a una vista particolare supportata dal modulo Angular Router.
Quindi, la mappatura tra questo link e i componenti corrispondenti
è già specificata nel percorso che diamo alla nostra applicazione angolare.
Quindi, fai attenzione a tutte queste cose mentre fai l'esercizio.
Spiegherò alcune di queste cose e la ragione per
farle mentre stiamo facendo i passi dell'esercizio che segue questa lezione.
[ MUSIC]