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 root@IP_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 nome_utente@IP_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 nome_utente@IP_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 ~/.bashrcnvm install nodeIl 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/cliL'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/cli@8npm install -g @angular/cli@9npm install -g @angular/cli@10L'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 --versionDovresti 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-worldDovresti 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-worldng servePer 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 8080L'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.
