viernes, septiembre 20, 2019

Angular desde cero "Instalando y arrancando mi primer proyecto"

La verdad que desde hace tiempo vengo escuchando del tema de Angular y tengo que admitir que por cuestiones de tiempo o de falta de interés no me había metido en este tema.

Ahora que se acerca un nuevo encuentro GeneXus veo que se le sigue dando para adelante al generador Angular y la verdad que intento estar en todo lo que tenga que ver con el mundo GeneXus.
Esto me motivo a arrancar a meterme en Angular para entender de que viene el generador Angular. En el GX29 existe una charla llamada "Nuevos generadores GeneXus: Angular.... y otros", espero poder asistir a esta charla e ir al evento por lo que arranque por entender e investigar un poco que es Angular.

Para hacer la instalación me base en dos artículos que encontré en la vuelta y que me ayudaron mucho:
https://ubunlog.com/angular-instala-framework-ubuntu/
https://tecadmin.net/install-latest-nodejs-npm-on-linux-mint/

En mi equipo hice la instalación siguiendo los pasos de los artículos mencionados y luego lo que hice fue actualizar la versión del Node Package Manager (NPM)
cgomez-urulinux cgomez # npm -v
6.10.3
cgomez-urulinux cgomez # sudo npm install npm@latest -g
cgomez-urulinux cgomez # npm -v
6.11.3
Luego de actualizar el npm y configurar mi git lo que hice fue hacer una aplicación de ejemplo:
cgomez-urulinux cgomez # ng new ejemploangular
Luego de ejecutar ese comando lo que hice fue entrar al directorio "ejemploangular" y ejecutar mi aplicación mediante el comando: pm start
cgomez-urulinux ejemploangular # npm start 
> ejemploangular@0.0.0 start /home/cgomez/ejemploangular
> ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-09-21T02:44:45.706Z - Hash: 0f7af56d6a2dbfe76dde - Time: 6898ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.
Mi nuevo proyecto quedo levantado en el puerto 4200 y al ir al browser se ve de esta manera:


En principio para entender un poco que es Angular buscando en la web encontré un artículo llamado: "Angular: Mucho más que un framework", con eso me alcanzo para entender un poco y ponerme manos a la obra para instalar y hacer mi primer aplicación.

Ahora solo me queda comenzar a meterle mano a Angular para no quedarme por fuera de este framework ni del generador Angular de GeneXus.