Cos’è Angular?

Angular è un framework made in Google, che permette la creazione e lo sviluppo di Single Page Application. Una buona configurazione del framework ci permette di risparmiare tempo durante lo sviluppo e conoscere meglio ciò che stiamo usando. Scopriamo insieme come farlo utilizzando Angular 5.

Configurazione dell’ambiente

Prima di partire, abbiamo la necessità di configurare il nostro ambiente. Per farlo dobbiamo usare un package manager. In questa guida utilizzeremo npm.
Dobbiamo installare Angular CLI nell’ambiente nel quale la nostra web app verrà sviluppata.

Quindi apriamo un terminale e lanciamo il seguente comando:

npm install -g @angular/cli

Adesso spostiamoci nella cartella dove vorremmo avere il nostro progetto Angular e lanciamo i seguenti comandi:

ng new nome-progetto

cd nome-progetto

ng serve

Se con il comando ng serve è andato tutto a buon fine, potrete vedere all’indirizzo http://locahost:4200/ che la vostra applicazione sta funzionando.

Configurazione del progetto

Ora possiamo passare al setup del progetto preparandolo alla build. Apritelo con un qualsiasi IDE, se volete optare per uno gratuito posso consigliarvi Atom, oppure WebStorm.

Apriamo il nostro package.json che si trova nella root della nostra applicazione.
Nella sezione degli scripts aggiungiamo i seguenti due comandi:

...
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod --build-optimizer=true",
    "build:dev": "ng build --dev --build-optimizer=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Come potete vedere dal blocco di codice abbiamo aggiunto i comandi “build:prod” e “build:dev”. Andiamo a vedere in dettaglio cosa eseguono questi scripts.

--prod è un meta-flag che abilita le seguenti opzioni:
– Ahead-of-Time (AOT) Compilation: converte il codice HTML e Typescript in efficente codice javascript durante la compilazione del progetto.
– Bundling: concatena i numerosi file di applicazione e di librerie in pochi pacchetti.
– Minification: rimuove spazi bianchi, commenti e token opzionali.
– Uglification: riscrive il codice utilizzando nomi brevi per funzioni e variabili.
– Dead code elimination: rimuove moduli e codice non utilizzati.

Grazie a questa serie di funzionalità, messe a disposizione da Angular, possiamo notare che la nostra applicazione sarà molto leggera. Siccome verranno eseguite molte operazioni per ottenere questo risultato, la compilazione del progetto richiederà un tempo maggiore.

--dev è un altro meta-flag che abilita l’opzione Just-in-Time (JIT), che compila l’applicazione nel browser in fase di runtime e disabilita le opzioni di ottimizzazione del codice usate in modalità produzione, in modo tale da avere un processo di compilazione molto più veloce, potendo testare l’applicazione in tempi brevi.

--build-optimizer grazie a questa opzione è possibile diminuire ulteriormente la dimensione del bundle creato dalla compilazione, però è possibile utilizzarlo soltanto in modalità produzione e con Angular 5+.

Per utilizzare questi scripts vi basterà eseguire da terminale uno dei seguenti comandi:

npm run build:dev

npm run build:prod

Se tutto è andato a buon fine, eseguendo questi comandi verrà creata una cartella “dist” nella root del progetto. Dentro troverete i file che poi potrete usare per pubblicare la vostra web app.

Comandi di build utili

--output-path=<nuova_directory> permette di cambiare l’output di destinazione della build, sostituendo <nuova_directory> con il percorso nel quale volete destinare i file della compilazione.
--watch=true è un altra opzione molto utile che permette di effettuare una build a ogni salvataggio di un file del progetto, in modo da avere aggiornata la vostra web app quasi in tempo reale nel vostro ambiente di sviluppo.
Queste opzioni possono essere aggiunte semplicemente ai comandi di build che abbiamo creato nel package.json.
Per la lista completa delle opzioni disponibili vi mando alla repository github di Angular-Cli.

Per finire dovrete solo gestire correttamente il routing della vostra applicazione; poi sarete pronti per partire con il vostro progetto Angular.