Appunti veloci per la creazione di una webapp vuota con Angular, material design e menù di navigazione.

Questo articolo potrebbe sembrare un po’ offtopic confrontato con quelli scritti finora, ma in realtà c’è un nesso. :sunglasses: Mi è capitato spesso infatti di dover** realizzare pagine web ospitate direttamente sull’ESP32** e nel corso del tempo le soluzioni che ho testato sono tantissime, ma quella che mi ha dato maggiore soddisfazione e che ho adottato per i miei progetti è l’integrazione nel sorgente di un’applicazione Angular.

Il processo di integrazione di Angular in un progetto ESP32 è abbastanza complesso e lo vedremo in un articolo dedicato, quelli che riporto di seguito invece sono i semplici passaggi necessari alla realizzazione di un’applicazione vuota con Angular, material design ed un menù di navigazione laterale, utile come base di partenza. Come sempre, lo scrivo perchè ogni volta mi dimentico, d’ora in poi so dove andare per fare un copia ed incolla veloce :rofl:

Ovviamente, anche per lo sviluppo in Angular io utilizzo VSCode.

Veniamo al dunque, queste sono le operazioni da eseguire nel terminale:

1) Assicuriamoci di aver installato node.js:

$ node -v
v16.13.1

altrimenti scarichiamolo da qui: https://nodejs.org/it/

2) installiamo l’ultima versione di angular CLI:

npm install -g @angular/cli

3) creiamo un nuovo progetto angular

ng new MyAngularApp

4) aggiungiamo al progetto angular material:

cd MyAngularApp
ng add @angular/material

5) Generiamo il componente navigation:

ng generate @angular/material:navigation navigation

6) Sostituiamo il contenuto del file app.component.html con il tag che richiama il componente navigation:

<app-navigation></app-navigation>

7) Avviamo l’applicazione nel browser:

ng serve --open

et voilà! Si aprirà in automatico il browser all’indirizzo http://localhost:4200/