Primeros pasos en Angular

A diferencia de React o de Vue, la curva de aprendizaje de Angular es un poco más compleja. Entonces, ¿por qué aprender Angular?

Angular es un framework de desarrollo de aplicaciones basado en Typescript, igual que React y Vue. Es usado para crear aplicaciones web escalables y de alto desempeño, permitiendo generar interfaces complejas e interactivas.

¿Cuáles son las principales diferencias entre Angular, React y Vue?

Angular, React y Vue son los frameworks más utilizados usados para desarrollar aplicaciones web, cada uno con sus características particulares:

• Angular: es un framework completo que ofrece varias herramientas y recursos para ayudar a los desenvolvedores a crear aplicaciones web de forma rápida y eficiente. Utiliza TypeScript, un lenguaje que permite que JavaScript tenga tipeado fuerte, con lo que tenemos una gran facilidad para reutilizar código y mantenerlo. Además de eso, Angular posee un sistema nativo de rutas, lo que permite dar vida a aplicaciones con varias páginas y navegación entre ellas bajo el concepto de Single Page Application.
  
• React: a diferencia de Angular, es una biblioteca de JavaScript centrada en la creación de interfaces de usuario. Se caracteriza por ser simple y eficiente, algo útil para aplicaciones con muchos datos e interacciones. También se basa en componentes como Angular, pero no posee un sistema nativo de rutas ni soporte para estado global, entre otras funcionalidades, lo que significa que necesitaremos utilizar diversas bibliotecas de terceros, como la de navegación en la aplicación.
  
• Vue: es un framework progresivo, es decir, puede ser utilizado tanto para proyectos pequeños como para objetos grandes. Posee características parecidas a las de Angular y React, como basarse en componentes y un sistema nativo de rutas, pero es considerado más fácil para aprendizaje y uso. También soporta JavaScript puro y HTML, lo que constituye una ventaja para desarrolladores sin experiencia con TypeScript (aunque es recomendable usar TypeScript). Siendo así, Vue es un framework que puede ser una óptima opción.

En resumen, Angular es completo y ofrece una serie de recursos para la creación de nuestras aplicaciones web. React es una biblioteca destinada a crear interfaces de usuario eficientes y Vue es un framework progresivo fácil de aprender y de usar, con características similares a Angular y React.

¿Por qué Angular es importante para el mercado laboral?

Angular es uno de los frameworks más populares, muy utilizado para el desarrollo de aplicaciones web. Es común ver que se use Angular en muchas empresas de tecnología de punta como Google, IBM y Microsoft. Además de lo anterior, dominar Angular es una habilidad muy demandada por diversas instituciones.

Otro detalle interesante es que Angular es una de las tecnologías mejor pagadas en el mercado, haciendo de ella una opción atractiva para desarrolladores que buscan crecer profesionalmente.

¿Cómo comenzar un proyecto con Angular?

Para iniciar un proyecto en Angular, necesitamos instalar Node.js y Angular CLI.

Abre la terminal y ejecuta los siguientes comandos:

Para instalar Node.js:

sudo apt-get install nodejs

Para verificar se instaló bien:

node -v

Instalación global de Angular:

npm install -g @angular/cli

Para verificar se instaló bien:

ng -v

Una vez instalado el framework, podemos crear nuestro proyecto con un comando muy simple:

ng new my-new-project

Al ejecutar ese comando, responde Sí a las perguntas que aparecerán en la terminal y escoge el tipo de estilización que usarás. En nuestro caso, elegimos CSS para simplificar.

Entra en la carpeta creada con el comando. Adentro tendrá algunos archivos importantes:

App-routing.module es un módulo específico para configurar rutas, responsable de la navegación entre las páginas o componentes de la app.

App.module es el módulo raíz de la aplicación, responsable de cargar los otros módulos y componentes de la aplicación. Básicamente, se centra en importar y exportar funcionalidades. Contiene la declaración de los componentes, de los serviços y de las directrices utilizadas en el proyecto.

app.component es el componente principal que contiene todos los demás componentes. Se crea automáticamente cuando se inicia un nuevo proyecto Angular y es el punto de partida para la estructura de la aplicación. Es responsable de cargar la plantilla HTML, el estilo CSS para la aplicación y de administrar las interacciones con los componentes secundarios o hijos.

Los otros archivos son responsables del CSS, HTML y de las pruebas automatizadas.

Para ejemplificar lo anterior, haremos una página de login con Angular. Para comenzar, crea un nuevo componente para la página de login con el siguiente comando en el directorio del projeto:

ng generate component login-component

ng generate component dashboard


Al ejecutarse ese comando en tu terminal, se creará una carpeta llamada login-componente y otra con el nombre de dashboard-component, las cuales tendrán una estructura parecida a la de app.module que explicamos anteriormente.

¿Cómo trabajar con rutas en Angular?

La primera parte sería agregar las rutas que usaremos. Añade la ruta de login y la de dashboard ao app-routing.module.ts:

Sustituye el contenido de app.component.html:

Enseguida, importaremos un módulo de formularios del propio Angular:

Después de eso, se hará un formulario simple de login en el archivo html de login-component:

En ese html usamos algunas propiedades de Angular muy importantes como:

o ngIf, o ngModel e o ngSubmit.

NgIf: es una propiedad de Angular que permite mostrar u ocultar un elemento HTML en función de una condición. Se utiliza para mostrar u ocultar algún componente de acuerdo con una lógica específica.

NgModel: se utiliza para vincular el valor de una variable de formulario a una propiedad de componente y actualizar la propiedad de componente cuando cambia el valor de entrada. Cambia el estado del componente.

NgSubmit: es un evento Angular que se activa al enviarse un formulario. Se utiliza para llamar a una función en el componente durante dicho envío.

Por último, podemos modificar login-component.ts:

Este componente es donde usamos su estado para almacenar datos, a través de los cuales accedemos a funciones en el contenido html. Es decir, en él haremos la parte dinámica de nuestro componente.

En el ejemplo anterior, creamos las propiedades para e-mail, password, incorrect y loading. Estas variables se utilizan en nuestro html para verificar la contraseña, identificar la carga de la pantalla y avisar si la contraseña es incorrecta.

El mismo componente también utiliza la función router.navigate, que se encarga de cambiar la ruta a la que accedemos.

Hecho esto, podemos ejecutar nuestro proyecto:

ng serve

o

npm start


Ahora observa tu app, estiliza el CSS, haz pruebas automatizadas y entra al mundo de Angular.

Conclusión

En resumen, Angular es una excelente opción para tus próximos proyectos debido a su arquitectura basada en componentes, funciones avanzadas, comunidad activa y soporte de las principales empresas tecnológicas.

También es una opción inteligente para cualquier desarrollador. Permite la creación de interfaces completas e interactivas, permite la creación de aplicaciones más escalables y fáciles de mantener, además de ofrecer varias herramientas avanzadas.

Hay varias razones para elegir Angular en proyectos futuros. Angular es bastante completo y requiere pocas bibliotecas de terceros, además de tener una estructura de proyecto más organizada, ya que la creación de componentes se puede realizar con un simple comando. A pesar de ser un poco más difícil que otros frameworks, es algo que vale la pena estudiar.

También recordemos que Angular es utilizado por muchas empresas mencionadas anteriormente, por lo que saber usarlo puede hacer la diferencia con los reclutadores. Por lo tanto, recomiendo considerar usar Angular de ahora en adelante.

¡Éxito!