Nel prossimo articolo daremo uno sguardo all'Angular CLI. Nel caso tu non lo sappia ancora Angular è un framework di sviluppo di applicazioni front-end open source, popolare e altamente estensibile. Può essere utilizzato per creare applicazioni mobili e web utilizzando TypeScript, JavaScript e altri linguaggi comuni. Angular è un termine generico per tutte le versioni di Angular che vengono dopo AngularJS.
Questo framework di sviluppo è adatto per la creazione di applicazioni da zero, dalla piccola alla grande scala. Uno dei componenti chiave della piattaforma Angular per aiutare lo sviluppo dell'applicazione è l'utility Angular CLI. È uno strumento da riga di comando semplice e facile da usare. Viene utilizzato per creare, gestire, costruire e testare applicazioni create con Angular.
Nelle righe seguenti vedremo come possiamo installa lo strumento da riga di comando Angular sul nostro sistema Ubuntu 19.04. Vedremo anche un esempio di base di questo strumento.
Installazione di Node.js su Ubuntu
Per installare Angular CLI sarà necessario che sul nostro sistema sia installata una versione corrente di Node.js e NPM. Per fare questo, non ci resta che aprire un terminale (Ctrl + Alt + T) e scrivere in esso:
sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs
Inoltre, per compilare e installare plug-in NPM nativi, potremmo aver bisogno di installare strumenti per sviluppatori sul nostro sistema. Per fare ciò, nello stesso terminale faremo quanto segue:
sudo apt install -y build-essential
Installazione della CLI angolare su Ubuntu 19.04
Dopo l'installazione di Node.js e NPM come abbiamo appena visto, saremo in grado di farlo installare Angular CLI utilizzando il gestore di pacchetti npm come segue. In questo caso, l'opzione -g significa che installeremo lo strumento in tutto il sistema, in modo che possa essere utilizzato da tutti gli utenti.
sudo npm install -g @angular/cli
Dopo l'installazione, possiamo avviare Angular CLI utilizzando ng eseguibile che dovrebbe ora essere installato sul nostro sistema. Esegui il seguente comando nel terminale (Ctrl + Alt + T) per verificare la versione di Angular CLI installata:
ng --version
Creazione di un progetto utilizzando Angular CLI
Ora vediamo come possiamo creare, costruire e servire un nuovo progetto angolare di base. Primo, andremo alla directory webroot dal nostro server. Quindi creeremo una nuova applicazione Angular come segue:
cd /var/www/html/ sudo ng new ubunlog-app
Dovremo decidere se vogliamo condividere dati anonimi con il team di Angular. Continuiamo ad andare alla directory dell'applicazione che abbiamo appena creato. Stiamo andando a inizia a pubblicare l'app come mostrato di seguito:
cd ubunlog-app ng serve
Il comando precedente ci metterà sullo schermo un collegamento che ci dirà come possiamo vedere la nostra applicazione in funzione.
Prima che possiamo accedervi da un browser web, in caso di esecuzione di un servizio firewall, è necessario aprire la porta 4200 nella configurazione di questo, come mostrato di seguito:
sudo ufw allow 4200/tcp sudo ufw reload
Dopodiché, possiamo aprire il nostro browser web preferito e navigare utilizzando l'URL fornito dal terminale a vedere la nuova applicazione eseguita, come mostrato nello screenshot seguente.
http://localhost:4200/
Possiamo anche utilizzare questo altro URL per accedere alla nostra applicazione:
http://IP_SERVIDOR:4200
Va detto che se usiamo il comando "servire"Per creare un'applicazione e servirla localmente come abbiamo appena visto, il server ricostruisce automaticamente l'applicazione e ricarica le pagine web quando modifichiamo uno dei file sorgente.
Se vogliamo ottenere ulteriori informazioni sullo strumento ng, possiamo eseguire il seguente comando nel terminale (Ctrl + Alt + T):
ng help
In questo articolo abbiamo visto come eseguire un file semplice installazione di Angular CLI sul nostro sistema Ubuntu, oltre a creare, compilare e servire un'applicazione di base su un server di sviluppo.
Questi sono solo i primi passi più basilari che possono essere eseguiti con Angular CLI. Per vedere ulteriori informazioni su Angular CLI, possiamo consultare il sito ufficiale del progetto.