La última versión de Angular se lanzó en noviembre. Minko Gechev resume las novedades más importantes en su anuncio de lanzamiento.

En este artículo, comparto recursos que te enseñarán cómo funcionan estas nuevas características de Angular:

• API independientes (ahora son estables)
• API independiente que se puede sacudir en el árbol del enrutador y protectores de enrutador funcionales
• HttpClient Tree-shakable API independiente
• API de composición de directivas
• directiva de imagen

API independientes

El equipo de Angular introdujo las API independientes en Angular v14 como una función de vista previa para desarrolladores. En Angular v15, ya no se encuentran en la vista previa para desarrolladores ni forman parte de la superficie API estable.

Los componentes, las directivas y las tuberías ahora se pueden marcar como independientes: verdadero. Las clases angulares marcadas como independientes no necesitan declararse en un NgModule.

La guía "Introducción a los componentes independientes" en la documentación de Angular explica cómo crear y utilizar componentes independientes.

API independiente que se puede sacudir en el árbol del enrutador y protectores de enrutador funcionales

Andrew Scott explica cómo podemos crear enrutadores sin RouterModuley cómo usar protectores de enrutadores funcionales:

Para conocer detalles adicionales sobre cómo reducir el tamaño del paquete con enrutadores y componentes independientes, lea el artículo de Kevin Kreuzer :

HttpClient Tree-shakable API independiente

Ahora podemos usar la API de cliente HTTP sin el HttpClientModule. Netanel Basal nos muestra cómo aplicar esta nueva función y demuestra cómo podemos definir interceptores en módulos con carga diferida:

API de composición de directivas

De la documentación oficial:

Las directivas angulares ofrecen una excelente manera de encapsular comportamientos reutilizables: las directivas pueden aplicar atributos, clases CSS y detectores de eventos a un elemento.

La API de composición de directivas le permite aplicar directivas al elemento host de un componente desde dentro del componente.

Cédric Exbrayat explica por qué necesitamos esta nueva API:

Henrique Custódia ilustra con un gran ejemplo cómo funciona la API de composición de directivas:

Angular 15: uso de la API de composición de directivas

directiva de imagen

La guía "Introducción a NgOptimizedImage" en la documentación de Angular explica cómo la nueva NgOptimizedImagedirectiva independiente nos ayuda a adoptar las mejores prácticas de optimización del rendimiento para cargar imágenes.

Fábio Englert Moutinho prueba la NgOptimizedImagedirectiva en una aplicación de comercio electrónico de ejemplo y logra hasta un 50 % mejores puntajes de Lighthouse:

➕ ¿Has visto otros recursos que debería agregar a esta Guía de estudio de Angular 15? ¡Por favor envíemelo para que pueda incluirlo en el artículo!

‍Sobre el autor

Mi nombre es Gergely Szerovay , trabajo como líder del capítulo de desarrollo frontend. Enseñar (y aprender) Angular es una de mis pasiones. Consumo contenido relacionado con Angular a diario: artículos, podcasts, conferencias, lo que sea.

Si está interesado en mi colección mensual de excelentes recursos de Angular, suscríbase a mi publicación llamada Adictos a Angular. Puede leer los números anteriores aquí .

Y si ha visto un buen artículo, tweet u otro recurso relacionado con Angular últimamente, hágamelo saber aquí en los comentarios o envíeme un DM en Twitter . ¡Podría presentarlo en el próximo número de Angular Addicts!

Además, hágame saber qué otros temas de Angular le interesan, tengo muchos borradores de artículos aquí en Medium esperando ser publicados.

¡Sígueme en Medium , Twitter o LinkedIn para obtener más información sobre Angular!