Todos los días, publicamos consejos, trucos o simplemente alguna pieza útil de nuestra experiencia con Angular. Este movimiento fue muy bien recibido y apoyado por la comunidad de desarrolladores.
Decidí escribir un artículo sobre los diez trucos que más me gustaban y explicar los conceptos que se muestran en ellos con más detalle.
¡Empecemos!
¡Tokeniza objetos globales!
El tweet más popular habla de tokens DI de objetos globales.
En la interfaz, estamos acostumbrados al hecho de que hay muchos objetos en el entorno global. Usamos objetos como ventana, documento, método de búsqueda, ubicación y nunca esperamos que existan.
Pero, por ejemplo, en Angular Universal o el entorno de prueba en Jest, no hay navegador, ni objeto de ventana ni DOM. Y al pasar estas entidades a través de la aplicación a través de tokens, nunca tendrá problemas para usarlas, reemplazarlas o probar su código.
Heredar de observable o sujeto
Conozco a muchos desarrolladores que crean buenos servicios en sus aplicaciones. Estos servicios hacen bien una cosa. Y, dado que usamos RxJS en el ecosistema Angular, dichos servicios solo pueden contener un campo con un Observable o Subject dentro de ellos para transformar datos.
Tales situaciones se pueden simplificar heredando servicios de Observable o Subject:
Valor de control como ReplaySubject
Puede haber situaciones en las que sea necesario suscribirse al valueChanges del control reactivo, comenzando el flujo desde su valor actual. Ahora no tiene que reinventar la rueda, simplemente agregue la siguiente envoltura a usted mismo:
Mejorar la aplicación para pantallas de alto DPI
¿Sabía que puede rastrear fácilmente a los usuarios con pantallas de DPI alto?
Además, incluso puede proporcionar elementos multimedia de resolución adecuada para dichos monitores utilizando la etiqueta multimedia nativa y sin esfuerzo adicional:
No te olvides de las tuberías
Las tuberías son una gran herramienta para trabajar en el estilo del marco angular. Nos permiten permanecer declarativos dentro de nuestras plantillas de componentes. Es triste que algunos desarrolladores de Angular eviten crear sus propias tuberías: con ellas puede transformar datos de manera ordenada en casi cualquier situación.
Y aquí hay un ejemplo de una tubería universal para la conversión de datos:
Haz tu caja de banana
Esta característica angular tiene muchos nombres: banana-in-a-box, enlace bidireccional o simplemente entrada-salida. Este enfoque generalmente se encuentra en formularios cuando se trabaja con [(ngModel)]. Pero, ¿sabe cómo implementar esto para sus propios componentes?
RxJS - el mundo desconocido
Siempre trato de verificar todos los parámetros y sobrecargas de los operadores RxJS que uso. Motivo: muchos de ellos tienen opciones ocultas, para aprender a escribir algunas secuencias de forma más rápida y sencilla.
Además, también hay operadores impopulares. Rara vez se encuentran, pero pueden resolver algunos problemas específicos en una línea de código en lugar de un flujo enorme y complicado.
Por ejemplo, uno de estos descubrimientos para mí fue la función de comparación en el operador distintoUntilChanged:
Y también hubo un tweet tan popular sobre RxJS. Un pequeño truco para hacer que sus componentes sean un poco más fáciles de expandir:
O el operador defaultIfEmpty, que le permite agregar lógica útil a la secuencia dentro de una línea de código:
Incluso puede escribir su propia alternativa a ngFor
Y una última cosa: Angular tiene una sintaxis especial para selectores de directivas como para ... de ... Puede usarla para crear su propio ngFor para cualquiera de sus tareas.
Por ejemplo, puede hacer un ngFor rápido para iterar sobre el objeto Map. O un simple para iterar sobre un índice de un número a otro:
Conclusión
Angular es grande y tiene muchas más funciones. Tengo una serie de ideas para nuevos trucos y trucos de nuestras mejores prácticas que planeo compartir con la comunidad. Si estás interesado en nuevos tweets como este, sígueme en Twitter . ¡Y ten un buen día!