Introduzione ad Angular 2

di , in HTML5,

Nell'ultimo decennio l'utilizzo di JavaScript nella creazione di applicazioni web ha subito una grandissima espansione. L'inizio di questo trend si è avuto quando nel 2005 Google ha reso famoso il componente XMLHttpRequest e ha coniato il pattern AJAX.
Si è passati quindi alla fase del web 2.0 che erprevedeva delle interfacce grafiche più fluide per l'utente grazie all'utilizzo massivo di JavaScript e di AJAX. Successivamente, la diffusione di HTML 5, CSS 3 ed EcmaScript 5 hanno reso le interfacce web ancora più fruibili per l'utente e più semplici da creare per lo sviluppatore. L'utilizzo di dosi così massicce di JavaScript ha portato in molti casi alla creazione di codice praticamente immanutenibile e di conseguenza si è sentita l'esigenza di creare framework per gestire le operazioni più comuni come l'accesso e la manipolazione del DOM, le chiamate AJAX, le animazioni e altro ancora così da ridurre le linee di codice JavaScript necesassarie. Tuttavia questi framework rientravano più nella categoria delle utilities che di veri e propri framework su cui basare le applicazioni. Per questo motivo nel tempo si è sentita la necessità di creare ulteriori framework che oltre a permettere le operazioni comuni, permettessero anche di introdurre nel mondo client anche concetti tipici del server come il binding e il templating e la navigazione. Tra questi framework i più rilevanti sono stati sicuramente KnockoutJS, AngularJS e Durandal.

AngularJS e Durandal in particolare sono stati i framework che sono andati per la maggiore e sono quelli che hanno permesso di sviluppare applicazioni che fanno uso massivo di JavaScript rimanendo però abbastanza pulite e manutenibili. Tuttavia, con l'uscita dei nuovi standard HTML e soprattutto di EcmaScript 6 (che porta con se un modo totalmente nuovo di sviluppare in JavaScript) questi framework hanno dimostrato una certa obsolescenza rendendo quindi necessaria una loro rivisitazione che ha portato nel caso di KnockoutJS al non andare avanti coprendo solo le funzionalità di templating e binding, mentre nel caso di AngularJS e Durandal a una completa riscrittura del codice.

In questo articlo ci occuperemo di Angular 2 che più che una versione successiva della versione 1.x è una vera e propria rivoluzione. Sebbene infatti alcuni concetti siano rimasti gli stessi, molti altri sono stati eliminati, aggiunti o modificati senza mantenere alcuna retrocompatibilità col passato.

Come cambia Angular 2

Con l'avvento di EcmaScript 6 il modo di sviluppare JavaScript cambia radicalmente, classi, proprietà, costruttori, esportazioni di classi e importazioni di classi da altri file sono tutte nozioni che non esistevano in JavaScript. Potevamo certo simularle con TypeScript (teniamolo a mente) ma erano pure sempre simulazioni volte a coprire il fatto che JavaScript di base non ha il concetto di classi. Adesso con EcmaScript 6 abbiamo a disposizione questi concetti nativamente e quindi il modo di creare applicazioni deve riflettere questi concetti.

Angular 2 attinge a piene mani dalle novità di EcmaScript 6, ma offre anche più possibilità in quanto permette di utilizzare anche TypeScript come linguaggio di sviluppo; ci penserà poi il compilatore TypeScript a convertire il codice in JavaScript nativo (nel corso dell'articolo useremo esclusivamente TypeScript).

Oltre al linguaggio, un'altra funzionalità di Angular 2 consiste nel basare tutto sl concetto di classe. In Angular 1.x esistono i moduli che sono dei raccoglitori di controller, direttive, servizi, factory e altro ancora. Tutte queste funzionalità erano delle funzioni che simulavano una classe. Questi concetti esistono ancora ma devono essere sfruttati creando classi e non simulandole come in passato.

L'architettura di Angular 2

Angular è composto da diversi componenti che messi insieme formano un'applicazione. In questa sezione vediamo quali sono questi componenti e quali ruoli ricoprano all'interno di Angular 2.

Come detto in precedenza, il componente principale di Angular (sia 1.x che 2) è il modulo. Un modulo non è altro che un contenitore di funzionalità che ha il compito di esporre queste funzionalità ad altri moduli. Questa suddivisione in moduli torna utile in quanto le applicazioni sono spesso suddivise in diverse aree (clienti, fornitori, fatture, spedizioni e così via) e quindi avere una suddivisione dei componenti di ogni area è una cosa consigliata. Tuttavia, non è obbligatorio creare moduli.

La prima cosa che andiamo a creare nella nostra applicazione sono i component. Un component è una classe che gestisce una view della nostra applicazione. Il component si preoccupa di recuperare i dati da renderizzare sulla view e gestisce interazione dell'utente con la view. Per chi ha conoscenze del pattern ModelViewViewModel, il component è l'equivalente del ViewModel.

Il secondo componente all'interno di Angular 2 è il Template. Un template è un frammento di HTML che renderizza i dati contenuti nel component che lo gestisce. Questi dati vengono renderizzati attraverso un'apposita sintassi di binding che è una peculiarità di Angular 2. Oltre a renderizzare i dati, il template è anche responsabile del collegamento tra gli eventi sulla UI è il loro gestore nel component. Tornando all'esempio del pattern MVVM, possiamo paragonare il template alla view.

Il terzo componente che utilizziamo in Angular 2 sono i metadati. I metadati sono il collegamento tra il component e il template. Poichè il component non è altro che una classe e il template non è altro che un frammento di HTML, i metadati sono il collante fra i due componenti cioè sono quello che Angular 2 utilizza per fare in modo che i componenti si parlino.

Il quarto componente di Angular 2 sono le direttive. Una direttiva permette di customizzare il codice HTML e come questo viene renderizzato sul browser. Ad esempio, possiamo creare dei tag HTML custom e poi fare in modo che una direttiva li trasformi in codice HTML che i browser possono interpretare. Ad esempio possiamo creare un tag per renderizzare una textbox e aprire un calendario quando la textbox prende il fuoco. Oppure possiamo definire degli attributi su tg esistenti per estenderne il funzionamento (ad esempio aggiungere stili, classi css e altro ancora). Angular 2 ha molte direttive già nel suo core e molte di queste sono le stesse esistenti già in Angular 1.x.

Il quinto e ultimo componente utilizzato in Angular 2 sono i servizi. Un servizio è una classe che svolge un compito ben preciso allìinterno dell'applicazione. Alcuni tipici esempi di servizio sono il logging, il recupero di dati dal server, la messagistica e così via.

Oltre a questi componenti c'è anche un'altra caratteristica nell'architettura di Angular che lo rende molto potente: la Dependency Injection. Ogni classe he creiamo può avere una dipendenza da un'altra classe. Angular 2 ha al suo interno un motore di dependency injection che si occupa di fornire queste dipendenze alla nostra classe sollevandoci dal compito di fornirle.

Ora che abbiamo visto quali sono principali componenti di un'applicazione Angular 2, vediamo come sfruttarli per creare una nostra applicazione.

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Introduzione ad Angular 2 1010 2
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti