Introducción
Las aplicaciones Angular están compuestas por diversos elementos que trabajan conjuntamente para ofrecer una experiencia de usuario dinámica, organizada y fácil de mantener. Comprender estos elementos es fundamental para desarrollar aplicaciones modernas siguiendo las mejores prácticas de la plataforma.
En las versiones actuales de Angular, especialmente cuando se trabaja con el enfoque standalone, los componentes se convierten en el eje principal de la aplicación, eliminando la dependencia de los tradicionales NgModules.
Los elementos más importantes que encontraremos en una aplicación Angular son:
Componentes (Components)
Directivas (Directives)
Pipes
Servicios (Services)
Ruteo (Routing)
En este capítulo revisaremos la función de cada uno de ellos y cómo contribuyen al funcionamiento de una aplicación Angular.
Componentes
Los componentes constituyen la unidad fundamental de construcción en Angular. Representan las distintas partes visuales de la aplicación con las que el usuario puede interactuar.
Toda aplicación Angular contiene al menos un componente, conocido como componente raíz (Root Component), a partir del cual se estructura el resto de la aplicación.
¿Qué es un componente?
Un componente es una clase de TypeScript decorada con el decorador @Component, que permite a Angular reconocerla como un componente válido.
Cada componente está formado por:
Una clase que contiene la lógica de negocio y los datos.
Una plantilla HTML (template) que define la interfaz visual.
Opcionalmente, un archivo de estilos CSS, SCSS o similar.
Responsabilidades de un componente
Dentro de un componente podemos:
Definir variables que contienen datos.
Implementar métodos o funciones.
Gestionar eventos generados por el usuario.
Controlar la información mostrada en la interfaz.
Event Binding
El Event Binding permite ejecutar código cuando ocurre una acción por parte del usuario.
Por ejemplo:
Hacer clic en un botón.
Escribir en un campo de texto.
Seleccionar una opción de una lista.
Cuando se produce el evento, Angular ejecuta un método definido dentro del componente.
Property Binding
El Property Binding permite enviar información desde la clase del componente hacia la plantilla HTML.
Gracias a esta funcionalidad, es posible mostrar dinámicamente datos almacenados en variables o resultados obtenidos mediante cálculos realizados en el componente.
De esta forma, la interfaz se mantiene sincronizada con el estado de la aplicación.
Directivas
Las directivas son instrucciones que permiten modificar la apariencia o el comportamiento de los elementos HTML.
Una forma sencilla de entenderlas es pensar que las directivas amplían las capacidades nativas de HTML, agregando funcionalidades específicas proporcionadas por Angular.
Tipos de directivas
Angular clasifica las directivas en tres categorías principales:
1. Componentes
Los componentes son, técnicamente, un tipo especial de directiva.
Además de modificar el comportamiento, incluyen una plantilla HTML propia y representan una porción completa de la interfaz de usuario.
2. Directivas estructurales
Las directivas estructurales modifican la estructura del DOM (Document Object Model).
Estas directivas pueden:
Agregar elementos.
Eliminar elementos.
Reemplazar elementos existentes.
Un ejemplo clásico es *ngIf, que permite mostrar u ocultar contenido en función de una condición.
Por ejemplo:
Mostrar un mensaje únicamente cuando el usuario haya iniciado sesión.
Ocultar determinada información si no existen datos disponibles.
3. Directivas de atributo
Las directivas de atributo modifican la apariencia o el comportamiento de elementos ya existentes.
No alteran la estructura del DOM, sino que cambian características de los elementos sobre los que se aplican.
Un ejemplo común es ngClass, que permite agregar o eliminar clases CSS dinámicamente según determinadas condiciones.
Esto resulta especialmente útil para:
Resaltar errores de validación.
Aplicar estilos condicionales.
Modificar la apariencia según el estado de la aplicación.
Pipes
Los Pipes permiten transformar datos antes de mostrarlos al usuario.
Su objetivo principal es presentar la información en un formato más adecuado o fácil de interpretar.
Casos de uso comunes
Los pipes pueden utilizarse para:
Formatear fechas.
Formatear monedas.
Convertir texto a mayúsculas o minúsculas.
Mostrar porcentajes.
Transformar valores personalizados.
Por ejemplo, una fecha almacenada en formato técnico puede mostrarse en un formato más amigable para el usuario final.
Este mecanismo ayuda a separar la lógica de presentación de la lógica de negocio.
Servicios
Los servicios se utilizan para encapsular lógica o datos que no pertenecen específicamente a un componente.
Su principal objetivo es promover la reutilización de código y mantener la aplicación organizada.
¿Por qué utilizar servicios?
Cuando una funcionalidad debe ser utilizada por varios componentes, no resulta conveniente duplicar el mismo código en cada uno de ellos.
En lugar de eso, se crea un servicio que centraliza dicha funcionalidad.
Posteriormente, los componentes que necesiten utilizarla pueden acceder al servicio mediante el sistema de inyección de dependencias de Angular.
Ejemplos de uso
Los servicios suelen utilizarse para:
Consumir APIs REST.
Compartir información entre componentes.
Gestionar autenticación y autorización.
Implementar reglas de negocio.
Centralizar operaciones de acceso a datos.
Este enfoque mejora considerablemente la mantenibilidad de la aplicación y reduce la duplicidad de código.
Ruteo
El ruteo (Routing) es el mecanismo que permite la navegación dentro de una aplicación Angular.
Gracias al sistema de rutas, Angular puede determinar qué vista o componente debe mostrarse basándose en la URL actual del navegador.
¿Cómo funciona?
Cuando el usuario accede a una dirección específica, Angular analiza la ruta y muestra el componente correspondiente.
Por ejemplo:
/inicio → Página principal.
/productos → Catálogo de productos.
/contacto → Página de contacto.
Aunque para el usuario parece que navega entre distintas páginas, internamente Angular suele reemplazar u ocultar componentes dentro de una única aplicación cargada en el navegador.
Esta característica es la base de las aplicaciones conocidas como Single Page Applications (SPA).
Beneficios del ruteo
El sistema de ruteo proporciona varias ventajas:
Navegación fluida entre vistas.
URLs amigables y compartibles.
Compatibilidad con los botones Atrás y Adelante del navegador.
Soporte para parámetros de ruta.
Soporte para query strings.
Carga dinámica de componentes y módulos.
Todo ello contribuye a una experiencia de usuario más intuitiva y profesional.
Resumen
Una aplicación Angular Standalone se construye alrededor de varios elementos fundamentales:
Los componentes representan la interfaz de usuario y contienen la lógica asociada a cada vista.
Las directivas amplían las capacidades de HTML y permiten modificar la estructura o comportamiento de los elementos.
Los pipes transforman datos para presentarlos de forma más amigable.
Los servicios encapsulan lógica reutilizable y facilitan el intercambio de información entre componentes.
El ruteo permite implementar la navegación dentro de la aplicación y controlar qué contenido se muestra según la URL.
Dominar estos elementos es esencial para desarrollar aplicaciones Angular modernas, organizadas y fáciles de mantener. En los próximos capítulos profundizaremos en cada uno de ellos y aprenderemos a crear nuestras propias implementaciones para resolver necesidades reales de negocio.
