Share
Con la recente versione ufficiale di Angular 2, è un buon momento per aggiornarsi su alcuni dei più grandi cambiamenti.
Una cosa che è cambiata molto è il router Angular 2, che è stato completamente rimpiazzato nel lead-up della versione finale. Quindi, in questi due brevi video tutorial del mio corso su Angular 2 Routing, ti mostrerò come creare le configurazioni del percorso e come utilizzarle in un'app. Imparerai a conoscere percorsi semplici, reindirizzamento e percorsi con caratteri jolly. Quindi vedrai come utilizzare una direttiva per configurare il componente dell'app per visualizzare i percorsi.
I video seguono le lezioni precedenti del corso, ma dovresti essere in grado di seguire le tecniche che utilizziamo. Puoi trovare i file sorgente per l'intero progetto su GitHub.
È possibile creare un'app completa in Angular 2 senza instradamento. Quindi, se possiamo farlo, perché abbiamo bisogno di routing a tutti?
Il motivo principale è che se non usiamo il routing, la nostra app dipenderà esclusivamente dalla navigazione attraverso il controllo del programma. Dovremo cambiare i componenti in base all'interazione dell'utente, come quando fanno clic su qualcosa.
Con il routing, saremo in grado di navigare cambiando gli URL. Tutti i componenti verranno mappati su un percorso, consentendoci di spostarci facilmente all'interno della nostra app.
Innanzitutto, per rendere il routing funzionante, dobbiamo aggiungere un href di base nella testa del nostro file index.html.
In precedenza, dovevamo configurare i nostri percorsi all'interno del componente che li ospita. In questo caso, ciò significherebbe aggiungere le nostre configurazioni di route al nostro file app.component. Con il nuovo router, si suggerisce di creare la nostra configurazione di percorso in un file separato.
Quindi creiamo un file chiamato app.routes.ts nella radice della cartella dell'app.
La prima cosa che aggiungeremo a questo file sono le importazioni.
In primo luogo, afferrare provideRouter o RouterConfig dal router angolare. Quindi importa i componenti Informazioni, Errore e Inizio dalla cartella delle pagine. Dobbiamo importarli in modo da poterci dirigere verso questi componenti.
La prossima cosa che faremo è aggiungere la nostra configurazione del percorso per mantenere i nostri percorsi:
const routes: RouterConfig = [];
Qui stiamo usando a const dichiarazione. Questo è uno dei modi in cui è possibile dichiarare una variabile in TypeScript e rappresenta un valore che non può essere modificato. In questo caso, lo stiamo usando per mantenere il nostro RouterConfig.
Ora, la prima cosa che aggiungeremo è un reindirizzamento. In un attimo, aggiungeremo un percorso con caratteri jolly per la nostra pagina di errore. Questo di per sé farà sì che la nostra app inizi dalla pagina di errore. Il motivo è che quando la nostra app parte, non ha una rotta. Pertanto, è necessario specificare un componente come route predefinita.
Potremmo facilmente aggiungere il componente che vogliamo avviare la nostra app sulla rotta vuota, ma il modo consigliato per gestirlo è con un reindirizzamento. Il reindirizzamento deve venire prima o non funzionerà correttamente. Ecco come appare:
Per prima cosa abbiamo il nostro percorso, che è una strada vuota. Questo è il percorso con il quale verrà lanciata la nostra app. Poi abbiamo il nostro reindirizzamento, che cambierà il nostro percorso verso casa quando incontra una rotta vuota. Dopo ciò, abbiamo il nostro pathMatch. Non entrerò nei dettagli se non per dire che questo fa sì che la rotta vuota corrisponda al reindirizzamento.
Quindi abbiamo il nostro percorso che punta al AboutComponent. Il percorso è impostato su 'di', che è ciò che vedremo nella barra degli indirizzi quando navigheremo su questa rotta. Il componente a cui sarà navigato è il AboutComponent. Dopo ciò, abbiamo il HomeComponent. Il percorso è 'casa', e il componente da lanciare è il HomeComponent.
Questa è la rotta a cui navigheremo dal reindirizzamento. Quindi l'ultimo percorso che aggiungeremo è un percorso con caratteri jolly. Questo corrisponderà a tutti i percorsi che abbiamo definito. Questo è anche il motivo per cui abbiamo aggiunto il reindirizzamento. Se non lo facessimo, la nostra app inizierà da questa rotta poiché iniziamo da una rotta che non è definita, una rotta vuota.
Dopo aver aggiunto il reindirizzamento, qualsiasi percorso che digitiamo che non esiste riceverà la nostra pagina di errore. Quindi esportiamo un altro const utilizzando il metodo router di offerta dal router angolare. Usiamo i percorsi che configuriamo con questo metodo.
Una volta che lo facciamo, i nostri percorsi sono finiti. L'ultima cosa che dobbiamo fare è aggiungere il routing alla nostra app.
Vai al main.ts file. La prima cosa che faremo in questo file è l'importazione myRouterProviders dall'app instrada il file che abbiamo creato. Quindi dobbiamo aggiungerlo alla nostra funzione di bootstrap. Aggiungendoli qui ha il vantaggio di rendere i percorsi disponibili per tutti i componenti nella nostra app.
Una volta che lo facciamo, abbiamo finito di impostare i nostri percorsi. Nel prossimo video, completeremo la configurazione del routing e visualizzeremo l'anteprima dell'app.
Finora, abbiamo configurato i nostri percorsi e li abbiamo aggiunti alla nostra funzione di bootstrap. Ora, abbiamo solo bisogno di configurare il nostro componente app per ospitare i nostri percorsi.
Ecco come app.component.ts dovrebbe guardare:
Innanzitutto, importiamo le nostre direttive router. Lo abbiamo già visto quando un componente deve utilizzare il collegamento del router. Questo componente utilizzerà il collegamento router e un'altra direttiva dell'uscita router Angular 2. Successivamente, rimuoviamo il modello e aggiungiamo un backtick per renderlo una stringa di template. Questo ci permetterà di creare un modello multilinea.
Innanzitutto, aggiungiamo a div per la nostra barra di navigazione bootstrap. Questa barra di navigazione verrà visualizzata su ogni pagina, poiché fa parte del modello. Quindi all'interno della barra di navigazione, aggiungiamo il nostro marchio. Questo può essere un testo o un'immagine e rappresenta il marchio della tua app.
Quindi aggiungiamo una lista non ordinata. All'interno, aggiungeremo i nostri collegamenti per la barra di navigazione. Nei nostri link, invece di un URL per navigare, abbiamo routerLink. Questo è il modo in cui navighiamo verso un percorso nell'interazione dell'utente. Qui siamo impostati per navigare verso la home route quando clicchiamo su questo pulsante.
Possiamo anche scrivere il routerLink in un'altra forma all'interno di un array. Normalmente lo facciamo quando abbiamo bisogno di fornire maggiori informazioni sul nostro percorso. Quindi abbiamo anche un routerLinkActive direttiva, che applicherà la classe di menu al collegamento quando il percorso è attivo. Lo stiamo usando per mostrare un indizio visivo su quale pagina siamo.
Quindi aggiungeremo un altro collegamento router che si sposta alla pagina Informazioni. Quindi aggiungeremo il router-outlet direttiva. Questo è il motivo per cui i componenti non hanno bisogno di un selettore. Quando vengono caricati sul routing, questa direttiva ospiterà i componenti. Mentre il resto di questo modello apparirà statico su ogni pagina, il router-outlet cambierà in base a quale rotta è navigato. Finalmente per questo file, aggiungiamo le direttive del router.
Dopodiché, l'ultima cosa che dobbiamo fare è aggiungere una regola CSS al file style.css file:
.menu background-color: white;
Questa regola è valida per la classe che verrà applicata quando il percorso collegato al collegamento router è attivo. Lo sfondo del link sarà il colore bianco. E ora, il routing è configurato per la nostra app.
Vai avanti e salva il progetto ed esegui inizio di npm nella cartella del progetto.
Se tutto è stato eseguito correttamente, l'app dovrebbe essere compilata e quindi avviata da un browser web.
Se si nota, lo sfondo del collegamento home è ombreggiato in bianco. Questo perché questa è la rotta attiva. Quindi se clicchiamo sul Di pulsante, dovremmo andare alla pagina Informazioni.
Dopodiché, digita una route inesistente nella barra degli indirizzi. Quando lo facciamo, dovremmo ottenere una pagina di errore.
Ora abbiamo il routing che funziona nella nostra app, ma c'è molto di più che possiamo fare con esso. Nel resto del corso, ti immergerai nel routing in modo molto più approfondito.
Nell'intero corso, Angular 2 Routing, ti insegnerò come utilizzare il nuovo router Angular 2 nelle tue app. Vedrai come configurare il routing di base alle pagine statiche, come estrarre i parametri dal percorso del percorso e come rendere modulare il tuo routing. Vedrai anche come il controllo dell'accesso degli utenti può essere implementato con il router Angular 2.
Accentsconagua