Angular CLI - Kako kreirati novi Angular projekat u Linuxu


Angular je open-source, popularan i vrlo proširiv front-end okvir za razvoj aplikacija, koji se koristi za izgradnju mobilnih i web aplikacija koristeći TypeScript/JavaScript i drugim uobičajenim jezicima.

Angular je krovni izraz za sve Angular verzije koje dolaze nakon AngularJS (ili Angular verzije 1.0) uključujući Angular 2 , i Ugaoni 4.

Angular je vrlo pogodan za izgradnju malih i velikih aplikacija od nule. Jedna od ključnih komponenti Angular platforme za pomoć u razvoju aplikacija je Angular CLI uslužni program – to je jednostavan i lak za korištenje alat komandne linije koji se koristi za kreiranje , upravljajte, gradite i testirajte Angular aplikacije.

U ovom članku ćemo objasniti kako instalirati Angular alat naredbene linije na Linux sustav i naučiti neke osnovne primjere ovog alata.

Instaliranje Node.js u Linux

Da biste instalirali Angular CLI, morate imati najnoviju verziju Node.js i NPM instaliranu na vašem Linux sistemu.

Instalirajte Node.js na Ubuntu

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Instalirajte Node.js na Debian

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

Instalirajte Node.js na RHEL, CentOS, Fedora, Rocky i Alma Linux

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

Također, da biste kompajlirali i instalirali izvorne dodatke iz NPM-a možda ćete morati instalirati razvojne alate na svoj sistem kako slijedi.

sudo apt install -y build-essential  [On Debian/Ubuntu]
sudo yum install gcc-c++ make        [On RHEL Systems]

Instaliranje Angular CLI u Linux

Nakon što instalirate Node.js i NPM, kao što je prikazano gore, možete instalirati Angular CLI koristeći npm menadžer paketa kako slijedi (oznaka -g znači instaliranje alata na cijelom sistemu koji će koristiti svi korisnici sistema).

npm install -g @angular/cli
OR
sudo npm install -g @angular/cli

Možete pokrenuti Angular CLI koristeći ng izvršnu datoteku koja bi sada trebala biti instalirana na vašem sistemu. Pokrenite sljedeću naredbu da provjerite instaliranu verziju Angular CLI.

ng version
OR
ng --version

Kreiranje Angular projekta koristeći Angular CLI

U ovom odeljku ćemo pokazati kako kreirati, izgraditi i poslužiti novi, osnovni Angular projekat. Prvo se pomaknite u webroot direktorij vašeg servera, a zatim inicijalizirajte novu Angular aplikaciju na sljedeći način (ne zaboravite slijediti upute):

cd /var/www/html/
ng new tecmint-app			#as root
OR
sudo ng new tecmint-app		#non-root user

Zatim se pomaknite u direktorij aplikacija koji je upravo kreiran i poslužite aplikaciju kao što je prikazano.

cd tecmint-app
ls 			#list project files
ng serve

Prije nego što možete pristupiti novoj aplikaciji iz web pretraživača, ako imate pokrenutu uslugu zaštitnog zida, morate otvoriti port 4200 u konfiguraciji zaštitnog zida kao što je prikazano.

---------- On Firewalld ---------- 
firewall-cmd --permanent --zone=public --add-port=4200/tcp 
firewall-cmd --reload

---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload

Sada možete otvoriti web pretraživač i kretati se koristeći sljedeću adresu da vidite kako nova aplikacija radi kao što je prikazano na sljedećem snimku ekrana.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 

Napomena: Ako koristite naredbu ng serve da napravite aplikaciju i poslužite je lokalno, kao što je prikazano gore, server automatski ponovo gradi aplikaciju i ponovo učitava web stranicu(e) kada promijenite bilo koju od izvornih datoteka.

Za više informacija u vezi ang alata, pokrenite sljedeću naredbu.

ng help

Angular CLI početna stranica: https://angular.io/cli

U ovom članku smo pokazali kako instalirati Angular CLI na različite Linux distribucije. Također smo pokrili kako izgraditi, kompajlirati i poslužiti osnovnu Angular aplikaciju na razvojnom serveru. Za sva pitanja ili razmišljanja koje želite podijeliti s nama, koristite obrazac za povratne informacije u nastavku.