Primeros pasos con Angular

Si estás inmerso en el mundo del Desarrollo Web, es muy probable que ya hayas oído hablar sobre Angular. Junto con React.js y Vue.js, compone el triunvirato de las herramientas JavaScript más populares, solicitadas y utilizadas por las empresas y desarrolladores. En este artículo aprenderemos un poco más sobre Angular y ¡crearemos nuestro primer proyecto juntos!

¿Vamos?

¿Qué es JavaScript?

Si apenas llegaste aquí y no sabes qué es JavaScript, debes saber que es un lenguaje de programación generalmente aplicado en Desarrollo Web y de Software, logrando excelentes resultados tanto para el Front End como para el Back End. Este lenguaje de alto nivel está entre las principales tecnologías web, junto con otras como HTML y CSS.

¿Qué es Angular?

Angular es una plataforma de aplicaciones web lanzada en 2012 por los ingenieros de Google, Misko Hevery y Adam Abrons, utilizada para construir páginas dinámicas en aplicaciones web que hasta entonces requerían un nivel de complejidad considerable.

Angular utiliza la arquitectura Model-View-Controller (MVC), que consiste en dividir una aplicación en una estructura con tres bloques principales, donde uno es responsable de recibir y gestionar las solicitudes (modelo), otro es responsable de presentar la información (vista) y, finalmente, el tercero (controlador) responde a los comandos y se relaciona directamente con la primera capa mencionada.

Llevándolo al escenario de Angular, este es el modelo, el HTML es la vista y JavaScript es el controlador. Al combinar JavaScript y HTML, Angular sincroniza el código entre ellos, facilitando el trabajo de los desarrolladores y reduciendo la cantidad de código necesario para crear páginas dinámicas.

Ahora que hemos aprendido un poco sobre Angular, su importancia en la época en que fue lanzado y su relevancia en la actualidad, ¿qué tal si pasamos a la práctica?

Instalando y creando tu primer proyecto Angular

Vamos a comenzar nuestra jornada con Angular ejecutando su instalación (¡y siempre con la documentación a la mano, para resolver cualquier duda que surja!). Utilizaremos npm como herramienta de gestión de paquetes para la instalación, pero elige la que prefieras, ya que no afectará nuestro desarrollo, siempre y cuando esté correctamente instalada. Dicho esto, ejecuta el siguiente comando para instalar Angular en tu computadora:

npm install -g @angular/cli

Una vez completada la instalación, vamos a crear nuestro primer proyecto. Utiliza el siguiente comando para tal acción:

ng new nome-do-projeto

Sustituye el prefijo "nombre-del-proyecto" por el nombre que consideres más adecuado para la aplicación que vas a crear. En nuestro caso, utilizaremos un nombre genérico, "angular-js". Después de ejecutar el comando mencionado, notarás que, en el terminal que utilizaste, tras preguntar cuál será la forma de estilización (CSS puro, SASS, Less, etc.), el proyecto será creado. Tendrá un aspecto más o menos así:

Ejecuta el comando "npm start" en un terminal abierto en la raíz de este proyecto para que se ejecute en tu navegador. Si todo salió bien con la creación del proyecto, se generará en tu terminal una URL que, al hacer clic en ella, te redireccionará a la siguiente página:

Creando Componentes

El componente responsable de crear esta página es el conjunto de archivos dentro del directorio “app” que comienzan con el prefijo “app.component…”. Aquí, viene una de las primeras grandes características de Angular: siempre que se crea un componente, se crea un archivo HTML, un archivo CSS, un archivo Typescript y un archivo de pruebas para él. De esta forma, para editar un componente determinado, basta con manipular estos archivos. Intenta borrar todos los elementos creados en el archivo “app.component.html”, inserta algún otro elemento, guarda y verás que la página inicial de nuestra aplicación habrá cambiado completamente:

Ahora que has entendido la estructura básica de un componente, ¿qué tal si creamos el primero? Ejecuta en un terminal iniciado en la carpeta raíz del proyecto el siguiente comando:

ng generate component nome-do-componente

Sustituye el prefijo “nombre-del-componente” por el nombre que consideres que se adapta mejor al componente creado. Al ejecutar este comando, se creará un directorio con el nombre que indicaste, con cuatro archivos dentro de él (con extensiones “.html”, “.css”, “.spec.ts” y “.ts”, como ya se explicó anteriormente).

¿Y cómo utilizar este componente? ¡Es muy sencillo! En el archivo con extensión “.ts” habrá un objeto con una clave “selector”. Para su valor, se crea un elemento que puedes utilizar dentro del componente “app”. Para entender mejor:

¡Demasiado sencillo, ¿no crees?! Solo necesitas descubrir el nombre que se creó para el componente (que siempre estará en el archivo con extensión Typescript y generalmente se nombra como “app-nombre-del-componente”) y usarlo como una etiqueta HTML en el archivo deseado, que en nuestro caso fue el principal. Ya que estamos aquí, vamos a embellecer un poco más nuestro encabezado, aprovechando para revisar los puntos principales para manipular componentes con Angular:

OBS - Siempre que sea necesario crear estilos generales para toda la aplicación, o que afecten a más de un componente, utiliza el archivo “styles.css”, conforme al ejemplo:

Mostrando datos existentes en el componente

Al analizar el encabezado que creamos, constatamos rápidamente que no tiene mucho sentido, porque el nombre del usuario está escrito estáticamente directamente en el HTML, en lugar de ser de hecho un dato que se pueda cambiar. Necesitamos corregir esto.

Angular se desarrolla con el uso de clases, de manera que podemos usar las propiedades creadas en ellas sin mucha dificultad en nuestra visualización. Dicho esto, vamos a crear, en la clase creada para nuestro encabezado, una propiedad llamada “name”:

Ahora, en el documento HTML, utilizaremos esta propiedad, usando dobles corchetes para traer el valor que insertamos para la visualización:

Mostrando datos del componente Padre

Para fines de comprensión, llamaremos “componente padre” a un componente determinado que posea otros componentes en su contenido y, por consecuencia, “componente hijo” a aquel que está contenido en un determinado componente. Veamos el siguiente código como ejemplo:

Notaremos en la figura 13 que el componente Header (línea 3) se inicializa en el contenido del componente App. De esta forma, App es el componente padre del componente Header y, consecuentemente, Header es el componente hijo de App.

Hasta ahora, hemos visto que es posible trabajar con datos de un componente determinado que esté en su clase correspondiente. Sin embargo, también es posible acceder a información que esté contenida en el componente padre y eso es lo que veremos ahora: imagina que el atributo name no se inicializa con ningún valor en la clase relacionada con el componente Header:

Supón que la información del nombre del usuario se crea en el componente App y ya no en Header. Para ello, crearemos un atributo en el componente mencionado:

Ahora, solo necesitamos definir que el atributo “name” existente en Header recibirá los datos contenidos en userName existente en App. Para ello, creamos una propiedad en el elemento “<app-header />” entre corchetes con el nombre del atributo contenido en el elemento hijo, cuyo valor será una cadena con el nombre del atributo del elemento padre:

Por último, utilizamos “@Input()” antes del atributo “name”, ya que está recibiendo un valor mediante la propiedad de otro componente:

¡Todo listo! Nuestro código ya mostrará en el componente Header la información que está contenida en el componente App:

Consideraciones finales

En el artículo de hoy aprendimos las razones por las cuales Angular es una poderosa herramienta para el Desarrollo Web, además de entender su estructura básica y dar los primeros pasos con él. Si estás interesado en aprender más sobre el Desarrollo Web con Angular, crear tu primer proyecto y explorar sus recursos, vale la pena invertir tiempo y esfuerzo en esta poderosa herramienta.

En los próximos artículos, trabajaremos más con Angular, de forma que se aborden todos los conceptos cruciales para la programación con él. Si encontraste este artículo interesante, si tienes alguna duda o simplemente quieres intercambiar ideas sobre estos y otros temas, ¡también puedes ponerte en contacto conmigo, ya sea por medio de correo electrónico bruno.cabral.silva2018@gmail.com o por mi perfil de Linkedin!

¡Te espero ansiosamente!