Mentre Angular è un framework in codice javascript per lo sviluppo di applicazioni web, Angular Cli è uno strumento di interfaccia (comunemente definita in gergo informatico command line interface) che permette di creare app angolari just in time utilizzando node modules, ossia i moduli in stile node.js.
Le interfacce a riga di comando più utilizzate sono quelle dei sistemi operativi Windows, Linux e OS.
La CLI, nonostante il progresso tecnologico e l’avvento delle GUI, ossia le interfacce grafiche, continua ad essere uno strumento molto utile e adoperato.
Le linee guida per installare Angular CLI:
Dopo aver installato sul proprio pc node.js e npm sul tuo sistema, poiché fra le applicazioni angular, la CLI ha un package manager npm, il suo procedimento di installazione è molto semplice, infatti basta seguire queste semplici istruzioni:
- Digitare npm install g angular cli nella finestra terminale
- Per avere una particolare versione di Angular digitare il comando con il numero di versione (per esempio (npm install -g @angular/cli@9)
- andare alla directory dello spazio di lavoro attraverso i comandi: content_copy, ng new my-first-project, cd my-first-project, ng serve
- Intanto nel browser aprire http://localhost:4200/ per verificare l’esecuzione dell’applicazione.
- Nella cartella src è contenuto il codice sorgente dell’applicazione.
Di quali cartelle disponiamo in angular CLI e a cosa servono
Oltre alla cartella src col codice sorgente dell’applicazione web, ovviamente, troviamo altri contenuti che concorrono al funzionamento e all’utilità della stessa.
Assets: E’ la cartella della fase di build e viene utilizzata per immagini e altre risorse da copiare nella cartella dei file dell’applicazione. Solitamente si presenta con un file vuoto .gitkeep. che serve a identificare una cartella che sfuggirebbe al software di controllo versione se non contenesse nulla.
Environments: si presenta generalmente con due file, ossia environment.ts e environment.prod.ts, attraverso cui si possono aggiungere o modificare altri file.
App: All’interno di questa cartella si generano i file necessari alla creazione di un’applicazione Angular e perciò si può dire che è la cartella principale di angular CLI. Se si il comando ng new in app si visualizzano ulteriori file come app.component.ts dove si trova la logica del componente base dell’applicazione e app.component.html che si riferisce a modello HTML associato al componente dell’applicazione.
Per saperne di più si può immaginare di seguire un corso angular online e di imparare ad usare l’interfaccia CLI per creare app angolari.
Progetti e Angular material col supporto di CLI
Il comando ng new serve a creare un nuovo progetto di lavoro all’interno della cartella Angular . Lo spazio di lavoro può essere strutturato in più applicazioni e librerie. I comandi CLI consento di modificare i file generati e di aggiungerne altri al progetto.
Utilizzando ng config si possono impostare i valori di configurazione dalla riga di comando e modificare file di configurazione angular.json.
In seguito, abbandonato l’ambiente di sviluppo, si dovrà compilare il progetto e consegnarlo a un web server. Basterà utilizzare ng build e ci si ritroverà di fronte HTML+CSS+JS.
Inoltre utilizzando il comando generate si può generare scaffolding per avviare celermente lo sviluppo. Attraverso lo scaffolding è possibile creare diversi tipi di file nella directory. Se si desidera rimuovere un file bisognerà procedere manualmente, non essendoci al momento una funzione di ripristino.
I framework di test end-to-end per applicazioni Angular CLI
Attraverso il test end-to-end (e2e) si può indagare se il flusso di un’applicazione sta funzionando come atteso dal principio alla fine. Angular CLI dispone del framework E2E usando generalamente Jasmine o Protractor.
Come funziona il linguaggio CLI?
Spesso comandi e opzioni hanno degli alias. Generalmente un solo trattino precede gli alias, mentre il doppio trattino precede i nomi delle opzioni. I nomi delle opzioni possono essere forniti sia in camelCase che in dash-case.