Introduzione

Angular è il framework più popolare utilizzato per creare applicazioni mobili e web. Angular è un framework per applicazioni web open source sviluppato da Google e da una vasta comunità di persone. Ad oggi Angular 10 è l'ultima versione disponibile per l'installazione. Questo tutorial ti aiuterà a installare il modulo del nodo CLI Angular sul tuo sistema Linux Ubuntu 20.04 LTS Focal Fossa.

Consigliamo di utilizzare un utente non root con privilegi sudo.

Se desideri installare Angular CLI su un server in remoto continua a leggere, altrimenti salta il primo paragrafo "Connessione al Server" e leggi il successivo.

Connessione al Server

Per accedere al server, è necessario conoscere l'indirizzo IP. Avrai anche bisogno dell'username e della password per l'autenticazione. Per connettersi al server come utente root digitare il seguente comando:

ssh [email protected]_DEL_SERVER

Successivamente sarà necessario inserire la password dell'utente root.

Se non utilizzate l'utente root potete connettervi con un'altro nome utente utilizzando lo stesso comando, quindi modificare root con il vostro nome_utente:

ssh [email protected]_DEL_SERVER

Successivamente vi verrà chiesto di inserire la password del vostro utente.

La porta standard per connettersi tramite ssh è la 22, se il vostro server utilizza una porta diversa, sarà necessario specificarla utilizzando il parametro -p, quindi digitare il seguente comando:

ssh [email protected]_DEL_SERVER -p PORTA

Installare Node.js

NVM è uno strumento da riga di comando per l'installazione e la gestione di node.js su un sistema Linux. Quindi prima dobbiamo installare nvm sul nostro sistema. Accedi al sistema con un utente non root, quindi esegui il comando seguente per installare nvm:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 

Successivamente, puoi installare qualsiasi versione di node sul tuo sistema. È inoltre possibile installare più versioni di node su un singolo sistema. Esegui i seguenti comandi per caricare l'ambiente e installare l'ultima versione di node.js:

source ~/.bashrc
nvm install node

Il comando precedente mostrerà la versione di node e npm installati sul tuo sistema.

Installare Angular CLI

Dopo aver installato node.js e npm sul tuo sistema, usa i seguenti comandi per installare Angular cli tool sul tuo sistema:

npm install -g @angular/cli

L'ultima versione di Angular CLI verrà installata sul tuo sistema Ubuntu Linux. Potrebbe essere necessaria una versione di Angular precedente sulla tua macchina. Per installare una versione di Angular specifica, eseguire il comando come segue con il numero di versione:

npm install -g @angular/[email protected]
npm install -g @angular/[email protected]
npm install -g @angular/[email protected]

L'utilizzo del flag -g installerà lo strumento della CLI di Angular a livello globale. Quindi sarà accessibile a tutti gli utenti e le applicazioni del sistema. Angular CLI fornisce il flag ng utilizzato per le operazioni da riga di comando.

Controlliamo la versione installata di ng sul tuo sistema:

ng --version

Dovresti visualizzare un messaggio di output simile al seguente:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.1.3
Node: 14.12.0
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.3 (cli-only)
@angular-devkit/core         10.1.3 (cli-only)
@angular-devkit/schematics   10.1.3 (cli-only)
@schematics/angular          10.1.3 (cli-only)
@schematics/update           0.1001.3 (cli-only)

L'interfaccia della riga di comando Angular  è stata installata sul sistema.

Creare una nuova applicazione di Angular

È possibile utilizzare il comando ng per creare una nuova applicazione con Angular. Crea un'applicazione denominata hello-world utilizzando lo strumento da riga di comando Angular.

Esegui il comando seguente nel terminale:

ng new hello-world

Dovresti visualizzare un messaggio di output simile al seguente:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1028 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (631 bytes)
CREATE hello-world/angular.json (3606 bytes)
CREATE hello-world/package.json (1254 bytes)
CREATE hello-world/tsconfig.json (458 bytes)
CREATE hello-world/tslint.json (3185 bytes)
CREATE hello-world/.browserslistrc (853 bytes)
CREATE hello-world/karma.conf.js (1023 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2835 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (753 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (662 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (25757 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
CREATE hello-world/e2e/protractor.conf.js (869 bytes)
CREATE hello-world/e2e/tsconfig.json (294 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE hello-world/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.

Questo creerà una directory chiamata hello-world nella directory corrente e creerà tutti i file necessari per un'applicazione Angular.

Servire l'applicazione Angular

La tua applicazione Angular di base è pronta per essere pubblicata. Passa alla directory hello-world con il comando cd e quindi esegui la tua applicazione Angular usando il comando ng serve:

cd hello-world
ng serve

Per impostazione predefinita, l'applicazione Angular viene eseguita sulla porta 4200. È possibile accedere al sistema sulla porta 4200 per aprire l'applicazione Angular, connettersi al proprio indirizzo IP oppure in localhost: http://localhost:4200

È possibile modificare host e porta per l'esecuzione dell'applicazione Angular utilizzando i seguenti flag da riga di comando –host e –port:

ng serve --host 0.0.0.0 --port 8080

L'indirizzo IP 0.0.0.0 è in ascolto su tutte le interfacce ed è accessibile pubblicamente.

Conclusione

In questo tutorial, hai imparato a installare l'utility della riga di comando Angular come pacchetto di node. Questo tutorial ti ha anche aiutato a creare una nuova applicazione Angular.