creareapp angularAngular 4 da dove partire: l'ambiente di test locale

Vedremo come preparare il nostro computer al fine di poter progettare applicazioni Angular. Vedremo come sfruttare i comandi in linea CLI, per creare un nuovo progetto e come lanciarlo all'interno di una finestra del browser in locale.

Ultimo aggiornamento: 3 giorni fa

Come per tutti i nuovi linguaggi di programmazione, che in 20 anni di attività sul web ho duvuto imparare, anche per il framework Angular v4.x il primo passo da fare è dotarsi dell'ambiente su cui effettuare dei test.

Se per imparare il linguaggio HTML è sufficiente un software per scrivere del testo e un browser, per Angular, così come per altri framework basati su JavaScript (vedi creare app con cordova) è necessario installare Node.js e npm.

Per ora non ci preoccuperemo di capire a cosa servono esattamente e che caratteristiche hanno, perchè li useremo solo come strumento per installare nel computer una serie di strumenti utili alla creazione di nuovi progetti e al recupero di file di configurazione dalla rete, i file che rappresenteranno il nostro primo progetto.

Agli inizi dello sviluppo di Angular, gran parte del lavoro di configurazione, doveva essere fatto manualmente. Ora, con una sola riga di comando, creeremo un progetto completo, funzionante e da cui partire per iniziare ad inserire tutte le modifiche del caso, un pò come se avessimo il classico file html, con all'interno già inseriti i tag <html> <head> <body> etc.

Impostare l'ambiente di sviluppo sul proprio pc

Come dicevamo il primo passo è installare le librerie Node.js e npm. E' un'operazione da 10 sec. e puoi farlo su qualsiasi sistema operativo. Tipicamente, a meno che già non hai programmato con queste librerie, non sono presenti nei computer a livello predefinito.

1) Installare Node.js e npm

Collegati al link del sito ufficiale di Node.js alla sezione di dowanload Node.js® e npm

NB: Nel caso in precedenza tu abbia già installato queste librerie, accertati di avere delle versioni adeguate. Per Node.js deve essere superiore alla 6.9 e per nmp superiore alla 3. Il test lo puoi fare lanciando le seguenti righe all'interno della classica finestra del promp dei comandi, sia su window che su mac e linux.

node -v   // per verificare la versione di node.js installata
npm -v    // per verificare la versione di npm

2) Installare Angular CLI

Il passo successivo è quello di installare un insieme di librerie necessarie a eseguire dei comandi direttamente dalla finestra terminale. Sebbene siano costantemente in evoluzione, ci permettono di risparmiare molto tempo. Per dare  un'occhiata alla versione attuale e a eventuali operazioni da fare per aggiornare eventuali progetti Angular datati, collegati al link ufficiale su github qui: Angular-CLI.

Dovrai allora scrivere questa riga:

npm install -g @angular/cli

NB: Fai attenzione a rispettare gli spazi presenti nella stringa, e inoltre armati di pazienza perchè potrebbe richiedere qualche minuto.

Chiaramente dovrai essere collegato ad internet perchè dovranno essere scaricati diversi file nel tuo computer.

npm install -g angular-cli

3) Creare un nuovo progetto Angular

Per poter avere l'insieme dei file necessari ad entrare nel vivo dello sviluppo della tua prima applicazione, puoi usufruire del comando qui sotto, che ti permetterà di creare un nuovo progetto dal nome miaprima-app. Chiaramente verrà creato nella stessa cartella in cui sei posizionato attualmente, quindi per cambiarla dovrai usare i classici comandi DOS, cd nomecartella per entrare in una sottocartella, e cd.. per spostarti nella cartella padre.

ng new miaprima-app

NB: Come nome della tua applicazione, devi sempre partire con lettere minuscole, non inserire spazi, caratteri alfanumeri, simbolo di underscore (trattino basso)

Nell'esempio qui sotto, ho precedentemente creato la cartella testAngular nel mio desktop, mi sono spostato all'interno, e poi ho creato il primo progetto Angular dal nome miaprima-app:

creare progetto angular

Armati di pazienza, perchè questo passaggio potrebbe richiedere alcune decine di secondi in quanto devono essere scaricati diversi pacchetti npm.

4) Avviare il server e caricare la pagina nel browser

Arrivati a questo punto, nella cartella in cui hai creato il progetto, troverai la sottocartella src, che conterrà tutta una serie di file, suddivisi tra file di configurazione e file dell'app, che impareremo a capire in dettaglio nelle prossime lezioni. Per una lista dettagliata del significato di ognuno, puoi consultare la fine di questa pagina

Putroppo non è possibile lanciare l'applicazione cliccando su uno specifico file index.html, come avviene per le classiche pagine web, ma dovrai prima di tutto avviare un server locale integrato, che ti permetterà di aprire l'applicazione da un indirizzo web specifico, in particolare dall'indirizzo http://localhost:4200/

Sempre con l'ausilio della finestra terminale, dovrai spostarti all'interno della cartella in cui è stato creato il progetto, nel nostro caso all'interno della cartella miaprima-app:

cd miaprima-app

e poi avviare il server di produzione locale, che ci servirà per interpretare correttamente le pagine:

ng serve

NB: Ricordati che devi sempre essere all'interno di una cartella in cui è presente un progetto Angular.

Grazie a questo comando, ogni modifica che introdurremo alle diverse pagine, automaticamente si rifletterà nella pagina visualizzata nel browser.

NB: Spesso può capitare che le ultime versioni di angular-cli non funzionino correttamente, quindi nel caso la pagina non dovesse aggiornarsi, dovrai armarti di pazienza e attendere che venga corretto il bug e aspettare la nuova versione o installare quelle precedenti.

Bene, non resta allora che lanciare l'applicazione di base creata in automatico. Per farlo, apri il browser e digita il link qui sotto:

http://localhost:4200/

Se vedi il messaggio "Welcome to app!", hai concluso con successo tutti i passaggi necessari a testare in locale un'applicazione Angular!

Il file che viene caricato, è proprio il file index.html, presente all'interno della cartella radice del tuo progetto. Ora se tu sbirciassi all'interno del codice sorgente della pagina index.html, non troveresti granchè: solo tag html. Andando però a guardare con lo strumento "ispeziona documento" del browser, troverersti anche una serie di file javascript, iniettati nel codice della pagina in fase di compilazione.

In realtà vedremo nel prossimo tutorial, che lo "strano" tag presente all'interno della pagina index (<app-root>) è un particolare tipo di tag, il quale, prima che il browser carichi la pagina e la visualizzi, viene trasformato in una serie di elementi JavaScript grazie al compilatore angular. Questo processo viene chiamato JIT che è l'acronimo di  compilazione "Just In Time", quindi all'istante.

Non approfondiremo il discorso su quali sono le caratteristiche di questo tipo di compilazione, ma possiamo solo dire che ha degli svantaggi, a livello di performance dell'app finale, questo perchè ogni elemento da visualizzare, deve prima essere compilato da parte del browser, e questo richiede del tempo.

Impareremo a superare queste problematiche quando parleremo di come trasferire la nostra applicazione all'interno di un server di produzione e farla funzionare così come avviene in locale.

5) Terminare l'esecuzione del server

Non appena avrai concluso tutti i test sulla tua applicazione, conviene arrestare il sever locale avviato in precedenza con il comando ng serve, questo per non rallentare il proprio pc con programmi che non servono più. Per farlo, basterà semplicemente chiudere la finestra terminale oppure digitare la combinazione di tasti CTRL+C.

E' chiaro che per poter nuovamente testare l'app, dovrai aprire la finestra terminale, spostarti nella cartella del tuo progetto e digitare nuovamente la riga vista nel punto 4.

Conclusione

Abbiamo imparato i pochi passaggi necessari per preparare il proprio computer all'esecuzione e test di un'applicazione creata con il framework Angular.
Non appena avremo terminato lo sviluppo e i test dell'applicazione locale, dovremo trasferirla su un server di produzione, ma per fare questo sono necessarie delle ulteriori considerazioni che vedremo più avanti, quando parleremo di compilazione "anticipata" .

A partire dal prossimo tutorial, inizieremo a studiare le caratteristiche peculiari di un progetto Angular, partendo dall'analisi di alcuni dei file principali visti in precedenza. Non perdere tempo allora: va subito al tutorial "La struttura di un'app Angular"

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Configurazione

Voto 3.9/5 basato su 75 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.