Utilizzare il nuovo Router di Angular2 (versione RC)
Nel precedente post (link) ho mostrato come integrare un componente JavaScript (per esempio MomentJs) con l'ecosistema TypeScript di Angular2. Questo approccio potrebbe essere molto utile nel primo periodo di utilizzo di questo framework, vista la momentanea scarsità di plugin nativi rispetto la controparte di AngularJs (prima versione).
Benché il funzionamento di NG2 sia molto diverso da AngularJs, molti concetti sono stati ripresi e opportunamente riveduti. Inoltre, se avete avuto esperienze di utilizzo di DurandalJs - altro fantastico framework JavaScript - noterete certamente alcuni aspetti che da esso sono stati acquisiti: l'ideatore di DurandalJs, Rob Eisenberg, ha lavorato fianco a fianco con il team di Angular2 per il primo anno di incubazione del progetto, per poi lasciare a causa di divergenza di opinioni. Ma la sua presenza ha fatto si che il nuovo sistema prendesse il meglio dei due mondi che fino a quel momento dominavano la scena per le Single Page Application.
Tra tutte queste novità, è naturale che anche il modulo Router abbia subito una radicale riscrittura, portando con sé numerose novità, e sopratutto continui aggiornamenti che si sono presentati fino alla Release Candidate di Angular2 (N.d.R. in questo momento siamo alla RC1). È così che con l'uscita dalla "fase beta" e l'inizio della fase "release candidate", il team di sviluppo di Angular ha scelto di marcare come "deprecated" (=obsoleto) l'implementazione del router presente fino a quel momento, a favore di una versione migliorata, non così profondamente differente.
Il problema più grosso di questa nuova implementazione non è tanto la diversità di funzionamento, ma quanto la difficoltà di reperire documentazione a riguardo su come riadattare il codice scritto in precedenza con questa nuova versione. Con un po' di fatica - e molto "googling" - le informazioni si trovano, ma la cosa richiede tempo: per questo motivo ho deciso di scrivere questo post, come mio personale "memento" e sperando di risparmiare a qualche collega del tempo prezioso.
Come dicevo, l'approccio è molto simile. Basta innanzi tutto rimuovere i riferimenti a @angular/router-deprecated - che i ragazzi di Angular hanno comunque lasciato disponibile nelle ultime release del framework - e referenziare il nuovo @angular/router.
A seguire riporto il codice ("quasi" completo) di una minuscola applicazione di tre pagine: una home, una pagina secondaria, e una di dettaglio che prende un parametro dalla querystring: spero apprezziate il mio sforzo nello "spirito meno parole e più codice" ;) .
Le differenze sono quasi impercettibili, come potrete notare già da "app.component.ts":
Conseguenza delle modifiche di cui sopra, la direttiva per la costruzione dei percorsi (mi riferisco a routerLink) utilizza direttamente il path di navigazione, compresivo di eventuali parametri (molto più intuitivo, no?).
In ultimo, cambia radicalmente il modo di intercettare i parametri di route nel componente che ne fa uso (nel nostro esempio in "detail.component.ts"). Sarà necessario implementare l'interfaccia OnActivate (o "CanActivate" o "CanDeactivate") e utilizzare le funzionalità di RouteSegment.
L'impronta data dal team di Angular2 al nuovo framework mostra senza dubbio una visione molto ampia. C'è la sensazione che questo gioiellino, dopo un normale periodo di rodaggio, darà delle soddisfazioni e permetterà veramente di abbracciare lo sviluppo web senza piegarsi troppo ad una serie di compromessi che - fino a questo momento - abbiamo dovuto forzatamente accettare. Ora attendiamo l'uscita della versione ufficiale e definitiva...e partiamo!
M.
Benché il funzionamento di NG2 sia molto diverso da AngularJs, molti concetti sono stati ripresi e opportunamente riveduti. Inoltre, se avete avuto esperienze di utilizzo di DurandalJs - altro fantastico framework JavaScript - noterete certamente alcuni aspetti che da esso sono stati acquisiti: l'ideatore di DurandalJs, Rob Eisenberg, ha lavorato fianco a fianco con il team di Angular2 per il primo anno di incubazione del progetto, per poi lasciare a causa di divergenza di opinioni. Ma la sua presenza ha fatto si che il nuovo sistema prendesse il meglio dei due mondi che fino a quel momento dominavano la scena per le Single Page Application.
Tra tutte queste novità, è naturale che anche il modulo Router abbia subito una radicale riscrittura, portando con sé numerose novità, e sopratutto continui aggiornamenti che si sono presentati fino alla Release Candidate di Angular2 (N.d.R. in questo momento siamo alla RC1). È così che con l'uscita dalla "fase beta" e l'inizio della fase "release candidate", il team di sviluppo di Angular ha scelto di marcare come "deprecated" (=obsoleto) l'implementazione del router presente fino a quel momento, a favore di una versione migliorata, non così profondamente differente.
Il problema più grosso di questa nuova implementazione non è tanto la diversità di funzionamento, ma quanto la difficoltà di reperire documentazione a riguardo su come riadattare il codice scritto in precedenza con questa nuova versione. Con un po' di fatica - e molto "googling" - le informazioni si trovano, ma la cosa richiede tempo: per questo motivo ho deciso di scrivere questo post, come mio personale "memento" e sperando di risparmiare a qualche collega del tempo prezioso.
Come dicevo, l'approccio è molto simile. Basta innanzi tutto rimuovere i riferimenti a @angular/router-deprecated - che i ragazzi di Angular hanno comunque lasciato disponibile nelle ultime release del framework - e referenziare il nuovo @angular/router.
A seguire riporto il codice ("quasi" completo) di una minuscola applicazione di tre pagine: una home, una pagina secondaria, e una di dettaglio che prende un parametro dalla querystring: spero apprezziate il mio sforzo nello "spirito meno parole e più codice" ;) .
Le differenze sono quasi impercettibili, come potrete notare già da "app.component.ts":
- il vecchio "RouteConfig" usato per definire i percorsi di navigazione è diventato "Routes"
- la route di default è sempre "/", visto che è stata rimossa la proprietà "useAsDefault"
- è stata rimossa anche la proprietà "name" a favore dell'utilizzo del "path" (personalmente non l'ho mai capita la scelta di utilizzare "name" per riferirsi ad una particolare route)
Conseguenza delle modifiche di cui sopra, la direttiva per la costruzione dei percorsi (mi riferisco a routerLink) utilizza direttamente il path di navigazione, compresivo di eventuali parametri (molto più intuitivo, no?).
In ultimo, cambia radicalmente il modo di intercettare i parametri di route nel componente che ne fa uso (nel nostro esempio in "detail.component.ts"). Sarà necessario implementare l'interfaccia OnActivate (o "CanActivate" o "CanDeactivate") e utilizzare le funzionalità di RouteSegment.
L'impronta data dal team di Angular2 al nuovo framework mostra senza dubbio una visione molto ampia. C'è la sensazione che questo gioiellino, dopo un normale periodo di rodaggio, darà delle soddisfazioni e permetterà veramente di abbracciare lo sviluppo web senza piegarsi troppo ad una serie di compromessi che - fino a questo momento - abbiamo dovuto forzatamente accettare. Ora attendiamo l'uscita della versione ufficiale e definitiva...e partiamo!
M.
Commenti
Posta un commento