Scacco matto ad Angular in meno di venti mosse? Ora puoi!

Satelliti che vanno su Giove, guerre spaziali con ombrelli digitali, spade laser archiviate per lasciare il posto ai potentissimi algoritmi di angular che hanno una curva di apprendimento molto dispendiosa? Niente paura, adesso puoi dare scacco matto ad angular in poche mosse, pure a Carlsen. Semplifichiamo con una miniatura scacchistica e andiamo dritti al punto con spirito minimalista (o animalista?!) e semplifichiamoci la vita senza spiegare con tanti preamboli che angular è il java script lato server di Google nato mentre i suoi membri fondatori magari giocavano a ping pong nelle ore di lavoro contrattuali e farcendo di inutili leggende metropolitane il tutto. Fatti dunque e poche digressioni filosofiche. Per lavorare con Angular hai bisogno di 3 strumenti. Node: https://nodejs.org/en/download/, verifica prima se lo hai già nel tuo computer con ilc omando da finestra terminale npm – v dove ve sta per versione, è probabile che se lo hai già ti venga suggerito di fare un aggiornamento alla versione più recente. L’altro strumento di cui hai bisogno é https://code.visualstudio.com/download editor gratuito. Poi angular CLI per le righe di comando: https://cli.angular.io/ da terminale comando npm install -g @angular/cli; poi servirà anche Angular snippet di J Papa da installare sulle estensioni di visual studio code. La caratteristica di questi comandi é che completano una serie di righe in automatico, semplificando di molto il lavoro. Poi importa l’estensione auto import per farti suggerire i metodi durante la scrittura del codice. Per creare l’ossatura di una applicazione angular con CLI (command line interface) dobbiamo usare il comando NG da finestra terminale di Visual Studio che si apre con CTRL + ò e digitare il comando ng new Fwd -S dove -S è un flag che dice al processo di creazione di mettere solo il numero numero di file essenziali e Fwd il nome del progetto. Durante il processo di creazione ci verrà chiesto se vogliamo il routing, la navigazione su url e come vogliamo stilizzare il vestito se css oppure altro tipo sass. Poi è importante a familiarizzare con GIT che per i suoi repository ci chiede di impostare due parametri con i comandi:

git config –global user.email “you@example.com”
git config –global user.name “Your Name”

dati identificativi importanti per tutto il processo di salvataggio dei branch, delle commit e dei relativi push e pull. Alla fine del processo di installazione (lungo e macchinoso) ci ritroviamo un messaggio simile:

added 1075 packages in 299.217s
Successfully initialized git.

La cartella di creazione viene creata sotto C:\utenti\numeutente\nome progetto in questo caso FWD si troverà nella root del nome utente. A questo punto ci ritroviamo una serie di file creati dal nulla. A questo punto dobbiamo familiarizzare con questo blocco di file e con l’architettura del blocco progetto appena creato. All’ interno della cartella SRC abbiamo molti file che non toccheremo mai, perchè fanno riferimento alla fase di test dell’ applicazione o permettono di configurare il compilatore typescript per convertire un progetto angular in modo tale che sia masticabile dal browser oppure il file tslint.json che è un modello formale per il nostro codice che effettua dei controlli per stabilire la correttezza. La nostra cartella di lavoro é APP essenzialmente che si trova dentro SRC. Poi abbiamo la nostra bella cartella ASSETS per le risorse che ci aiuterà a integrare tutto quello che necessita per dare visibilità alle nostre pagine (immagini, css, js per esempio). Il file angular.json che non è da toccare é molto importante perchè inizializza un progetto angular e lo mette in piedi dal punto di vista architetturale richiamando le risorse che necessitano. Il file main.ts è la miccia che fa partire l’applicazione richiamando componenti che si trovano all’ interno della cartella APP. A questo punto lanciamo un nuovo progetto con il comando ng new cvapp –routing -S dove cvapp é il nome del progetto e –routing inserisce tutte le regole di navigazione per la vostra APP e il -S è il parametro che indica crea un blocco minimo di file. Se non avessi voluto creare dal nulla da riga di terminale avrei potuto usare il classico processo manuale del copia e incolla andando a prelevare il contenuto della cartella Fwd e rinominando in cvapp per esempio. A questo punto sorge spontanea una domanda, ma come faccio a lanciare una applicazione angular?! Con il comando ng serve –open e nel caso ci siano problemi per la visualizzazione rapida il temrinale propone un metodo alternativo per vedere la nostra pagina usando un altro processo che coinvolge il DOM e che é più rapido, il risultato finale è quello che si vede in figura e costituisce anche lo step finale in cui diamo scacco matto per vedere tutte le mosse precedenti prendere corpo in un obiettivo centrato!

Ma se dovessi trasferire con FTP su server reale al posto di server locale solo il contenuto della cartella app appena creata da riga di comando che cosa vedrei? Qualcosa di stonato? Forse, come si evince dall’immagine successiva, in quanto il titolo non é visibile come in locale, che sia perchè devi caricare anche altro oltre alla cartella app nativa? Focu!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...