Angular2 - Pipes e integrazione con librerie Javascript
Ormai da qualche mese mi sto "dilettando" con Angular2. Essendo un grandissimo fan (ed utilizzatore) di AngularJs, mi sembrava una naturale evoluzione; questo senza dimenticare che questa nuova reincarnazione del gioiellino di Google, chiude le porte con il passato, rivisitando completamente la maggior parte dei concetti e la sua infrastruttura in nome delle performance e dell'estendibilità.
Con questo post - giuro che questa volta cercherò di essere più breve del solito - non è mia intenzione fare una panoramica di Angular2; navigando in rete si possono facilmente trovare moltissimi articoli (molti dei quali veramente ben scritti) che fanno introduzioni dettagliate al framework, e imbastiscono in maniera esauriente il classico "Hello World, Angular2!".
Vorrei quindi condividere un paio di pensieri in merito ad una delle funzionalità che più sto apprezzando di NG2 e che - in qualche modo - ereditano da AngularJs prima versione: le Pipes, precedentemente note come "Filters".
Per illustrare questa funzionalità utilizzerò una situazione reale in cui mi sono trovato. Avevo un classico back-end realizzato con ASP.NET Web Api - ovviamente REST - e una serie di emissioni di strutture JSON; alcune di esse - come è normale - ritornavano date e orari nel classico formato stringa ISO (es. "2016-05-22T18:40:02.926Z", il default di Json.NET). L'esigenza era quella di renderizzare sulla UI tali componenti di data/ora, nel formato che meglio si adatta alla situazione.
Mi direte: "E qual'è il problema? Basta usare la pipe 'date' già presente nel "core" di Angular2, e tutto si risolve.". L'affermazione è vera solo in parte; questo perchè la pipe in "bundle" con NG2 (almeno per l'attuale versione RC1) non è in grado di gestire il formato ISO delle date che ho riportato poco sopra. Bisogna prima riconvertirlo in un oggetto "Date" Javascript (o TypeScript) e poi usarlo come binding per la UI per fare in modo che funzioni. Ma ovviamente questo vuol dire perdersi la possibilità di usare direttamente il modello proveniente dal server, scrivendo codice aggiuntivo per venire incontro all'inconveniente.
Ho deciso quindi di indirizzare la questione con una pipe custom, che sfrutta le potenzialità di MomentJs direttamente da TypeScript.
Per prima cosa - come potete vedere nel codice a seguire - dichiaro la variabile "moment", presente a livello globale perchè ho incluso nella mia pagina host il relativo file di MomentJs (direttamente il file ".js"); quindi dichiaro la Pipe custom (che con poca fantasia ho chiamato MomentDatePipe), che implementa PipeTransform. L'unico metodo richiesto per implementare l'interfaccia in questione è la dichiarazione di transform, che prende in input il valore di binding presente nel modello (nel mio caso una stringa con la data ISO), un "exponent" (che è solitamente un parametro passato alla pipe ed è facoltativo), e restituisce un valore (nel mio caso un'altra stringa con la formattazione di uscita).
Gli script aggiuntivi sono la dichiarazione del componente che farà uso della pipe (che riporta semplicisticamente la stringa data ISO sorgente), e il suo template HTML dove utilizzo in maniera dichiarativa la pipe appena realizzata, sfruttando l'alias riportato nel metadato di dichiarazione (=> @Pipe({ name: 'momentDate' })). Non dimentichiamoci di dichiarare l'uso della pipe nel componente: se non lo facciamo, il componente stesso non sarà in grado di trattare in maniera corretta l'alias dichiarato!
Con poche righe di codice, ho compensato una limitazione di Angular2; anche se sono abbastanza sicuro che con l'uscita della versione definitiva il team di sviluppo di NG2 avrà egli stesso provveduto a indirizzare la problematica in maniera più elegante.
Happy NG2!
M.
Con questo post - giuro che questa volta cercherò di essere più breve del solito - non è mia intenzione fare una panoramica di Angular2; navigando in rete si possono facilmente trovare moltissimi articoli (molti dei quali veramente ben scritti) che fanno introduzioni dettagliate al framework, e imbastiscono in maniera esauriente il classico "Hello World, Angular2!".
Vorrei quindi condividere un paio di pensieri in merito ad una delle funzionalità che più sto apprezzando di NG2 e che - in qualche modo - ereditano da AngularJs prima versione: le Pipes, precedentemente note come "Filters".
Per illustrare questa funzionalità utilizzerò una situazione reale in cui mi sono trovato. Avevo un classico back-end realizzato con ASP.NET Web Api - ovviamente REST - e una serie di emissioni di strutture JSON; alcune di esse - come è normale - ritornavano date e orari nel classico formato stringa ISO (es. "2016-05-22T18:40:02.926Z", il default di Json.NET). L'esigenza era quella di renderizzare sulla UI tali componenti di data/ora, nel formato che meglio si adatta alla situazione.
Mi direte: "E qual'è il problema? Basta usare la pipe 'date' già presente nel "core" di Angular2, e tutto si risolve.". L'affermazione è vera solo in parte; questo perchè la pipe in "bundle" con NG2 (almeno per l'attuale versione RC1) non è in grado di gestire il formato ISO delle date che ho riportato poco sopra. Bisogna prima riconvertirlo in un oggetto "Date" Javascript (o TypeScript) e poi usarlo come binding per la UI per fare in modo che funzioni. Ma ovviamente questo vuol dire perdersi la possibilità di usare direttamente il modello proveniente dal server, scrivendo codice aggiuntivo per venire incontro all'inconveniente.
Ho deciso quindi di indirizzare la questione con una pipe custom, che sfrutta le potenzialità di MomentJs direttamente da TypeScript.
Per prima cosa - come potete vedere nel codice a seguire - dichiaro la variabile "moment", presente a livello globale perchè ho incluso nella mia pagina host il relativo file di MomentJs (direttamente il file ".js"); quindi dichiaro la Pipe custom (che con poca fantasia ho chiamato MomentDatePipe), che implementa PipeTransform. L'unico metodo richiesto per implementare l'interfaccia in questione è la dichiarazione di transform, che prende in input il valore di binding presente nel modello (nel mio caso una stringa con la data ISO), un "exponent" (che è solitamente un parametro passato alla pipe ed è facoltativo), e restituisce un valore (nel mio caso un'altra stringa con la formattazione di uscita).
Gli script aggiuntivi sono la dichiarazione del componente che farà uso della pipe (che riporta semplicisticamente la stringa data ISO sorgente), e il suo template HTML dove utilizzo in maniera dichiarativa la pipe appena realizzata, sfruttando l'alias riportato nel metadato di dichiarazione (=> @Pipe({ name: 'momentDate' })). Non dimentichiamoci di dichiarare l'uso della pipe nel componente: se non lo facciamo, il componente stesso non sarà in grado di trattare in maniera corretta l'alias dichiarato!
Con poche righe di codice, ho compensato una limitazione di Angular2; anche se sono abbastanza sicuro che con l'uscita della versione definitiva il team di sviluppo di NG2 avrà egli stesso provveduto a indirizzare la problematica in maniera più elegante.
Happy NG2!
M.
Commenti
Posta un commento