Capítulo 004. Adiós a los NgModules

Introducción

Angular ha evolucionado significativamente a lo largo de los años para simplificar el proceso de desarrollo y mejorar la experiencia de los programadores. Uno de los cambios más importantes introducidos en las versiones recientes es la posibilidad de crear aplicaciones sin necesidad de utilizar NgModules, también conocidos como módulos de Angular.

Esta nueva forma de trabajo permite desarrollar aplicaciones más simples, fáciles de entender y con menos configuraciones innecesarias.

¿Qué eran los NgModules?

Durante muchos años, los NgModules constituyeron la base de cualquier aplicación Angular. Un módulo era una estructura encargada de organizar y registrar los distintos elementos que formaban parte de la aplicación.

Dentro de un módulo se declaraban elementos como:

• Componentes.

• Directivas.

• Pipes.

• Servicios.

• Dependencias externas.

Por ejemplo, al crear un nuevo componente era necesario realizar dos pasos:

1. Crear el componente.

2. Registrarlo en un NgModule para que Angular pudiera utilizarlo.

Aunque herramientas como Angular CLI automatizaban gran parte de este proceso, los desarrolladores seguían dependiendo de los módulos para organizar y configurar sus aplicaciones.

Limitaciones de los NgModules

Si bien los módulos permitían estructurar aplicaciones grandes, también añadían cierta complejidad al desarrollo.

Entre las situaciones más comunes se encontraban:

• Tener que declarar manualmente los componentes en un módulo.

• Configurar importaciones adicionales para utilizar determinadas funcionalidades.

• Navegar entre componentes y módulos para comprender cómo estaba organizada la aplicación.

• Incrementar la cantidad de archivos y configuraciones necesarias.

En proyectos grandes, esta dependencia de los módulos podía dificultar la comprensión de la estructura de la aplicación, especialmente para nuevos integrantes del equipo.

La llegada de los Componentes Standalone

Para simplificar el desarrollo, Angular introdujo el concepto de Standalone Components o componentes independientes.

Un componente standalone puede declarar directamente las funcionalidades que necesita sin depender obligatoriamente de un NgModule.

Esto significa que el propio componente puede gestionar sus dependencias, haciendo que el código sea más explícito y fácil de mantener.

Ventajas de los componentes standalone

Trabajar con componentes independientes ofrece varios beneficios:

• Menor complejidad en la configuración del proyecto.

• Reducción de archivos de configuración.

• Mayor claridad sobre las dependencias de cada componente.

• Mejor experiencia para nuevos desarrolladores.

• Facilita la organización y mantenimiento de la aplicación.

• Simplifica la creación de aplicaciones modernas.

En lugar de buscar en distintos módulos para entender de qué depende un componente, la información relevante se encuentra directamente en el propio componente.

¿Han desaparecido los NgModules?

No. Angular continúa ofreciendo soporte para aplicaciones basadas en NgModules.

Esto significa que:

• Las aplicaciones existentes siguen funcionando.

• Es posible crear nuevos proyectos utilizando módulos si se desea.

• Angular mantiene compatibilidad con ambos enfoques.

Sin embargo, el enfoque recomendado para los nuevos desarrollos es el uso de componentes standalone, ya que representan la dirección hacia la que evoluciona la plataforma.

Enfoque utilizado en este curso

A lo largo de este curso trabajaremos utilizando el enfoque moderno de Angular basado en Standalone Components.

Esto nos permitirá:

• Aprovechar las características más recientes de Angular.

• Reducir la complejidad de configuración.

• Construir aplicaciones más limpias y fáciles de entender.

• Aprender las prácticas actualmente recomendadas por la comunidad Angular.

Resumen

Tradicionalmente, Angular dependía de los NgModules como elemento central para organizar una aplicación. Aunque esta arquitectura fue efectiva durante muchos años, también introducía configuraciones adicionales que podían dificultar el mantenimiento y la comprensión del proyecto.

Con la llegada de los Standalone Components, Angular ofrece una alternativa más simple y moderna que reduce la necesidad de utilizar módulos y facilita el desarrollo de aplicaciones. Por esta razón, en este curso se utilizará el enfoque standalone, alineado con las mejores prácticas actuales de Angular.

Capítulo 3. Angular vs AngularJS

 

Introducción

Para comprender Angular en la actualidad, es importante conocer su origen y evolución. Aunque los nombres AngularJS y Angular suelen utilizarse de manera indistinta, en realidad se trata de tecnologías diferentes.

Angular es la evolución de AngularJS y representa una renovación completa de la plataforma, adaptada a las necesidades del desarrollo web moderno.

¿Qué era AngularJS?

En octubre de 2010 se lanzó AngularJS, un framework frontend basado en JavaScript cuyo objetivo principal era facilitar el desarrollo de aplicaciones de página única (Single Page Applications o SPA).

AngularJS introdujo conceptos que resultaron innovadores para su época, entre ellos:

• Arquitectura MVC (Model-View-Controller).

• Enlace bidireccional de datos (Two-Way Data Binding).

• Desarrollo basado en plantillas HTML enriquecidas.

• Inyección de dependencias.

• Separación clara de responsabilidades dentro de la aplicación.

Arquitectura MVC

El patrón Modelo-Vista-Controlador (MVC) permitía dividir la aplicación en tres capas principales:

• Modelo (Model): representa los datos y la lógica de negocio.

• Vista (View): corresponde a la interfaz que ve el usuario.

• Controlador (Controller): actúa como intermediario entre la vista y el modelo.

Este enfoque ayudaba a mantener una estructura organizada y facilitar el mantenimiento del código.

Two-Way Data Binding

Una de las características más populares de AngularJS fue el enlace bidireccional de datos (Two-Way Data Binding).

Gracias a este mecanismo:

• Los cambios realizados en el modelo se reflejaban automáticamente en la interfaz de usuario.

• Las acciones realizadas por el usuario en la interfaz actualizaban automáticamente los datos del modelo.

De esta forma, se reducía considerablemente la cantidad de código necesario para sincronizar la información entre la aplicación y la interfaz gráfica.

Popularidad de AngularJS

AngularJS alcanzó una gran popularidad dentro de la comunidad de desarrollo web y llegó a formar parte del conocido stack tecnológico MEAN, compuesto por:

• MongoDB: base de datos NoSQL.

• Express.js: framework para aplicaciones Node.js.

• AngularJS: framework frontend.

• Node.js: entorno de ejecución para JavaScript en el servidor.

Durante varios años, este conjunto de tecnologías fue ampliamente utilizado para el desarrollo de aplicaciones web completas utilizando JavaScript tanto en el frontend como en el backend.

El nacimiento de Angular

A medida que las aplicaciones web se volvieron más complejas y surgieron nuevos requerimientos de rendimiento, mantenibilidad y escalabilidad, el equipo de AngularJS decidió rediseñar completamente el framework.

En 2014 comenzaron los trabajos para desarrollar la siguiente generación de AngularJS, que posteriormente sería lanzada bajo el nombre de Angular, eliminando el sufijo JS.

Esta nueva versión no fue una simple actualización, sino una reconstrucción completa de la tecnología.

Framework vs Plataforma

Una de las diferencias fundamentales entre AngularJS y Angular es su alcance.

AngularJS: un framework

AngularJS era principalmente un framework enfocado en proporcionar bibliotecas y herramientas para desarrollar aplicaciones web mediante JavaScript.

Su alcance estaba centrado principalmente en el código de la aplicación.

Angular: una plataforma

Angular, por el contrario, se concibe como una plataforma de desarrollo completa.

Además del framework, incorpora herramientas que facilitan diversas etapas del ciclo de vida del software, entre ellas:

• Creación de proyectos.

• Generación automática de componentes.

• Compilación.

• Pruebas automatizadas.

• Optimización para producción.

• Despliegue de aplicaciones.

Un ejemplo de ello es Angular CLI, la herramienta oficial que permite administrar proyectos Angular desde la línea de comandos.

Diferencias arquitectónicas

AngularJS: Controladores

En AngularJS, la lógica de la aplicación se organizaba principalmente mediante controladores (Controllers).

Los controladores gestionaban la interacción entre la vista y los datos de la aplicación.

Angular: Componentes

Angular reemplaza el uso de controladores por una arquitectura basada en componentes.

Un componente encapsula:

• La lógica de negocio.

• La plantilla HTML.

• Los estilos asociados.

• La interacción con otros componentes.

Este enfoque favorece la reutilización de código, la modularidad y el mantenimiento de aplicaciones de gran tamaño.

TypeScript como lenguaje principal

Otra diferencia importante es el uso de TypeScript.

Mientras que AngularJS fue desarrollado principalmente sobre JavaScript, Angular recomienda el uso de TypeScript como lenguaje principal.

TypeScript aporta características avanzadas como:

• Tipado estático.

• Orientación a objetos.

• Interfaces.

• Decoradores.

• Mejor soporte para herramientas de desarrollo.

Estas funcionalidades mejoran la productividad y reducen errores durante el desarrollo de aplicaciones complejas.

Versiones de Angular y AngularJS

Existe una forma sencilla de distinguir ambas tecnologías mediante su numeración de versiones:

AngularJS

Las versiones de AngularJS pertenecen a la rama:

1.x

Por ejemplo:

• AngularJS 1.5

• AngularJS 1.6

• AngularJS 1.7

La última versión oficial de AngularJS fue la 1.7.

Angular

Angular utiliza una numeración independiente que comenzó desde la versión 2:

Angular 2+

Algunas versiones importantes incluyen:

• Angular 2

• Angular 4

• Angular 8

• Angular 12

• Angular 16

• Angular 17

• Angular 18

• Angular 19

Por lo tanto, todas las versiones a partir de Angular 2 pertenecen a la plataforma moderna de Angular.

Compatibilidad entre versiones

Uno de los objetivos del equipo de Angular es mantener una experiencia de actualización sencilla.

Aunque cada nueva versión incorpora mejoras y nuevas características, en general Angular procura mantener la compatibilidad con versiones anteriores siempre que sea posible.

Esto significa que:

• No suele ser necesario reescribir una aplicación completa al actualizarla.

• Los cambios incompatibles tienden a ser limitados y bien documentados.

• Existen herramientas automáticas para facilitar las migraciones.

Angular CLI incluye comandos específicos que ayudan a actualizar proyectos existentes a versiones más recientes de la plataforma.

Estado actual de AngularJS

Actualmente, AngularJS se encuentra descontinuado.

Esto implica que:

• No recibe nuevas funcionalidades.

• No recibe soporte oficial.

• No se corrigen errores ni vulnerabilidades de manera activa.

• No se recomienda para nuevos proyectos.

Las organizaciones que aún utilizan AngularJS suelen planificar migraciones hacia Angular o hacia otras tecnologías modernas para garantizar la mantenibilidad y seguridad de sus aplicaciones.

¿Qué tecnología debería utilizarse hoy?

Para proyectos nuevos, la recomendación es utilizar Angular.

Angular ofrece:

• Arquitectura moderna basada en componentes.

• Mejor rendimiento.

• Herramientas integradas de desarrollo.

• Soporte activo por parte de Google y la comunidad.

• Actualizaciones y mejoras continuas.

AngularJS, aunque fue una tecnología revolucionaria en su momento, ha llegado al final de su ciclo de vida y ya no es una opción adecuada para nuevos desarrollos.

Resumen

AngularJS fue un framework frontend basado en JavaScript que popularizó conceptos como las aplicaciones de página única (SPA), la arquitectura MVC y el enlace bidireccional de datos. Sin embargo, la evolución de las necesidades del desarrollo web impulsó la creación de Angular, una plataforma moderna basada en componentes y TypeScript.

Hoy en día, Angular es la tecnología recomendada para construir aplicaciones web empresariales, escalables y de alto rendimiento, mientras que AngularJS se considera una tecnología heredada y sin soporte oficial.

En el próximo capítulo conoceremos la arquitectura general de Angular y los elementos fundamentales que componen una aplicación moderna desarrollada con esta plataforma.

Capítulo 2. ¿Qué es Angular?

Introducción a Angular

Angular es una plataforma de desarrollo que permite crear aplicaciones web modernas, dinámicas y escalables. Además del desarrollo de aplicaciones web, Angular puede utilizarse para crear aplicaciones móviles y de escritorio mediante la integración con otras tecnologías.

Cuando se afirma que Angular es una plataforma, significa que va más allá de ser únicamente un framework para escribir código. Angular proporciona un conjunto completo de herramientas que facilitan el desarrollo, la organización, las pruebas y la implementación de aplicaciones. Esta característica lo convierte en una solución integral para el desarrollo frontend.

Principales características de Angular

Angular ofrece múltiples funcionalidades listas para usar, lo que permite a los desarrolladores enfocarse en la lógica de negocio sin tener que configurar cada herramienta desde cero.

Entre sus principales características destacan:

• Arquitectura basada en componentes, que facilita la organización y reutilización del código.

• Sistema de enrutamiento (Routing) para la navegación entre páginas o vistas de la aplicación.

• Cliente HTTP integrado para consumir APIs y servicios web.

• Inyección de dependencias, una práctica fundamental de la ingeniería de software que Angular implementa de forma sencilla y eficiente.

• Herramientas para pruebas automatizadas, que ayudan a garantizar la calidad del código.

• Compilación y optimización integradas, permitiendo generar aplicaciones rápidas y eficientes.

Gracias a estas capacidades, Angular proporciona una experiencia de desarrollo estructurada y consistente.

Angular frente a otras alternativas

Una de las diferencias más importantes entre Angular y otras soluciones populares, como React, es su alcance.

Angular es considerado una plataforma completa, ya que incluye todas las herramientas esenciales para el desarrollo de aplicaciones frontend modernas. Por otro lado, React es principalmente una biblioteca de interfaces de usuario, por lo que habitualmente requiere complementarse con herramientas externas para cubrir funcionalidades como el enrutamiento, la gestión de estado o ciertas tareas de configuración.

Esto no implica que una tecnología sea mejor que la otra; simplemente representan enfoques diferentes para el desarrollo de aplicaciones.

Comunidad y popularidad

Angular cuenta con una comunidad de desarrolladores amplia y activa a nivel mundial. Su adopción por parte de organizaciones y equipos de desarrollo de distintos tamaños ha generado una gran cantidad de recursos de aprendizaje, documentación, tutoriales y foros de soporte.

La popularidad de Angular permite que existan:

• Miles de proyectos desarrollados con esta tecnología.

• Una gran cantidad de preguntas y respuestas en plataformas técnicas.

• Bibliotecas y herramientas mantenidas por la comunidad.

• Oportunidades laborales para desarrolladores especializados en Angular.

Aprender Angular representa una inversión sólida debido a su amplia adopción y constante evolución.

Flexibilidad en las herramientas de desarrollo

Angular ofrece libertad para trabajar con diferentes herramientas y entornos de desarrollo.

Por ejemplo, es posible utilizar:

• Visual Studio Code.

• Visual Studio.

• Sublime Text.

• Vim.

• Otros editores de texto compatibles.

Esta flexibilidad es posible gracias a que la herramienta central del ecosistema Angular es Angular CLI (Command Line Interface).

Angular CLI

Angular CLI es la herramienta oficial para la gestión de proyectos Angular. A través de una terminal, permite ejecutar tareas comunes durante el ciclo de vida de una aplicación.

Algunas de sus funciones principales son:

• Crear nuevos proyectos.

• Generar componentes, servicios y otros elementos de la aplicación.

• Compilar el proyecto.

• Ejecutar pruebas automatizadas.

• Publicar versiones para producción.

Angular CLI es multiplataforma y puede utilizarse en:

• Windows

• Linux

• macOS

Esto permite una experiencia de desarrollo consistente independientemente del sistema operativo utilizado.

¿Cuándo utilizar Angular?

Angular es una excelente opción en escenarios como los siguientes:

Equipos que inician un nuevo proyecto frontend

Angular resulta especialmente útil cuando los miembros del equipo no poseen una amplia experiencia en el ecosistema JavaScript. Debido a que proporciona convenciones y herramientas predefinidas, ayuda a mantener una estructura uniforme dentro del proyecto.

Desarrollo de aplicaciones empresariales

Gracias a su arquitectura organizada y a las prácticas recomendadas que promueve, Angular es una alternativa ideal para aplicaciones de gran tamaño y proyectos con múltiples desarrolladores.

Proyectos que requieren escalabilidad

Angular ofrece mecanismos que facilitan el mantenimiento y crecimiento de la aplicación a lo largo del tiempo, permitiendo gestionar proyectos complejos de manera eficiente.

Angular como Opinionated Framework

Angular es considerado un Opinionated Framework, lo que significa que promueve una forma específica de organizar y desarrollar aplicaciones.

En lugar de dejar todas las decisiones al desarrollador, Angular propone:

• Una estructura de proyecto estándar.

• Herramientas recomendadas.

• Patrones de diseño predefinidos.

• Buenas prácticas ampliamente aceptadas por la comunidad.

Esto contribuye a que los proyectos sean más consistentes y fáciles de mantener, especialmente cuando participan varios desarrolladores.

Es importante destacar que Angular no obliga a utilizar todas sus recomendaciones, pero sí incentiva el uso de aquellas que han demostrado ser efectivas en proyectos reales.

Rendimiento

Angular permite desarrollar aplicaciones grandes y complejas con un alto nivel de rendimiento.

Mediante técnicas de optimización, compilación avanzada y carga eficiente de recursos, es posible construir aplicaciones rápidas y ligeras, siempre que se apliquen correctamente las buenas prácticas de desarrollo.

Evolución de Angular

Angular no siempre tuvo el nombre que conocemos actualmente. Su historia comenzó con AngularJS, una tecnología que marcó una etapa importante en la evolución del desarrollo web frontend.

Aunque Angular y AngularJS comparten parte de su origen, se trata de tecnologías diferentes con arquitecturas y enfoques distintos.

Resumen

Angular es una plataforma completa para el desarrollo de aplicaciones frontend que proporciona herramientas integradas para la construcción, organización, prueba y despliegue de aplicaciones modernas. Gracias a su arquitectura basada en componentes, su potente CLI y su enfoque estructurado, Angular se ha convertido en una de las tecnologías más utilizadas para el desarrollo de aplicaciones empresariales y de gran escala.

En el próximo capítulo analizaremos las diferencias entre Angular y AngularJS, así como la evolución que llevó al framework a su arquitectura actual.