Creazione del frontend con PHP e Angular

Passiamo ora alla creazione del frontend per la visualizzazione dei dati della nostra applicazione. Dalla seconda lezione sappiamo che il prerequisito necessario è avere installato NodeJS, versione 6.9 o superiore. Per verificare l'installazione digitiamo da riga di comando la seguente istruzione:

node -v

Se la risposta è positiva, ovvero la versione è adeguata al nostro progetto, possiamo procedere, altrimenti occorre eseguire l'installazione o l'upgrade di NodeJS.

Installiamo la CLI (Command Line Interface), un tool che ci aiuterà nella costruzione del progetto Angular, risolvendo per noi il problema delle dipendenze e mettendoci a disposizioni sia le istruzioni per la creazione degli oggetti che i tool per il test e la compilazione. Da linea di comando digitiamo:

npm install -g @angular/cli

Questa istruzione utilizza il popolare gestore di pacchetti npm per installare lo strumento richiesto. A installazione avvenuta possiamo controllare il buon esito di quest'ultima digitando nella console:

ng help

Adesso portiamoci con il terminale nella directory all'interno del progetto e creiamo l'applicazione Angular digitando ng new [nome progetto]:

ng new myApp

La creazione del progetto comporta il download dei moduli necessari al suo funzionamento, la creazione dei file di configurazione e la creazione dei file iniziali del progetto. Tra gli elementi più interessanti abbiamo il file package.json dove sono specificate tutte le dipendenze e le versioni delle librerie usate, e il file tsconfig.json con le specifiche per la trascrizione dei file Typescript in JavaScript.

La cartella node_modules, fondamentale per il progetto, per noi riveste un'importanza relativa, non andremo ad interagire con i moduli presenti, al massimo li importeremo nel nostro progetto.

Per noi è invece particolarmente interessante la cartella src che contiene i file sui quali lavoriamo. A partire naturalmente dalla pagina index.html che per la verità è particolarmente povera, questo però non deve stupire: via WebPack andremo a caricare il file main.js ottenuto dal file main.ts e da li prenderà il via la costruzione del frontend.

Di fatto sia index.html che main.ts saranno file sui quali non lavoreremo, mentre i file operativi si trovano nella cartella app a partire da app.module.ts dove troviamo importati i due moduli base necessari alle applicazioni Web e il primo component.

Su questo concentriamo ora la nostra attenzione: il component è composto da tre file più un quarto, app.component.spec.ts, che serve per gli unit-test. Il primo, con estensione .css, serve per la stilizzazione del component, il secondo con estensione html contiene il template, il terzo invece la classe che gestisce il component che viene esportata dal file e importata nel modulo dell'applicazione.

Il template HTML per ora lo possiamo trascurare, lo riscriveremo da zero. Il file app.component.ts è invece da analizzare da subito perch´ contiene l'import del component dal core, il decoratore della classe che specifica il tag al quale si aggancerà il component renderizzato e, in questo caso, abbiamo app-root che è il tag presente in index.html e poi templateUrls e stylesUrl che fanno riferimento ai due file descritti precedentemente.

La definizione della classe che sarà il tema dei prossimi sviluppi. Prima di iniziare a modificare i file portiamoci all'interno del progetto, ovvero nella cartella myApp, e testiamo il funzionamento del pacchetto con l'istruzione:

ng serve

Alla fine della compilazione possiamo collegarci con il browser all'indirizzo:

http://localhost:4200/

e visualizzare la pagina creata.