Cibernautas! aquí nuestro primer articulo del 2020 e iniciamos con muchas energías. Y esque hablaremos de Angular IO y cómo empezar a desarrollar aplicaciones con este framework fronted.
Como diria Jack el destripador vamos por partes.
1. Como instalar Angular?
En la actualidad (Enero, 2020), nos encontramos con la versión “7” de angular, y esta por demás señalar que es requerido tener instalado NodeJs (versiones recientes de preferencia).
Te dejo aquí un articulo donde explico como instalar NodeJs de la mejor manera. Pincha este link.
Bien, entonces si ya tenemos NodeJs en nuestro ordenador, ejecutamos en nuestra linea de comandos lo siguiente:
npm install -g @angular/cli
Verificamos que la instalación es correcta ejecutando lo siguiente:
ng help
Lo cual nos mostrará una pantalla como la siguiente:

Así mismo podemos ejecutar el comando ng version para determinar la versión de angular que tenemos instalado:
ng version
2. Como usar angular?
Bueno, espero no haberte complicado con la instalación que en realidad es sencilla; de modo que el siguiente paso es utilizar este conjunto de librerías para obtener algo tangible.
Asi que procedemos creando una aplicación con el siguiente comando:
ng new migranapp
Lo cual nos genera una pantalla como la siguiente:

Aceptamos ingresando “y” y luego enter.

En la imagen anterior, seleccionamos CSS, para el procesador de hojas de estilos.
Y por último, la siguiente pantalla, señalando que nuestra aplicación se creó satisfactoriamente.

El comando “ng new migranapp” antes ejecutado, crea el directorio de nuestra app, que debemos encontrarlo en la ruta en la que estábamos al ejecutar el comando.

Felicidades si has llegado hasta este punto pues el siguiente paso es ingresar al directorio y ejecutar el comando:
ng serve
Que al ejecutarse muestra lo siguiente en pantalla:


3. Aplicando cambios a nuestro proyecto en Angular 7
Si hemos llegado a este punto, es señal de que vamos por buen camino, y de que es tiempo de aplicar cambios a gusto y paciencia, es por ello que debemos reconocer los archivos donde realizamos nuestros cambios.

Naranja, html.
Rojo, lógica de negocio fronted.
3.1 Aplicamos NgFor, como primer cambio:
La estructura repetitiva NgFor, nos ayuda a mostrar información de un array en forma de lista.

El código que permite mostrar al usuario la pantalla anterior es la siguiente:


3.2 Agregamos un nuevo componente:
Si realizaste los cambios suficientes en tu proyecto, probablemente desees agregar nuevas rutas, para así generar interacción de páginas. Requerimos crear un nuevo componente en nuestra aplicación:
ng generate component login
Lo cual nos genera la siguiente pantalla:

Y acto seguido, agregamos nuestro componente en el archivo: app-routing.module


3.3 Continuará…
Bien, sé que están deseosos de seguir construyendo sus apps, y yo de poder guiarlos, pero como sabrán el tiempo es un recurso limitado. En tal sentido la siguiente parte la continuaré en otro momento así que por ahora les dejo algunos links de interés para que puedan seguir abordando el tema.
https://codesandbox.io/: Herramienta en linea para crear aplicaciones Angular Gratis.
https://stackblitz.com/: Herramienta en linea para crear aplicaciones Angular Gratis.
Si te ha gustado este articulo, compártelo con otros programados. Bye bye.