Angular 7, como empezar? Desde cero – Cap. 1

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:

Comando: angular help, que nos ayuda a determinar si tenemos instalado Angular

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:

Creamos una nueva aplicación y nos pregunta si deseamos agregar el modulo de rutas.

Aceptamos ingresando “y” y luego enter.

Nos pregunta si deseamos usar CSS o algún procesador de CSS en nuestra App.

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.

En cuadro rojo el directorio de mi aplicación creada.

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:

Una vez terminada la compilación, nos dirigimos a nuestro navegador con la ruta: http://localhost:4200

Abrimos el navegador en la ruta: http://localhost:4200

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.

Celeste, hojas de estilo.
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.

Para listar esta información en página web, debemos agregar un array en nuestro componente.

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

**app.component.ts:10** Agregamos un array de productos.

**app.component.html:6** Usamos la estructura NgFor.

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:

Se crean los directorios y archivos necesarios.

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

En nuestro navegador nos dirigimos a http://localhost:4200/login

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.