Una delle principali novità di Angular 2 è la possibilità di scrivere le applicazioni in uno dei tre possibili linguaggi: JavaScript (sia ES5 che ES6/ECMAScript 2015), TypeScript e Dart. La scelta è lasciata al singolo sviluppatore, ma è consigliato adottare TypeScript come linguaggio di sviluppo per diverse ragioni:
- è compatibile con JavaScript, dal momento che si tratta di un suo superset;
- supporta le novità di ECMAScript 2015;
- ha in genere una sintassi più compatta rispetto al classico JavaScript;
- ha un controllo statico dei tipi di dato;
- la maggior parte degli esempi sulla documentazione ufficiale è fornita in questo linguaggio.
Lo stesso Angular 2 è scritto in TypeScript, ad indicare che il team di sviluppo riconosce dei vantaggi significativi nell'utilizzare questo linguaggio rispetto all'utilizzo diretto di JavaScript. In questa guida utilizzeremo anche noi TypeScript come linguaggio di riferimento per Angular. Per un'introduzione al linguaggio è possibile consultare la guida di HTML.it.
Dal momento che utilizziamo TypeScript, abbiamo la necessità di compilare il codice in puro JavaScript perché possa essere correttamente interpretato dagli engine del linguaggio. La fase di compilazione si rende necessaria anche se utilizziamo semplicemente JavaScript arricchito dalle novità di ECMAScript 2015. Salvo specifica configurazione, la fase di compilazione, infatti, genera codice JavaScript standard in versione ES5 e garantisce compatibilità con i browser meno recenti.
Oltre a questo aspetto, per applicazioni di una certa complessità è opportuno utilizzare un loader che consenta il caricamento dinamico dei moduli in base alla navigazione dell'utente e al flusso di elaborazione dell'applicazione. Questo consente di ridurre il tempo di caricamento dell'applicazione e di ottimizzare le risorse disponibili.
Attualmente i due loader più utilizzati sono:
In linea di massima la scelta tra l'uno e l'altro sistema è una questione di preferenze, anche se webpack è in grado di fare molto più del loading di moduli e sta diventando uno standard de facto.
La combinazione di questi ed altri elementi rappresenta l'ambiente di sviluppo per le nostre applicazioni Angular 2.
Angular CLI
Come possiamo intuire, la creazione di un ambiente di sviluppo prevede la definizione di diversi aspetti e la configurazione ed integrazione di pacchetti software che potrebbero cambiare nel tempo o che potremmo sostituire con altri equivalenti. Naturalmente potremmo configurare tutto manualmente, ma richiederebbe una certa conoscenza dei singoli pacchetti e del modo di farli cooperare. In ogni caso sarebbe un'attività collaterale alla programmazione in senso stretto.
Per semplificare l'attività di setup dell'ambiente di sviluppo, il team di Angular ha sviluppato Angular CLI, un ambiente a riga di comando per creare la struttura di un'applicazione Angular 2 già configurata secondo le linee guida ufficiali. Angular CLI è basato su nodejs e possiamo installarlo eseguendo il seguente comando:
npm install -g angular-cliUna volta installato l'ambiente a riga di comando, possiamo creare una nuova applicazione Angular 2 scrivendo semplicemente:
ng new myAppQuesto comando creerà una cartella myApp all'interno della cartella corrente con la seguente struttura:
Nella cartella myApp troviamo i file di configurazione fondamentali, ne elenchiamo alcuni.
| File | Descrizione |
|---|---|
| package.json | Contiene i riferimenti alle dipendenze del progetto, incluso il riferimento alle librerie di Angular 2 |
| tslint.json | Contiene la configurazione di TSLint, un code checker per TypeScript |
| angular-cli.json | Contiene la configurazione del progetto Angular dal punto di vista di Angular CLI |
| karma.conf.js | File di configurazione di Karma, il test runner di Angular |
| protractor.conf.js | File di configurazione di Protractor, il framework di test end-to-end di Angular |
Nelle varie sottocartelle di myApp sono contenuti gli elementi che compongono il nostro progetto. In particolare:
| Elemento | Descrizione |
|---|---|
| e2e | Questa cartella contiene i test end to end di Protractor |
| node_modules | Contiene i moduli nodejs necessari per il setup e l'esecuzione dell'applicazione, inclusi i pacchetti di Angular |
| src | In questa cartella è contenuto il codice sorgente ell'applicazione; Angular CLI inserisce una pagina iniziale che analizzeremo più avanti |
Angular CLI effettua il setup di un progetto Angular tenendo in considerazione i diversi aspetti dell'attività di sviluppo, non soltanto la compilazione e la creazione di una pagina di avvio. Inoltre ci consente di avere un'anteprima della nostra applicazione e di visualizzarla in un browser. Già con l'ambiente iniziale generato da Angular CLI abbiamo modo di rendercene conto: è sufficiente impartire il seguente comando all'interno della cartella del nostro progetto:
ng serveSarà lanciato un web server che consentirà l'accesso alla nostra applicazione all'indirizzo http://localhost:4200. Puntando un browser a questo indirizzo potremo vedere la seguente pagina:
Oltre alla visualizzazione in anteprima della nostra applicazione, abbiamo già a disposizione il cosiddetto live reloading, cioè la compilazione ed il caricamento automatico dell'applicazione in seguito a modifiche ai file sorgenti.
Ma l'utilità di Angular CLI non si ferma con il setup dell'ambiente di sviluppo. Esso può dare una mano anche nella generazione di porzioni di codice, come avremo modo di vedere più avanti.