Angular è un framework di applicazioni Web open source per la creazione di applicazioni Web mobili e desktop. È scritto in TypeScript/JavaScript ed è stato creato nel 2009 da Google. È appositamente progettato per la creazione da zero di applicazioni su piccola e grande scala. Viene fornito con un'utilità Angular CLI che ti aiuta a creare, gestire, creare e testare applicazioni Angular.
In questo tutorial, ti mostreremo come installare Angular su Ubuntu 20.04.
Prerequisiti
- Un server che esegue Ubuntu 20.04.
- Sul server è configurata una password di root.
Installa Node.js
Prima di iniziare, dovrai installare Node.js e npm nel tuo sistema. Per impostazione predefinita, l'ultima versione di Node.js non è disponibile nel repository predefinito di Ubuntu 20.04. Quindi dovrai aggiungere il repository Node.js al tuo sistema.
Innanzitutto, aggiungi il repository Node.js con il seguente comando:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Una volta aggiunto, installa Node.js con il seguente comando:
apt-get install nodejs -y
Una volta installato, verifica la versione installata di Node.js con il seguente comando:
nodo --versione
Dovresti vedere il seguente output:
v14.7.0
Quindi, aggiorna la versione di npm all'ultima versione eseguendo il comando seguente:
installazione npm [email protetta] -g
Successivamente, verifica la versione npm con il seguente comando:
npm --versione
Dovresti ottenere il seguente output:
6.14.7
Installa Angular
Puoi installare Angular usando npm come mostrato di seguito:
npm install -g @angular/cli
Una volta installato, verifica la versione installata di Angular utilizzando il seguente comando:
Dovresti vedere il seguente output:
_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | /___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_ | \____|_____|___| |___/ Angular CLI:10.0.5Node:14.7.0OS:linux x64Angular:... Ivy Workspace:Package Version----------------- --------------------------------------@angular-devkit/architect 0.1000.5@angular-devkit /core 10.0.5@angular-devkit/schematics 10.0.5@schematics/angular 10.0.5@schematics/update 0.1000.5rxjs 6.5.5
Crea progetto angolare
A questo punto, Angular è installato nel tuo sistema. È ora di creare un nuovo progetto con Angular.
Per prima cosa, cambia la directory in /opt e crea un nuovo progetto chiamato myproject con il seguente comando:
cd /opt
ng nuovo mio progetto
Quindi, cambia la directory in myproject e servi il progetto con il seguente comando:
cd myproject
ng serve --host your-server-ip --port 8088
Dovresti vedere il seguente output:
AVVERTENZA:questo è un semplice server da utilizzare per testare o eseguire il debug di applicazioni Angular a livello locale. Non è stato esaminato per problemi di sicurezza. L'associazione di questo server a una connessione aperta può compromettere l'applicazione o il computer. L'utilizzo di un host diverso da quello passato al flag "--host" potrebbe causare problemi di connessione a websocket. Potrebbe essere necessario utilizzare "--disableHostCheck" se questo è il caso. Compilazione @angular/animations:es2015 come esm2015Compilazione @angular/core:es2015 come esm2015Compilazione @angular/animations/browser:es2015 come esm2015Compilazione @angular/animations/browser/testing:es2015 as esm2015Compilazione @angular/common :es2015 as esm2015Compilazione @angular/common/http :es2015 as esm2015Compilazione @angular/common/http/testing :es2015 as esm2015Compilazione @angular/forms :es2015 as esm2015Compilazione @angular/platform-browser :es2015 esm2015 Compilazione @angular/platform-browser/animations:es2015 come esm2015Compilazione @angular/core/testing:es2015 come esm2015Compilazione @angular/platform-browser-dynamic:es2015 come esm2015Compilazione @angular/platform-browser/testing:es2015 come esm2015/Compilazione @angular compilatore/test:es2015 come esm2015Compilazione @angular/platform-browser-dynamic/testing:es2015 come esm2015Compilazione @angular/common/testing:es2015 come esm2015Compilazione @angular/router:es2015 come esm2015Compil ing @angular/router/testing:es2015 as esm2015chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [iniziale] [renderizzato]chunk {runtime} runtime.js, runtime.js.map (runtime) 6,15 kB [voce] [renderizzato]chunk {stili} styles.js, styles.js.map (stili) 12,3 kB [initial] [rendered]chunk {vendor} vendor.js, vendor.js.map (vendor) 2,65 MB [initial] [rendered]Data:2020-08-09T14:10:36.644Z - Hash:a053188b5496361814a2 - Time:14873ms ** Angular Live Development Server è in ascolto su 69.87.218.220:8088, apri il browser su http://69.87.218.220:8088/ **:compilato correttamente. Accedi all'interfaccia Web angolare
A questo punto, il progetto Angular è distribuito e in ascolto sulla porta 8088. Puoi accedervi utilizzando l'URL http://your-server-ip:8088. Dovresti vedere la seguente schermata:
Conclusione
Congratulazioni! hai installato con successo Angular su Ubuntu 20.04. Ora puoi iniziare a distribuire il tuo primo progetto con Angular. Una delle fantastiche funzionalità di Angular è il ricaricamento a caldo del webpack che distribuisce la modifica in tempo reale e ti fa risparmiare un sacco di tempo.