Si ya dominas lo básico de Angular y quieres dar el siguiente paso, el Angular avanzado es tu mejor opción. En este nivel no solo aprenderás a trabajar con componentes y directivas, sino que además te sumergirás en conceptos más profundos como rutas dinámicas, almacenamiento en LocalStorage, la evolución de observables hacia señales, peticiones HTTP optimizadas, manejo de caché, scroll infinito y diseño masonry. Todo ello con ejemplos reales y usando la API de Giphy Developers, probando los endpoints con Postman antes de implementarlos en tu proyecto.
La idea es llevar tu aplicación Angular desde algo funcional hasta una app robusta, eficiente y lista para producción. Por lo tanto, en esta guía también haremos hincapié en prácticas de depuración y optimización, para que tu experiencia como desarrollador sea mucho más fluida. Y lo mejor es que cada técnica que verás aquí es aplicable tanto en proyectos personales como en aplicaciones empresariales a gran escala.
Qué significa trabajar con Angular avanzado
Cuando hablamos de Angular avanzado, nos referimos a un conjunto de técnicas que permiten escalar aplicaciones de manera profesional. Ya no basta con saber hacer un binding o crear un servicio básico, sino con diseñar estructuras que soporten un gran número de usuarios, datos y casos de uso diferentes.
Entre los aspectos clave que debes dominar están la modularidad, que te ayuda a dividir la aplicación en bloques reutilizables y fáciles de mantener; la reactividad avanzada, que exige saber cuándo usar observables y cuándo dar el salto a señales; y la persistencia de datos, aprovechando herramientas como LocalStorage o incluso IndexedDB. Además, la optimización del rendimiento se vuelve imprescindible para evitar cargas innecesarias, mientras que la experiencia de usuario debe cuidarse con técnicas modernas como scroll infinito, preservación del estado y diseños responsive tipo masonry.
Rutas dinámicas en Angular avanzado
Las rutas dinámicas permiten que tu aplicación gestione contenido basado en parámetros, lo que resulta indispensable en cualquier aplicación moderna que maneje detalles individuales o categorías. De hecho, son una de las primeras funcionalidades que elevan tu aplicación de un nivel básico a uno avanzado.
Ejemplo en app-routing.module.ts:
const routes: Routes = [
{ path: 'gif/:id', component: GifDetailComponent },
{ path: 'category/:name', component: GifCategoryComponent }
];
Aquí tenemos dos rutas dinámicas: una para ver el detalle de un GIF específico y otra para listar GIFs por categoría. En el componente correspondiente, puedes capturar el parámetro fácilmente con ActivatedRoute:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.paramMap.subscribe(params => {
const gifId = params.get('id');
console.log('ID recibido:', gifId);
});
}
Este patrón evita duplicar componentes y fomenta la reutilización, lo cual es clave cuando tu aplicación comienza a crecer y gestionar distintas vistas.
👉 Más ejemplos puedes encontrarlos en Angular rutas dinámicas y señales: guía práctica con ejemplo real.
Manejo de LocalStorage en Angular
El LocalStorage es una herramienta clave para persistir datos entre sesiones sin necesidad de depender de una base de datos externa. Un ejemplo práctico es guardar el historial de búsquedas de GIFs, lo cual no solo mejora la experiencia del usuario, sino que también agiliza el acceso a resultados previos.
Servicio storage.service.ts:
@Injectable({ providedIn: 'root' })
export class StorageService {
private key = 'gif_history';
save(term: string) {
let history = JSON.parse(localStorage.getItem(this.key) || '[]');
if (!history.includes(term)) {
history.unshift(term);
history = history.slice(0, 10); // máximo 10 términos
localStorage.setItem(this.key, JSON.stringify(history));
}
}
getHistory(): string[] {
return JSON.parse(localStorage.getItem(this.key) || '[]');
}
}
Luego, en tu componente puedes integrarlo de manera sencilla:
constructor(private storage: StorageService) {}
search(term: string) {
this.storage.save(term);
console.log('Historial:', this.storage.getHistory());
}
De esta forma, la aplicación recordará automáticamente lo que el usuario buscó, incluso después de cerrar el navegador, lo cual aporta un valor añadido en términos de usabilidad.
De observables a señales en Angular avanzado
Durante años, los observables han sido la base de la reactividad en Angular. Sin embargo, con la llegada de las señales (signals), la gestión del estado se ha vuelto más directa y menos propensa a errores de memoria derivados de suscripciones no canceladas.
Ejemplo clásico con un observable:
gifs$: Observable<any[]> = this.http.get<any[]>('https://api.giphy.com/v1/gifs/trending');
La misma lógica, usando señales, queda mucho más clara:
import { signal } from '@angular/core';
gifs = signal<any[]>([]);
loadTrending() {
this.http.get<any[]>('https://api.giphy.com/v1/gifs/trending').subscribe(data => {
this.gifs.set(data);
});
}
Como puedes ver, las señales son más intuitivas y reducen la complejidad. Además, permiten una actualización del estado inmediata y fácil de rastrear, lo que resulta especialmente útil en aplicaciones grandes.
Reutilización de componentes
En Angular avanzado, es vital pensar en componentes reutilizables que puedan adaptarse a diferentes escenarios sin tener que duplicar código. Por ejemplo, un GifCardComponent podría usarse en la página principal, en favoritos o incluso en un listado de categorías.
<div class="gif-card">
<img [src]="gif.url" [alt]="gif.title">
<h4>{{ gif.title }}</h4>
</div>
Este tipo de prácticas no solo ahorra tiempo de desarrollo, sino que también mejora la mantenibilidad de la aplicación.
👉 Si quieres profundizar más en este tema, revisa Componentes en Angular: guía completa con ejemplos y buenas prácticas.
Peticiones HTTP en Angular avanzado
Para integrar la API de Giphy, puedes crear un servicio que gestione tanto las búsquedas como los trending GIFs. No obstante, es recomendable probar primero en Postman para entender la estructura de las respuestas antes de implementarlas en Angular.
@Injectable({ providedIn: 'root' })
export class GifService {
private apiUrl = 'https://api.giphy.com/v1/gifs';
private apiKey = 'TU_API_KEY';
constructor(private http: HttpClient) {}
search(term: string) {
return this.http.get(`${this.apiUrl}/search`, {
params: { api_key: this.apiKey, q: term, limit: 20 }
});
}
trending() {
return this.http.get(`${this.apiUrl}/trending`, {
params: { api_key: this.apiKey, limit: 20 }
});
}
}
Además de esto, puedes aplicar interceptores para añadir encabezados o manejar errores de manera centralizada, lo que convierte tu aplicación en un entorno mucho más seguro y controlado.
👉 Aquí tienes la documentación oficial de Giphy Developers.
Manejo de caché en Angular avanzado
El caché evita peticiones innecesarias y mejora significativamente la rapidez de la aplicación. Una estrategia común es almacenar resultados en un Map y devolverlos si ya fueron consultados previamente.
private cache = new Map<string, any>();
search(term: string) {
if (this.cache.has(term)) {
return of(this.cache.get(term));
}
return this.http.get(`${this.apiUrl}/search`, {
params: { api_key: this.apiKey, q: term }
}).pipe(
tap(data => this.cache.set(term, data))
);
}
Con esta técnica, si el usuario busca “cats” varias veces, solo la primera hará la petición real y las siguientes responderán en milisegundos desde la memoria.
Mapeo de información y normalización de datos
La API devuelve muchos campos innecesarios, por lo que resulta útil mapear solo los datos relevantes. Esto no solo reduce el peso de la app, sino que también mejora su mantenibilidad y facilita la integración con el frontend.
mapResponse(response: any) {
return response.data.map((gif: any) => ({
id: gif.id,
url: gif.images.fixed_width.url,
title: gif.title
}));
}
De esta manera, te aseguras de que tu frontend solo maneje lo que realmente necesita y no cargue información redundante.
Preservar el estado del scroll
Con listas largas, es importante que al volver atrás el scroll no se pierda, ya que esto mejora notablemente la experiencia del usuario.
@ViewChild('scrollDiv') scrollDivRef!: ElementRef<HTMLDivElement>;
saveScroll() {
const div = this.scrollDivRef.nativeElement;
localStorage.setItem('scrollTop', div.scrollTop.toString());
}
restoreScroll() {
const div = this.scrollDivRef.nativeElement;
div.scrollTop = Number(localStorage.getItem('scrollTop') || 0);
}
Esto resulta muy útil en listados grandes, como tendencias o favoritos, donde el usuario espera regresar exactamente al mismo punto en el que estaba.
Scroll infinito en Angular
El scroll infinito da una experiencia fluida similar a aplicaciones modernas como Instagram o TikTok. Para implementarlo, puedes escuchar el evento scroll y cargar más elementos automáticamente.
<div #scrollDiv (scroll)="onScroll($event)" class="scroll-container">
<app-gif-card *ngFor="let gif of gifs"></app-gif-card>
</div>
onScroll(event: any) {
const div = event.target;
if (div.scrollTop + div.clientHeight >= div.scrollHeight - 100) {
this.loadMore();
}
}
De esta forma, el usuario nunca tendrá que pulsar un botón de “ver más”, lo que mejora tanto la usabilidad como la retención.
Diseño tipo Masonry
Con CSS Grid puedes crear un layout estilo Pinterest, evitando espacios en blanco y ofreciendo un aspecto más atractivo y profesional.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
Este tipo de diseño es especialmente útil cuando se muestran imágenes de diferentes tamaños, ya que se adaptan de manera visualmente armoniosa.
Depuración en Angular avanzado
Las herramientas clave para depurar en Angular avanzado son varias. Por un lado, Augury permite inspeccionar el estado interno de Angular directamente en el navegador. Por otro, los Source Maps son indispensables para leer errores de TypeScript en su forma original, lo que facilita mucho la corrección de bugs.
Además, usar console.table() en lugar de un simple console.log() permite visualizar arrays y objetos de forma más ordenada. Y no olvidemos que Postman sigue siendo la herramienta número uno para probar APIs antes de integrarlas en el proyecto, ya que ayuda a detectar errores de formato o autorización con rapidez.
👉 Más fundamentos los encontrarás en Conceptos clave de Angular: teoría y ejemplos prácticos para dominar el framework.
Conclusión
Dominar Angular avanzado no se trata solo de programar más, sino de hacerlo con técnicas que permitan crear aplicaciones escalables, rápidas y fáciles de mantener. Hemos visto cómo manejar rutas dinámicas, señales, caché, peticiones HTTP y diseños modernos con scroll infinito y masonry. Además, exploramos cómo preservar estados, reutilizar componentes y depurar de manera efectiva con herramientas especializadas.
En definitiva, este recorrido te da una base sólida para convertirte en un desarrollador de Angular capaz de afrontar proyectos profesionales, aportando valor no solo a nivel técnico, sino también en experiencia de usuario y optimización de recursos.
