En el següent article anem a fer una ullada a Angular CLI. Per si encara no ho saps, Angular és un marc de desenvolupament d'aplicacions front-end de codi obert, Popular i altament extensible. Es pot utilitzar per construir aplicacions mòbils i web fent servir TypeScript, JavaScript i altres llenguatges comuns. Angular és un terme general per a totes les versions de Angular que vénen després de AngularJS.
Aquest marc de desenvolupament és molt adequat per a construir aplicacions des de zero, que van des de petita a gran escala. Un dels components clau de la plataforma Angular per ajudar a al desenvolupament d'aplicacions és la utilitat Angular CLI. Es tracta d'una eina de línia d'ordres simple i fàcil d'utilitzar. S'utilitza per crear, administrar, construir i provar aplicacions creades amb Angular.
En les següents línies veurem com podem instal·lar l'eina de línia d'ordres Angular en el nostre sistema Ubuntu 19.04. A més veurem també un exemple bàsic d'aquesta eina.
Instal·lació de NODE.JS en Ubuntu
Per instal·lar Angular CLI serà necessari que tinguem instal·lada una versió actual de NODE.JS i NPM en el nostre sistema. Per fer-ho, tan sols haurem d'obrir una terminal (Ctrl + Alt + T) i escriure-hi:
sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs
A més, per instal·lar complements nadius de NPM, és possible que necessitem instal·lar eines de desenvolupament en el nostre sistema. Per fer-ho, a la mateixa terminal farem el següent:
sudo apt install -y build-essential
Instal·lació d'CLI Angular en Ubuntu 19.04
Acabada la instal·lació de NODE.JS i NPM com acabem de veure, anem a poder instal·lar Angular CLI utilitzant l'administrador de paquets NPM de la següent forma. En aquest cas, l'opció -g vol dir que anem a instal·lar l'eina en tot el sistema, per a ser utilitzada per tots els usuaris de la mateixa.
sudo npm install -g @angular/cli
Finalitzada la instal·lació, ja podem iniciar Angular CLI utilitzant l'executable ng que ara hauria d'estar instal·lat en el nostre sistema. Executa a la terminal (Ctrl + Alt + T) la següent comanda per verificar la versió de Angular CLI instal·lada:
ng --version
Creació d'un projecte utilitzant CLI angular
Ara anem a veure com podem crear, construir i servir un nou projecte angular bàsic. primer, ens adreçarem a directori Webroot del nostre servidor. Després crearem una nova aplicació Angular de la següent manera:
cd /var/www/html/ sudo ng new ubunlog-app
Haurem de decidir si volem compartir dades anònims a l'equip de Angular. Continuem dirigint-nos a directori de l'aplicació que acabem de crear. anem a començar a servir l'aplicació com es mostra a continuació:
cd ubunlog-app ng serve
L'anterior comando ens posarà en pantalla un enllaç que ens indicarà com podem veure la nostra aplicació en funcionament.
Abans que puguem accedir-hi des d'un navegador web, en cas de comptar amb un servei de tallafocs en execució, hem d'obrir el port 4200 en la configuració d'aquest, com es mostra a continuació:
sudo ufw allow 4200/tcp sudo ufw reload
Després d'això, ja podem obrir el nostre navegador web favorit i navegar usant la URL que ens va proporcionar la terminal per veure la nova aplicació executada, Com es mostra en la següent captura de pantalla.
http://localhost:4200/
També podrem utilitzar aquesta altra URL per accedir a la nostra aplicació:
http://IP_SERVIDOR:4200
Cal esmentar que si fem servir la comanda "ng servir"Per construir una aplicació i servir-la localment com acabem de veure, el servidor reconstrueix automàticament l'aplicació i torna a carregar les pàgines web quan canviem qualsevol dels arxius d'origen.
Si volem obtenir més informació sobre l'eina ng, Podem executar la següent comanda a la terminal (Ctrl + Alt + T):
ng help
En aquest article, hem vist com realitzar una instal·lació senzilla d'Angular CLI en el nostre sistema Ubuntu, A més de construir, compilar i servir una aplicació bàsica en un servidor de desenvolupament.
Aquests només són els primers passos més bàsics que es poden donar amb Angular CLI. per consultar més informació sobre Angular CLI, Podem consultar la pàgina web oficial de el projecte.