Come iniziare un progetto Angular 5 da zero

Angular si pone ormai come framework leader per lo sviluppo di applicazioni web. La sua evoluzione è stata molto intensa nel corso degli anni e Google ha investito molte risorse per renderlo sempre più solido, performante ed estensibile, aumentando esponenzialmente il bacino di utenti. Tuttavia se da una parte presenta innumerevoli vantaggi, il suo utilizzo e la sua configurazione non sono sicuramente operazioni banali. La pressochè totale libertà offerta nell’organizzare un progetto angular se da un lato è un aspetto molto positivo, dall’altro pone in grosse difficoltà chiunque debba iniziarne uno da zero. A meno che non si tratti di un progetto autoformativo o di esperimenti, per realizzare un’applicazione web in tempi rapidi ed avere allo stesso tempo una struttura solida è molto sconsigliato partire da zero.

In questo articolo verranno trattati i cosiddetti seed di AngularJS, ovvero progetti sviluppati da terzi che forniscono una base di partenza dalla quale iniziare il proprio progetto. Tutti i progetti elencati sono completamente open-source e la loro installazione richiede pochi semplici passi.

Questo progetto è disponibile su github, è costantemente aggiornato, conta di una community molto ampia ed include sempre le ultime versioni di Angular. Allo stato attuale, tra le diverse caratteristiche offre:

• Uno scheletro base di applicazione Angular5, con file e cartelle organizzati secondo le best practice
• Sistema di compilazione webpack già pronto all’uso e con supporto completo a Typescript
• Ambiente di test per Angular con Jasmine e Karma
• Ambiente di test end-to-end con Protractor

L’installazione richiede pochi semplici passi ed alcune dipendenze. È necessario aver installato sul proprio sistema una versione di Node.js superiore alla 6.0.0 e di npm superiore alla 3.0.0. Questo articolo fornisce una guida base su come installare e rendere operativo Node.js. È necessario inoltre installare tramite npm alcuni pacchetti Node.js globali, che quindi lavorano a livello di sistema:

Posizionarsi dunque su una cartella e clonare l’ultima versione del progetto:

Installare tutte le dipendenze locali sempre tramite npm:

A questo punto l’installazione è stata completata e l’applicazione è pronta per essere utilizzata. Angular Starter mette a disposizione già due ambienti: development e production, che si differenziano per il valore di alcune variabili sia legate ad Angular stesso che legate all’applicazione. Il comando

fa partire una procedura che compila l’applicazione e la pubblica sull’indirizzo locale http://0.0.0.0:3000. Accedendovi tramite un browser sarà dunque possibile vedere la propria applicazione in funzione. Inoltre il programma resta in ascolto dei cambiamenti sui file, per cui ad ogni modifica di file typescript, javascript, sass o html viene rieseguita ogni volta l’intera compilazione del progetto, tramite webpack, e la pagina viene aggiornata automaticamente dal browser tramite websocket. In un solo comando sono dunque presenti moltissime operazioni che se effettuate manualmente richiedono una considerevole quantità di tempo. Questo permette allo sviluppatore di focalizzarsi esclusivamente sul codice e lasciare da parte le preoccupazioni relative alla compilazione e al deploy del progetto, operazioni di per sè complesse. È comunque possibile compilare l’applicazione in qualsiasi momento tramite il comando:

oppure:

rispettivamente per gli ambienti di sviluppo e produzione.

Angular Starter è solo uno dei numerosi seed con il quale iniziare a sviluppare un progetto angular da zero. La scelta ovviamente spetta al singolo utilizzatore e varia in base alle necessità, non escludendo comunque la possibilità di creare il proprio seed e magari di renderlo pubblico. Tuttavia è fortemente consigliato per chi voglia sviluppare un progetto angular in tempi molto rapidi e senza dover scrivere codice che altre persone hanno scritto in precedenza e che può essere riutilizzato. Questo principio sta alla base della programmazione ed in particolare è molto importante su Angular, soprattutto in virtù del fatto che si tratta di un framework molto complesso, che offre moltissime possibilità ma che allo stesso tempo dev’essere gestito con attenzione. Con questo progetto l’attenzione si focalizza più sul codice dell’applicazione e molto meno sulla struttura o sulle procedure, rendendo lo sviluppo decisamente più semplice.