Settembre 2018
Volume 33 numero 9
Il presente articolo è stato tradotto automaticamente.
The Working Programmer - Come usare MEAN: Routing Angular
Dal Ted Neward | Settembre 2018
.jpg "Ted Neward")
Bentornato, MEANers.
Fino a questo punto, nonostante tutte che è stata eseguita, tutto ciò che è essenzialmente stato svolto interamente nell'ambito di una "pagina". Mentre in questo senso per alcune applicazioni a pagina singola (SPAs), gli utenti dell'App Web, anche le app Web più avanzate (o gli utenti più sofisticati) in genere seguono alcuni dei principi del Web, come l'accessibilità tramite un URL stabiliti. Vale a dire, è necessario essere in grado di "saltare" a determinate parti dell'applicazione è sufficiente immettere l'URL appropriato nel browser, o a un segnalibro una pagina, benché io sia su di esso e così via. La possibilità di passare "interni" l'applicazione è una delle caratteristiche che distingue l'app Web dall'app per dispositivi mobili o desktop, ed è un'importante funzionalità che devono essere supportate.
In un'applicazione Web meno recente e più tradizionale, questa operazione viene gestita da loro natura ASP.NET tradizionale (o servlet Java o Ruby-sul-Rails o PHP or...) dell'applicazione: Tutto ciò che è una pagina Web separata e distinta che ha fabbricato sul server e quindi inviata al client per il rendering. All'interno di un'applicazione a singola pagina, tuttavia, la maggior parte (se non tutti) del rendering viene eseguito interamente lato client e si solo tornare indietro al server quando i dati o si dispone di richiamare un comportamento che deve rimanere tucked nel server (ad esempio la modifica dei dati in un database condiviso o forse la chiamata di un servizio Web separato nascondere assente dietro il firewall per conto dell'utente).
Di conseguenza, entro la maggior parte dei framework di applicazione a singola pagina, quali Angular, è necessario per fornire il tipo di "ambito" o "segmentazione" che i limiti di pagina forniscono un meccanismo diverso. In sostanza, è necessario un tipo di strumento o un meccanismo per modificare "pagine" all'interno di SPA, essenzialmente la copia di qualsiasi componente attualmente visualizzati e sostituirli con un set diverso di componenti, in modo che all'utente, sembra che le pagine, è stato modificato ma senza la necessità di eseguire il round trip HTTP che lo spostamento in una nuova pagina in genere comporta. All'interno di Angular, tale meccanismo è denominato "routing" ed è responsabilità del Router di Angular. (E, ovviamente.)
Nozioni fondamentali di routing
Per comprendere meglio il funzionamento del routing, si supponga che uno stile master / dettaglio standard dell'applicazione: La prima pagina verrà visualizzato un elenco di elementi in cui è interessato (ad esempio altoparlanti a una conferenza) da una sorta di riepilogo (come base a cognome e nome). Quando un utente desidera "drill down" in una visualizzazione più dettagliata di un singolo elemento, selezionano sullo stesso elemento nell'elenco e verrà visualizzata una visualizzazione più dettagliata. In termini di Angular, questo significa che desidera disporre di due componenti perché funzionino con: un SpeakerListComponent, per visualizzare i relatori principali, nome e un SpeakerComponent, per visualizzare i dettagli completi di tale voce. Si tratta di caratteristiche di master-dettagli piuttosto standard, ed è ancora più importante, la base centrale delle aziende innumerevoli applicazioni di business. Naturalmente, presenti in altri modi di creazione di un'azienda dell'interfaccia utente (forse migliori), ma questa opzione serve a ottenere il punto di core in, è necessario capire come indirizzare dal SpeakerListComponent a un determinato SpeakerComponent e passare il relatore selezionato in Benché io sia analizzarlo.
Un punto naturale al routing è con l'insieme di route se stessi. Vengono in genere vuole che la home page dell'app in cui eseguire la vista "master" (l'elenco di relatori), si inizierà con quello. Esempio di routing è in genere un concetto a livello di applicazione, o almeno modulo-wide, in genere le route sono definite nel file TS, costruendo un oggetto route importato dal modulo "@angular/routing":
const appRoutes: Routes = [
{ path: 'speakers', component: SpeakerlistComponent }
];
Si noti che le route essenzialmente lo stesso aspetto come appaiono in altre tecnologie Web, ad esempio ASP.NET MVC o persino Ruby-sul-Rails. Le route non sono fondamentalmente, un mapping di un percorso URL (senza barra iniziale) di un componente che deve essere visualizzato. Pertanto, in questo caso particolare, quando un utente passa a "http://localhost:4200//relatori", verrà ripagati con l'elenco di relatori in occasione della conferenza.
Mai d'altronde, vuole che il percorso "/" per il reindirizzamento alla route "relatori", in modo che presto disponibili in "homepage" verrebbe reindirizzare automaticamente l'elenco di relatori, quindi, aggiungiamo questo SID:
const appRoutes: Routes = [
{ path: 'speakers', component: SpeakerlistComponent },
{ path: '', redirectTo: '/speakers', pathMatch: 'full' }
];
Naturalmente, l'altro aspetto che è spesso necessario è un tipo di pagina "Oops!" da visualizzare che se l'utente accede a un URL che non esiste nel sito, pertanto è necessario anche una route "carattere jolly" che verrà visualizzato il PageNotFoundComponent hai la centralizzazione della build nel estate :
const appRoutes: Routes = [
{ path: 'speakers', component: SpeakerlistComponent },
{ path: '', redirectTo: '/speakers', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
Si noti che la route con caratteri jolly davvero non presenta alcuna differenza, oltre il "*" percorso, che viene deliberatamente inserito alla fine della tabella di route. Infatti, per impostazione predefinita, le route vengono valutate dall'alto in basso, con la prima corrispondenza "vincente". Di conseguenza, se la route con caratteri jolly all'inizio, sarebbe sempre essere valorizzazione lavoro estate del centralizzazione, indipendentemente dal fatto che l'utente passato a una route corretta o non.
Infine, è necessario configurare una route per la visualizzazione di un utente specifico e il modo comune a tale scopo è concedere parlanti una pagina/route che utilizza una sorta di identificatore univoco associato, ad esempio, "/ relatore/1" per il relatore con ID 1. Configurazione di tale route avrà un aspetto familiare a chiunque disponga di alcun familiarità con ASP.NET MVC o Rails, anche in questo caso, perché consente di utilizzare un parametro con prefisso di due punti nome come segnaposto per il valore effettivo passato:
const appRoutes: Routes = [
{ path: 'speaker/:id', component: SpeakerComponent },
{ path: 'speakers', component: SpeakerlistComponent },
{ path: '', redirectTo: '/speakers', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
La domanda reale solo su tale argomento a sinistra è il modo in cui il SpeakerComponent Ottiene il parametro "id". Ecco un'interessante precisazione.
ActivatedRoutes
Quando il routing interviene e offre un componente sullo schermo, un oggetto ActivatedRoute contiene informazioni sulla route usata, tra cui i parametri alla route (ad esempio il ": id" usato in precedenza). Come la maggior parte delle operazioni in Angular, un ActivatedRoute è un oggetto da Iniettare, pertanto è possibile richiedere nel costruttore della finestra di SpeakerComponent sapere quali relatore da visualizzare, come illustrato nella figura 1.
Figura 1 si richiede un ActivatedRoute nel costruttore
@Component({
selector: 'app-speaker',
templateUrl: './speaker.component.html',
styleUrls: ['./speaker.component.css']
})
export class SpeakerComponent implements OnInit {
@Input() speaker : Speaker
constructor(private speakerService: SpeakerService,
private route: ActivatedRoute) {
}
ngOnInit() {
const speakerId = this.route.snapshot.params['id'];
this.speaker = this.speakerService.getSpeakerById(speakerId);
}
}
Il ActivatedRoute molto viene inserito in entità osservabile, che è un po' più desidera approfondire in questo caso, pertanto è sufficiente ma a dirsi che l'acquisizione di uno "snapshot" della route è il modo più semplice di entrare in possesso dei parametri passati. da qui porre per il parametro "id" e "1" in "/ relatore/1" viene restituito all'utente corrente per l'uso con il SpeakerService.
Il ActivatedRoute può funzionare tramite di un numero di parti diverse di URL, l'altro, nel caso in cui vi stavate chiedendo se è possibile eseguire il mapping della route da parti URL o frammenti o anche i parametri di query. La risposta breve è Sì, il ActivatedRoute è possibile accedere a qualsiasi parte dell'URL che è possibile impostare i parametri e la risposta lunga è, naturalmente, consultare la documentazione di Angular per tutti i dettagli. In effetti, le route effettivamente possano incorporare i dati arbitrari come parte della route e risolvere tali dati prima attivazione della route, ma che è un po' lontano afield di quello che ho spazio sufficiente per discutere in questa versione.
I collegamenti e gli Outlet router
Cosa manca ancora? Due parti: scegliere dove nell'interfaccia utente ottiene il router per eseguire il comando magic e il collegamento tra l'elenco principale e i componenti di dettaglio. Entrambi si verificano nel file di modello, anziché il codice TypeScript.
In primo luogo, la posizione più comune per il router venga visualizzato viene in genere nella radice dell'applicazione stessa. vale a dire, il componente dell'applicazione verrà in genere definiti in cui devono essere visualizzato vari componenti del router. In realtà, in genere il componente dell'applicazione avrà "spazio" del router precedute e seguito da un componente di intestazione sopra di esso, un componente di piè di pagina sotto di essa e così via. "Spazio" del router è definito dal tag "router-outlet" ed è quasi sempre vuoto, ovvero TestExecution è dove verranno visualizzati i componenti di routing, in modo che mio app.component.html avrà un aspetto simile al seguente:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<h2>Welcome to our conference</h2>
<router-outlet></router-outlet>
<h6>No speakers are actually going to appear, so...</h6>
Certamente, il sito Web di conferenza di operazioni eseguibili con una makeover, ma lo lascio che una finestra di progettazione di Web. Il punto chiave è che la coppia di tag "router-outlet" verrà sostituita dal SpeakerlistComponent o SpeakerComponent, a seconda di quale route viene usata.
L'altro aspetto che deve essere eseguito consiste nell'inserire i collegamenti in SpeakerlistComponent, in modo che gli utenti possono fare clic sul nome della persona che parla e passare alla pagina dei dettagli. Il modo più semplice per eseguire questa operazione è sufficiente fornire href standard problema tag di ancoraggio nel modello del SpeakerlistComponent, come illustrato di seguito:
<div>
<div *ngFor="let speaker of speakers">
<a href="/speaker/{{speaker.id}}">
{{speaker.firstName}} {{speaker.lastName}}</a>
</div>
</div>
E, abbiamo un'applicazione master-dettagli di base.
Conclusioni
È molto altro da scoprire sul routing, ovvero è un argomento molto più complesso essere completamente affrontato in questo caso. Ad esempio, è possibile anche specificare un parametro () "i dati statici arbitrari" quando che definisce l'insieme di route, che può quindi essere prelevato nell'oggetto route attivata, oppure è possibile definire quali Angular chiama una "resolve guard," che può essere utilizzata per eseguire determinati (elaborazione come recuperare i dati per il relatore selezionato) mentre l'interfaccia utente è ancora in costruzione. Come sempre, la documentazione di Angular include dettagli abbondanti per coloro che desiderano per altre informazioni.
Per il momento, tuttavia, abbiamo il nostro approccio master-dettagli utilizzo ed è il momento di Stati Uniti ai modi di parte per il mese. Nel prossimo episodio, parleremo come usare il supporto di Angular per test automatizzati per testare questo sucker. Nel frattempo, buona codifica!
Ted Newardè un consulente polytechnology basato su Seattle, relatore e mentore, attualmente lavora come direttore dell'ingegneria e Developer Relations in Smartsheet.com. Ha scritto una considerevole quantità di articoli, creati e una dozzina libri ed legge tutto il mondo. Contattarlo all'indirizzo ted@tedneward.com o il suo blog blogs.tedneward.com.
Un ringraziamento al seguente esperto tecnico: Garvice Eakins (Smartsheet.com)