Progettare Web App con Angular 8

Vediamo con un approccio pratico come funziona il framework JS più famoso e richiesto dal mercato in questo momento, Angular, indirizzo https://angular.io. Wikipedia semplifica in questo modo: è un framework per applicazioni web open source, principalmente sviluppato da Google e dalla comunità di sviluppatori individuali, nato per affrontare le molte difficoltà incontrate nello sviluppo di applicazioni su singola pagina. Ha l’obiettivo di semplificare lo sviluppo e il test di questa tipologia di applicazioni fornendo un framework lato client con architettura MVC (Model View Controller). Il framework lavora leggendo prima la pagina HTML, che ha incapsulati degli attributi personalizzati addizionali (esempio: ng-controller), interpretando questi attributi come delle direttive (comandi) per legare le parti di ingresso e uscita della pagina al modello che è rappresentato da variabili standard JavaScript. Il valore di queste variabili può essere impostato manualmente nel codice o recuperato da risorse JSON statiche o dinamiche. E ora tuffiamoci nella parte pratica applicando poche parole ma comandi diretti. E’ bene ricordare che la shell per i comandi di riga in windows si richiamano con cmd da striscia di comando esegui mentre in linux rispetto ai comandi sotto elencati si precede il tutto con la formula “sudo“. Con il comando npm install -g @angular/cli si sfrutta la potenza del modulo di gestione moduli di node (NPM) per installare l’ultima versione di Angular. E’ probabile che alla fine dell’ installazione npm proponga un auto aggiornamento con il comando: “npm i npm“. A questo punto creo una cartella per i miei progetti in una posizione specifica e dopo essermi posizionato su di essa, darò il comando ng new my-dream-app. Se arriva l’avviso che node è da aggiornare andare nella root precedente sotto utente e dare il comando per la compatibilità di node con angular: npm install -g update-node; se persiste lo stesso messaggio andare su https://nodejs.org/en/ e installare the last versions! A questo punto il comando che crea l’APP funziona e inizierà a chiedere se vogliamo integrare il modulo routing e che tipologia di CSS vogliamo inserire, noi diciamo no alla prima opzione e lasciamo di default CSS. Il processo di installazione durerà un pò perchè è necessario creare tutta una serie di dipendenze e di moduli per far funzionare il tutto. Alla fine di tutto il software dirà: added 1078 packages from 1045 contributors and audited 17111 packages in 241.028s, found 0 vulnerabilities. A questo punto mi posiziono dentro la cartella e darò il comando: ng serve che inizializzerà la mia app alla visualizzazione su browser tramite localhost, infatti alla fine del comando mi verrà restituito il messaggio: angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ e alla fine ci troviamo a rispondere positivamente anche alla domanda critica se esistono le gioie per gli sviluppatori, certo ecco infatti che cosa abbiamo ottenuto alla fine di tutto questo burrascoso processo, fatto di ostacoli e di aggiornamenti, sovrascritture e dipendenze modulari:

A questo punto il passo successivo è procurarsi un buon editor per modellare il codice tipo web storm o visual studio code, però nel frattempo diamo un occhiata anche alla parte fisica pragmatica creata dopo una serie di comandi se vogliamo astratti e surreali, infatti posizionandoci all’ interno della cartella creata vedremo il seguente schema, dove naturalmente all’ interno della cartella node_modules si vedrà aprirsi un mondo:

Ora dobbiamo capire la struttura e le dipendenze presenti nei file package.json ma la nostra APP si può modellare nel suo SRC (source) e APP dove abbiamo file critici come app.component.html che intuitivamente ci dice a cosa serve: se infatti da localhost:4200 proviamo a modificare il testo della pagina e dell’ HTML precedendo con un ciao i messaggi standard e salvando, scopriremo che la pagina si aggiorna automaticamente con il nuovo contenuto:

In app.component.ts ho anche la possibilità di modificare il contenuto della variabile {{title}} per esempio ma anche di vedere la collocazione delle directory correnti che ospitano i file critici per le modifiche come quello HTML visto precedentemente, ma anche il CSS per esempio. A questo punto è utile vedere come differisce il sorgente rispetto a una pagina HTML tradizionale:

Da notare i marcatori tipo <app-root></app-root> per esempio e le numerose librerie js linkate per rendere eseguibile l’applicazione a runtime. Se andiamo sul nostro codice alal voce app.component.ts scopriremo che la voce è settata nella riga selector: ‘app-root’, ovviamente nella root del folder nel file index.html mi ritroverò la dicitura <app-root></app-root> come da visualizzazione del codice sorgente. A questo punto cimentiamoci in una cosa apparentemente molto complicata, voglio creare una casella di testo che nella parte inferiore nella prima fase mi farà vedere il contenuto della variabile nome settata in app.component.ts (basterà modificare il title in nome e assegnare un valore). Ovviamente non è questo che vogliamo, perchè dinamicamente abbiamo bisogno che prima la casella di testo abbia un contenuto per poter essere catturato poi nella parte inferiore, vediamo quindi come fare per la prima parte. Il file app.component.html si trasformerà in:

<input type=”text”>
<p>{{nome}}</p>

Così però mi ritrovo una situazione statica dove non riesco a catturare dinamicamente il contenuto della casella di testo, quindi dovrò fare delle operazioni preliminari come aggiungere la direttiva che introduce questa opzione che però va prima aggiunto al componente modulo, quindi nello specifico app.component.html diventa:

<input type=”text” [(ngModel)]=”nome”>
<p>{{nome}}</p>

Ovviamente se scriverò un nome nella casella di testo non succederà nulla in quanto adesso dovrò lavorare sul file app.module.ts e in particolare includendo le righe di codice per rendere la direttiva eseguibile, quindi le righe:

import { FormsModule } from ‘@angular/forms’;

e FormsModule sempre nel file app.module.ts:

imports: [
BrowserModule,
FormsModule
],

A questo punto la casella di testo di default prende il valore predefinito ma cambiando il contenuto della casella di testo ci accorgiamo che dinamicamente il tutto sarà aggiornato in tempo reale. Come primo approccio ad Angular può bastare, è sufficiente far quadrare il cerchio con le istruzioni sopra elencate e con i mini obiettivi raggiungibili tramite schermate.