Guía de Angular Nivel Medio: Componentes, Servicios, Routing y RxJS por Santiago Soñora

“Hola, mundo” en Angular

En Angular, el 'Hola mundo' típico es generar un nuevo proyecto y ejecutar la aplicación localmente para ver el componente raíz funcionando.

📋 Copiar

ng new hola-mundo --defaults && cd hola-mundo && ng serve -o

Resultado:

Output

✔ Compiled successfully.
✔ Listening at http://localhost:4200/
✅ Browser opened to http://localhost:4200/

Comandos básicos

Familiarizarse con estos comandos es esencial para interactuar eficientemente con Angular:

Crear un nuevo proyecto
📋 Copiar
```
ng new mi-aplicacion --routing --style=scss
```
Inicializa una nueva aplicación Angular, incluyendo la configuración de enrutamiento y seleccionando SCSS para estilos.
Servir el proyecto localmente
📋 Copiar
```
ng serve --open
```
Compila la aplicación y la sirve en http://localhost:4200/, abriendo automáticamente el navegador.
Generar un nuevo componente
📋 Copiar
```
ng generate component nombre-componente
```
Crea un nuevo componente con sus archivos (`.html`, `.scss`, `.ts`, `.spec.ts`) y lo declara en el `NgModule` más cercano.
Generar un nuevo servicio
📋 Copiar
```
ng generate service services/nombre-servicio
```
Crea un nuevo servicio inyectable (`.service.ts`) y lo registra en el módulo raíz o en un módulo específico.
Generar un nuevo módulo
📋 Copiar
```
ng generate module feature/nombre-modulo --routing
```
Crea un nuevo módulo (`.module.ts`) dentro de una carpeta 'feature', incluyendo su propio archivo de configuración de rutas (`.routing.module.ts`).
Generar una Directiva
📋 Copiar
```
ng generate directive directives/nombre-directiva
```
Crea una nueva directiva de atributo o estructural personalizada y la declara en el módulo correspondiente.
Generar un Pipe
📋 Copiar
```
ng generate pipe pipes/nombre-pipe
```
Crea un nuevo pipe personalizado (`.pipe.ts`) para transformar datos en plantillas.
Compilar para producción
📋 Copiar
```
ng build --configuration=production
```
Genera los archivos optimizados para desplegar en producción, aplicando tree-shaking, AOT compilation, minificación, etc.
Ver ayuda del CLI
📋 Copiar
```
ng help
```
Muestra una lista y descripción de todos los comandos disponibles del Angular CLI y sus opciones.
Ejecutar pruebas unitarias
📋 Copiar
```
ng test
```
Ejecuta las pruebas unitarias del proyecto, generalmente usando Karma como test runner y Jasmine como framework de pruebas.
Ejecutar pruebas end-to-end
📋 Copiar
```
ng e2e
```
Ejecuta las pruebas de extremo a extremo del proyecto (requiere un framework configurado como Protractor o Cypress).
Linting y formato de código
📋 Copiar
```
ng lint && ng format
```
Analiza el código para posibles errores o problemas de estilo y formatea el código según las reglas configuradas.
Actualizar Angular y dependencias
📋 Copiar
```
ng update
```
Analiza el `package.json` y recomienda o ejecuta actualizaciones para Angular y otras dependencias compatibles.
Implementar Inyección de Dependencias (conceptual)
📋 Copiar
```
import { MiServicio } from './mi.service';

@Component({
  // ...
})
export class MiComponente {
  constructor(private miServicio: MiServicio) { /* ... */ }
}
```
Demuestra cómo un componente solicita una instancia de `MiServicio` a través de su constructor, delegando su creación a Angular.
Data Binding - Interpolación
📋 Copiar
```
<p>El valor es: {{ miPropiedad }}</p>
```
Muestra el valor de la propiedad `miPropiedad` del componente en la plantilla.
Data Binding - Property Binding
📋 Copiar
```
<button [disabled]="estaDeshabilitado">Enviar</button>
```
Enlaza el estado del atributo `disabled` del botón a la propiedad `estaDeshabilitado` del componente.
Data Binding - Event Binding
📋 Copiar
```
<button (click)="manejarClick($event)">Hacer clic</button>
```
Ejecuta el método `manejarClick` del componente cuando ocurre el evento `click` en el botón, pasando el objeto evento.
Data Binding - Two-Way Binding
📋 Copiar
```
<input [(ngModel)]="valorInput">
```
Permite que el valor del input y la propiedad `valorInput` del componente se sincronicen automáticamente (requiere importar `FormsModule`).

Conceptos Clave

Comprender estos conceptos fundamentales te ayudará a dominar Angular de forma más organizada y eficiente:

Módulos (NgModules):

Angular organiza las aplicaciones en módulos (`NgModule`), que son contenedores lógicos que agrupan componentes, servicios, directivas, pipes y otros módulos. Definen el contexto de compilación y son clave para la modularidad y la carga lazy loading.
Ciclo de Vida de Componentes:

Los componentes pasan por distintas etapas desde su creación hasta su destrucción. Angular provee 'hooks' del ciclo de vida (como `ngOnInit`, `ngOnChanges`, `ngDoCheck`, `ngAfterViewInit`, `ngOnDestroy`) que permiten ejecutar lógica en momentos específicos de la vida del componente.
Data Binding:

El mecanismo por el cual se establece la comunicación y sincronización de datos entre la clase del componente y su plantilla (HTML). Incluye Interpolación, Property Binding, Event Binding y Two-Way Binding, cada uno con una sintaxis y propósito específicos.
Inyección de Dependencias (DI):

Un patrón de diseño fundamental en Angular. Permite que las clases dependan de otras clases (servicios) sin tener que crearlas explícitamente. Angular gestiona la creación y provisión de estas dependencias a través de los Proveedores (Providers), facilitando la modularidad, la mantenibilidad y las pruebas.
Servicios y Proveedores:

Los Servicios son clases singulares (instanciadas una vez por el inyector) que se utilizan para compartir lógica, datos o interactuar con recursos externos (como APIs). Se registran como Proveedores en módulos o componentes para hacerlos disponibles para inyección.
Enrutamiento (Routing):

Permite navegar entre diferentes 'vistas' (componentes) de la aplicación sin realizar una recarga completa de la página, basándose en la URL actual. Se configura a través del `RouterModule`, definiendo rutas y asociándolas a componentes.
Directivas:

Clases que añaden comportamiento a los elementos del DOM. Angular provee directivas estructurales (modifican la estructura del DOM, ej: `*ngIf`, `*ngFor`) y directivas de atributo (modifican la apariencia o comportamiento de un elemento, ej: `[ngClass]`, `[ngStyle]`). También se pueden crear directivas personalizadas.
Pipes:

Son clases que transforman datos directamente en las plantillas para su visualización (ej: formatear fechas, monedas, convertir a mayúsculas). Angular incluye una variedad de pipes incorporados y permite crear pipes personalizados para transformaciones específicas.
Introducción a RxJS y Observables:

RxJS es una biblioteca para manejar flujos de datos asíncronos o basados en eventos utilizando Observables. Angular lo integra fuertemente para manejar respuestas HTTP, eventos del UI, y otros flujos de datos. Comprender los conceptos básicos de Observables, Suscripciones y Operadores es vital.
Formularios (Template Driven y Reactive Forms):

Angular ofrece dos enfoques para construir y gestionar formularios. Template Driven Forms son más declarativos y se manejan principalmente en la plantilla. Reactive Forms ofrecen un control programático mayor, gestionando el formulario y su validación en la clase del componente, siendo más escalables para formularios complejos.

Casos de uso

Algunos ejemplos de aplicaciones prácticas donde se utiliza Angular:

Desarrollo de Single Page Applications (SPAs) empresariales con navegación compleja:

Construir aplicaciones a gran escala con múltiples secciones, autenticación, autorización y navegación avanzada, utilizando el sistema de routing de Angular, incluyendo guardianes de ruta y lazy loading.
Conexión y gestión de datos provenientes de APIs RESTful o GraphQL:

Utilizar el módulo `HttpClient` para realizar peticiones a servicios backend, gestionar las respuestas, manejar errores y presentar los datos en la interfaz de usuario, a menudo combinado con servicios y RxJS.
Implementación de lógica de negocio reutilizable y gestión de estado:

Centralizar la lógica compleja (ej: cálculos, validaciones) en servicios, y gestionar el estado de la aplicación (datos que necesitan ser compartidos entre componentes) utilizando servicios, patrones como BehaviorSubject, o librerías de gestión de estado como NgRx.
Creación de formularios complejos con validación avanzada y dinámica:

Construir formularios robustos utilizando Reactive Forms, implementar validadores síncronos y asíncronos personalizados, y manejar la lógica de los formularios programáticamente.
Desarrollo de componentes de interfaz de usuario personalizados y reutilizables:

Diseñar y construir componentes modulares (botones, tarjetas, modales, tablas) que encapsulen su propia lógica y estilos, facilitando su reutilización en diferentes partes de la aplicación o en otras aplicaciones.
Optimización básica del rendimiento de la aplicación:

Implementar técnicas como la carga lazy loading de módulos (cargar partes de la aplicación solo cuando se necesitan) o componentes, y optimizar las estrategias de detección de cambios para mejorar el tiempo de carga inicial y la fluidez de la aplicación.

Consejos para Principiantes

Aquí tienes algunas recomendaciones para facilitar tus inicios en Angular:

Domina la Inyección de Dependencias (DI):

Es un concepto central. Entiende cómo funcionan los proveedores, los distintos alcances (singleton, por módulo, por componente) y cómo inyectar servicios en constructores. Es clave para la modularidad y las pruebas.
Comprende a Fondo los Tipos de Data Binding:

Aunque parecen simples, entender cuándo usar Interpolación, Property Binding, Event Binding y Two-Way Binding, y cómo fluyen los datos en cada caso, es fundamental para la comunicación entre componente y plantilla.
Familiarízate con RxJS y Observables (conceptos básicos):

No necesitas ser un experto inicialmente, pero entender qué son los Observables, cómo suscribirse a ellos, cómo funcionan los operadores comunes (`map`, `filter`, `tap`) y la importancia de cancelar suscripciones (`unsubscribe`) es vital para manejar la asincronía en Angular.
Utiliza el Angular CLI de Forma Eficiente:

Aprovecha los comandos `ng generate` para ahorrar tiempo y asegurar consistencia. Explora las opciones de `ng serve` y `ng build` para diferentes entornos. El CLI es tu mejor amigo para la productividad.
Aprende a Usar el Debugger del Navegador con TypeScript:

Configura las source maps para poder depurar tu código TypeScript original directamente en las herramientas de desarrollo del navegador. Es mucho más efectivo que solo usar `console.log`.
Entiende el Ciclo de Vida de los Componentes:

Saber en qué momento se ejecutan los hooks como `ngOnInit` (inicialización), `ngOnChanges` (cambios en inputs), `ngDoCheck` (detección manual) y `ngOnDestroy` (limpieza) te ayudará a colocar la lógica de tu componente en el lugar adecuado.
Elige el Enfoque de Formularios Correcto:

Decide si Template Driven o Reactive Forms es mejor para tu caso de uso. Reactive Forms ofrece más control y escalabilidad para formularios complejos, mientras que Template Driven es más rápido para formularios simples.
Estructura tu Aplicación de Forma Lógica con Módulos:

Agrupa componentes, servicios y rutas relacionados en módulos de funcionalidades. Considera la carga lazy loading para mejorar el rendimiento inicial de aplicaciones grandes.

Herramientas relacionadas

Si te interesa Angular, también podrías explorar estas herramientas:

Recursos útiles

Amplía tus conocimientos con estos enlaces y materiales: