Una guida completa al routing in angolare

Nel caso in cui non hai ancora familiarità con Angular 7, vorrei avvicinarti a tutto ciò che questo impressionante framework front-end ha da offrire. Ti guiderò attraverso un'app demo Angular che mostra diversi concetti relativi al router, come ad esempio:

• La presa del router,
• Percorsi e percorsi,
• Navigazione.

Ti mostrerò anche come utilizzare Angular CLI v7 per generare un progetto demo in cui utilizzeremo il router Angular per implementare il routing e la navigazione. Ma prima, permettetemi di presentarvi Angular e di esaminare alcune delle nuove importanti funzionalità nella sua ultima versione.

Presentazione di Angular 7

Angular è uno dei framework front-end più popolari per la creazione di applicazioni Web lato client per il Web mobile e desktop. Segue un'architettura basata su componenti in cui ogni componente è una parte di codice isolata e riutilizzabile che controlla una parte dell'interfaccia utente dell'app.

Un componente in Angular è una classe TypeScript decorata con il decoratore @Component . Ha un modello allegato e fogli di stile CSS che formano la vista del componente.

Angular 7, l'ultima versione di Angular è stata recentemente rilasciata con nuove funzionalità in particolare negli strumenti e nelle prestazioni della CLI, come:

• Prompt della CLI: un comando comune come ng add e ng new può ora richiedere all'utente di scegliere le funzionalità da aggiungere a un progetto come il formato del routing e dei fogli di stile, ecc.
  
• Aggiunta dello scorrimento a Angular Material CDK (Component DevKit).
• Aggiunta del supporto per il trascinamento della selezione ad Angular Material CDK.
• Inoltre, per impostazione predefinita, i progetti utilizzano i pacchetti di budget che avviseranno gli sviluppatori quando le loro app stanno superando i limiti di dimensione. Per impostazione predefinita, gli avvisi vengono generati quando la dimensione ha più di 2 MB e gli errori a 5 MB. Puoi anche modificare questi limiti nel tuo file angular.json . eccetera.
  

Presentazione del router angolare

Angular Router è un potente router JavaScript creato e gestito dal core team di Angular che può essere installato dal pacchetto @angular/router . Fornisce una libreria di instradamento completa con la possibilità di avere più punti di uscita del router, diverse strategie di abbinamento dei percorsi, un facile accesso ai parametri di instradamento e protezioni di instradamento per proteggere i componenti da accessi non autorizzati.

Il router Angular è una parte fondamentale della piattaforma Angular. Consente agli sviluppatori di creare applicazioni a pagina singola con più visualizzazioni e consentire la navigazione tra queste visualizzazioni.

Vediamo ora i concetti essenziali del Router in modo più dettagliato.

Il Router-Outlet

Router-Outlet è una direttiva disponibile dalla libreria del router in cui il router inserisce il componente che viene abbinato in base all'URL del browser corrente. Puoi aggiungere più punti vendita nella tua applicazione Angular che ti consente di implementare scenari di routing avanzati.

 <router-outlet></router-outlet>

Qualsiasi componente che viene abbinato dal router lo renderà come un fratello della presa del router.

Percorsi E Percorsi

Le rotte sono definizioni (oggetti) composte da almeno un percorso e un componente (o un percorso redirectTo). Il percorso fa riferimento alla parte dell'URL che determina una vista univoca da visualizzare e il componente fa riferimento al componente angolare che deve essere associato a un percorso. Sulla base di una definizione di percorso che forniamo (tramite un metodo RouterModule.forRoot(routes) statico), il router è in grado di portare l'utente a una vista specifica.

Ciascun Route associa un path URL a un componente.

Il percorso può essere vuoto, il che denota il percorso predefinito di un'applicazione e di solito è l'inizio dell'applicazione.

Il percorso può accettare una stringa di caratteri jolly ( ** ). Il router selezionerà questo percorso se l'URL richiesto non corrisponde ad alcun percorso per i percorsi definiti. Questo può essere utilizzato per visualizzare una vista "Non trovato" o reindirizzare a una vista specifica se non viene trovata alcuna corrispondenza.

Questo è un esempio di percorso:

 { path: 'contacts', component: ContactListComponent}

Se questa definizione di percorso viene fornita alla configurazione del router, il router visualizzerà ContactListComponent quando l'URL del browser per l'applicazione Web diventa /contacts .

Strategie di corrispondenza dei percorsi

Angular Router fornisce diverse strategie di abbinamento dei percorsi. La strategia predefinita consiste semplicemente nel controllare se l'URL del browser corrente è preceduto dal percorso .

Ad esempio il nostro percorso precedente:

 { path: 'contacts', component: ContactListComponent}

Potrebbe anche essere scritto come:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

L'attributo patchMath specifica la strategia di corrispondenza. In questo caso, è il prefisso che è l'impostazione predefinita.

La seconda strategia di abbinamento è completa . Quando viene specificato per un percorso, il router verificherà se il percorso è esattamente uguale al percorso dell'URL del browser corrente:

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

Parametri di percorso

La creazione di percorsi con parametri è una funzionalità comune nelle app Web. Angular Router consente di accedere ai parametri in diversi modi:

• Utilizzando il servizio ActivatedRoute,
• Utilizzando l'osservabile ParamMap disponibile a partire dalla v4.

È possibile creare un parametro di percorso utilizzando la sintassi dei due punti. Questo è un esempio di percorso con un parametro id :

 { path: 'contacts/:id', component: ContactDetailComponent}

Guardie di rotta

Una route guard è una funzionalità di Angular Router che consente agli sviluppatori di eseguire una logica quando viene richiesto un percorso e, in base a tale logica, consente o nega all'utente l'accesso al percorso. Viene comunemente utilizzato per verificare se un utente ha effettuato l'accesso e dispone dell'autorizzazione prima di poter accedere a una pagina.

Puoi aggiungere una route guard implementando l'interfaccia CanActivate disponibile dal pacchetto @angular/router ed estende il metodo canActivate() che contiene la logica per consentire o negare l'accesso al percorso. Ad esempio, la guardia seguente consentirà sempre l'accesso a un percorso:

 class MyGuard implements CanActivate { canActivate() { return true; } }

È quindi possibile proteggere un percorso con la guardia utilizzando l'attributo canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

Direttiva sulla navigazione

Angular Router fornisce la direttiva routerLink per creare collegamenti di navigazione. Questa direttiva prende il percorso associato al componente in cui navigare. Per esempio:

 <a [routerLink]="'/contacts'">Contacts</a>

Molteplici uscite e percorsi ausiliari

Angular Router supporta più prese nella stessa applicazione.

Un componente ha un percorso principale associato e può avere percorsi ausiliari. Percorsi ausiliari consentono agli sviluppatori di navigare più percorsi contemporaneamente.

Per creare un percorso ausiliario, avrai bisogno di una presa del router denominata in cui verrà visualizzato il componente associato al percorso ausiliario.

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• L'outlet senza nome è l'outlet principale.
• Tutti i punti vendita dovrebbero avere un nome ad eccezione del punto vendita principale.

È quindi possibile specificare l'outlet in cui si desidera eseguire il rendering del componente utilizzando l'attributo outlet:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

Creazione di un progetto demo di Angular 7

In questa sezione vedremo un esempio pratico di come configurare e lavorare con Angular Router. Puoi vedere la demo dal vivo che creeremo e il repository GitHub per il progetto.

Installazione di Angular CLI v7

Angular CLI richiede Node 8.9+ , con NPM 5.5.1+ . È necessario assicurarsi di aver installato questi requisiti sul sistema, quindi eseguire il comando seguente per installare l'ultima versione di Angular CLI:

 $ npm install -g @angular/cli

Questo installerà la CLI angolare a livello globale.

Nota : potresti voler utilizzare sudo per installare i pacchetti a livello globale, a seconda della configurazione di npm.

Creazione di un progetto angolare 7

La creazione di un nuovo progetto è a un comando di distanza, devi semplicemente eseguire il comando seguente:

 $ ng new angular7-router-demo

La CLI ti chiederà se desideri aggiungere il routing (digita N per No perché vedremo come aggiungere il routing manualmente) e quale formato del foglio di stile desideri utilizzare, scegli CSS, la prima opzione quindi premi Enter . La CLI creerà una struttura di cartelle con i file necessari e installerà le dipendenze richieste del progetto.

Creazione di un falso servizio di back-end

Dal momento che non disponiamo di un vero back-end con cui interagire, creeremo un falso back-end utilizzando la libreria angular-in-memory-web-api che è un'API Web in memoria per demo e test Angular che emula le operazioni CRUD su un'API REST.

Funziona intercettando le richieste HttpClient inviate al server remoto e le reindirizza a un datastore locale in memoria che dobbiamo creare.

Per creare un falso back-end, dobbiamo seguire i seguenti passaggi:

1. Innanzitutto, installiamo il modulo angular-in-memory-web-api ,
2. Successivamente, creiamo un servizio che restituisce dati falsi,
3. Infine, configura l'applicazione per utilizzare il falso back-end.

Nel tuo terminale esegui il seguente comando per installare il modulo angular angular-in-memory-web-api da npm:

 $ npm install --save angular-in-memory-web-api

Quindi, genera un servizio di back-end utilizzando:

 $ ng gs backend

Apri il file src/app/backend.service.ts e importa InMemoryDbService dal modulo angular angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

La classe di servizio deve implementare InMemoryDbService e quindi sovrascrivere il metodo createDb() :

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

Creiamo semplicemente una serie di contatti e li restituiamo. Ogni contatto dovrebbe avere un ID.

Infine, dobbiamo semplicemente importare InMemoryWebApiModule nel file app.module.ts e fornire il nostro falso servizio di back-end.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Quindi crea un ContactService che incapsula il codice per lavorare con i contatti:

 $ ng gs contact

Apri il file src/app/contact.service.ts e aggiornalo in modo che sia simile al codice seguente:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

Abbiamo aggiunto due metodi:

• getContacts()
  Per ottenere tutti i contatti.
• getContact()
  Per ottenere un contatto tramite id.

Puoi impostare API_URL su qualsiasi URL poiché non utilizzeremo un vero back-end. Tutte le richieste verranno intercettate e inviate al back-end in memoria.

Creazione dei nostri componenti angolari

Prima di poter vedere come utilizzare le diverse funzionalità del router, creiamo prima un gruppo di componenti nel nostro progetto.

Vai al tuo terminale ed esegui i seguenti comandi:

 $ ng gc contact-list $ ng gc contact-detail

Questo genererà due componenti ContactListComponent e ContactDetailComponent e li aggiungerà al modulo dell'app principale.

Impostazione dell'instradamento

Nella maggior parte dei casi, utilizzerai Angular CLI per creare progetti con l'impostazione del routing, ma in questo caso lo aggiungeremo manualmente in modo da poter avere un'idea migliore di come funziona il routing in Angular.

Aggiunta del modulo di instradamento

Dobbiamo aggiungere AppRoutingModule che conterrà i nostri percorsi applicativi e una presa del router in cui Angular inserirà il componente attualmente abbinato a seconda dell'URL corrente del browser.

Vedremo:

• Come creare un modulo angolare per il routing e importarlo;
• Come aggiungere percorsi a diversi componenti;
• Come aggiungere la presa del router.

Innanzitutto, iniziamo creando un modulo di routing in un file app-routing.module.ts . All'interno di src/app crea il file usando:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

Apri il file e aggiungi il seguente codice:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Iniziamo importando NgModule dal pacchetto @angular/core che è un decoratore TypeScript utilizzato per creare un modulo Angular.

Importiamo anche le classi RouterModule e Routes dal pacchetto @angular/router . RouterModule fornisce metodi statici come RouterModule.forRoot() per passare un oggetto di configurazione al router.

Successivamente, definiamo un array di routes costanti di tipo Routes che verrà utilizzato per contenere le informazioni per ogni percorso.

Infine, creiamo ed esportiamo un modulo chiamato AppRoutingModule (puoi chiamarlo come vuoi) che è semplicemente una classe TypeScript decorata con il decoratore @NgModule che prende alcuni oggetti di meta informazioni. Nell'attributo imports di questo oggetto, chiamiamo il metodo statico RouterModule.forRoot(routes) con l'array di route come parametro. Nell'array exports aggiungiamo RouterModule .

Importazione del modulo di instradamento

Successivamente, dobbiamo importare questo modulo di routing nel modulo dell'app principale che risiede nel file src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Importiamo AppRoutingModule da ./app-routing.module e lo aggiungiamo nell'array imports del modulo principale.

Aggiunta della presa del router

Infine, dobbiamo aggiungere la presa del router. Apri il file src/app/app.component.html che contiene il modello di app principale e aggiungi il componente <router-outlet> :

 <router-outlet></router-outlet>

Qui è dove Angular Router renderà il componente che corrisponde al percorso del browser corrente.

Questi sono tutti i passaggi che dobbiamo seguire per impostare manualmente il routing all'interno di un progetto Angular.

Creazione di percorsi

Ora aggiungiamo percorsi ai nostri due componenti. Apri il file src/app/app-routing.module.ts e aggiungi i seguenti routes all'array di percorsi:

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

Assicurati di importare i due componenti nel modulo di routing:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

Ora possiamo accedere ai due componenti dai percorsi /contacts e contact/:id .

Aggiunta di collegamenti di navigazione

Quindi aggiungiamo i collegamenti di navigazione al nostro modello di app utilizzando la direttiva routerLink . Apri src/app/app.component.html e aggiungi il seguente codice sopra la presa del router:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

Successivamente abbiamo bisogno di visualizzare l'elenco dei contatti in ContactListComponent . Apri src/app/contact-list.component.ts quindi aggiungi il seguente codice:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

Creiamo un array di contacts per mantenere i contatti. Successivamente, iniettiamo ContactService e chiamiamo il metodo getContacts() dell'istanza (sull'evento del ciclo di vita ngOnInit ) per ottenere i contatti e assegnarli all'array dei contacts .

Quindi apri il file src/app/contact-list/contact-list.component.html e aggiungi:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

Scorriamo i contatti e visualizziamo il nome e l'e-mail di ciascun contatto. Creiamo anche un collegamento al componente dei dettagli di ciascun contatto utilizzando la direttiva routerLink .

Questa è una schermata del componente:

Quando facciamo clic sul collegamento Vai ai dettagli , ci porterà a ContactDetailsComponent . Il percorso ha un parametro id , vediamo come possiamo accedervi dal nostro componente.

Aprire il file src/app/contact-detail/contact-detail.component.ts e modificare il codice in modo che assomigli al codice seguente:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

Iniettiamo ContactService e ActivatedRoute nel componente. Nell'evento del ciclo di vita ngOnInit() recuperiamo il parametro id che verrà passato dal percorso e lo utilizziamo per ottenere i dettagli del contatto che assegniamo a un oggetto contact .

Apri il file src/app/contact-detail/contact-detail.component.html e aggiungi:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

Quando visitiamo per la prima volta la nostra applicazione da 127.0.0.1:4200/ , l'outlet non esegue il rendering di alcun componente, quindi reindirizziamo il percorso vuoto al percorso dei contacts aggiungendo il seguente percorso all'array di percorsi:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

Vogliamo abbinare l'esatto percorso vuoto, ecco perché specifichiamo la strategia di corrispondenza completa .

Conclusione

In questo tutorial, abbiamo visto come utilizzare Angular Router per aggiungere routing e navigazione nella nostra applicazione. Abbiamo visto concetti diversi come presa del router, percorsi e percorsi e abbiamo creato una demo per mostrare praticamente i diversi concetti. Puoi accedere al codice da questo repository.