Has buscado angular - Adictos al trabajo

Introducción a Angular en momentos de cambio

Joan Morató Contreras 3 junio, 2024

1. Introducción Angular está en un momento de cambio. Desde hace algunas versiones se están introduciendo muchos cambios. Mientras escribía este artículo ha salido la versión 18. Quien ya tenga las bases de Angular puede ir asumiendo todos los cambios poco a poco mientras van saliendo. Pero a quien le toque aprender Angular desde cero se le puede hacer un poco difícil entender bien cuál es la manera correcta de hacer las cosas. Personalmente, me tocó aprender Angular cuando justo había salido la versión 17 y me encontré con varias formas para hacer “lo mismo”. En la documentación está todo explicado, pero, para empezar de cero, la cantidad de información puede llegar a abrumar. Desde mi punto de vista, alguien que se introduce hoy a Angular necesita indagar mucho en la documentación, leer el blog de Angular e incluso leer/ver otros tutoriales para entender bien como se recomienda hacer las

Componentes UI en Angular: botón, modal, input

Joan Morató Contreras 8 mayo, 2024

En este tutorial mostraré ejemplos de como implementar 3 componentes UI en Angular. 3 componentes muy comunes en cualquier aplicación web: un botón, una modal y un input. Para los 3 utilizaré la encapsulación de estilos que proporciona Angular. De esta forma, los componentes serán autocontenidos y podremos usarlos sin depender de otras características externas (a excepción de algún reset o algunas custom properties globales de CSS que se puedan añadir al proyecto). Índice Introducción Botón Opción 1 Opción 2 Modal Input Conclusión Referencias Introducción En el desarrollo front-end hay muchas librerías de componentes UI para poder utilizar en nuestros proyectos. Algunos ejemplos para Angular pueden ser: Material, PrimeNG, NgBootstrap o NgAntDesign. Pero muchas veces nos encontramos en proyectos en los que el diseño propio es fundamental para la marca y no podemos usar estas librerías, ya que sobrecargar los estilos para conseguir el diseño requerido es complicado. En estos

Road to Angular Next: Creación proyecto Angular 17

César Alberca 25 abril, 2024

En este artículo, exploraremos la creación de cero de un proyecto de Angular con SSR y veremos qué configuraciones nuevas nos trae. En el siguiente tutorial veremos cómo mejorar la configuración por defecto y añadir otras herramientas de desarrollo. Creación proyecto El primer paso va a ser crear un proyecto de Angular de cero, usando el siguiente comando: npm init @angular ng-future Marcamos la opción “Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)”, que ya está lista para entornos productivos. Con la opción SSR habilitada Angular creará dos entornos de ejecución: cliente y servidor. La parte novedosa es que ya está integrado totalmente dentro del CLI de Angular. Con el SSR se mejora el performance y otras métricas importantes sin tener que instalar el paquete de Angular Universal, que este quedaría deprecado. Estructura del proyecto Si indagamos en la estructura de proyecto veremos que ha creado una serie de ficheros

Introducción a Signals en Angular 16

Rubén Yáñez Agelán 23 junio, 2023

Índice de contenidos Introducción ¿Cómo funciona la detección de cambios ahora mismo en Angular? ¿Qué son los Signals? ¿Cómo nos ayudan los Signals en todo esto? ¿Cómo se crea un Signal? Pero, ¿y esto nos es lo mismo que un BehaviorSubject? Conclusión Introducción Mi intención con este tutorial es hacer una pequeña introducción a los Signals y darte el conocimiento básico sobre este nuevo primitivo reactivo que ha lanzado Angular en la versión 16. ¿Cómo funciona la detección de cambios ahora mismo en Angular? Hasta ahora la detección de cambios automática en Angular se hacía mediante ZoneJs. ZoneJs es una librería que proporciona zonas que son capaces de capturar actividades dentro de nuestra aplicación, es decir, cuando se produce una cambio en nuestra aplicación (una operación asíncrona, un evento del dom, etc.) es detectado por ZoneJs y este activa la detección de cambios de Angular, es entonces cuando Angular recorre

El Juego de la Vida con Angular, React y TypeScript

Arturo Rodríguez Romero 30 abril, 2020

Puedes ver todos los tutoriales del Juego de la vida aquí: Tutoriales Juego de la vida. ¿Cuáles son las reglas del juego? El juego consiste en una cuadrícula de células. Cada célula tiene 8 vecinos, en el lateral, vertical y diagonales. Las células siguen ciertas normas: Si la célula está viva: Y tiene menos de dos vecinos vivos -> Muere Y tiene dos o tres vecinos vivos -> Vive Y tiene más de tres vecinos vivos -> Muere Si la célula está muerta: Y tiene tres vecinos vivos -> Nace Estas sencillas reglas, en combinación, pueden crear mecánicas muy complejas. Análisis He decidido separar la lógica del juego de la lógica de presentación. Esto permite reutilizar el código del juego en Angular y React. Implementación en TypeScript En esta implementación se almacenan las células en un array de una dimensión. Con la ventaja de que es una forma más sencilla

Implementando un registro remoto de logs con Angular

Viktor Yordanov Ivanov 11 junio, 2019

Si estás desarrollando una aplicación con Angular y quieres hacer un registro remoto de los logs para que sean explotados por un sistema BELK, este es tu tutorial.

Instagram infinite scroll example Angular

Cómo implementar infinite scroll en Angular

Urbano Villanueva Rodríguez 30 mayo, 2019

El llamado infinite scroll en Angular (y en cualquier otro ámbito/lenguaje) hace referencia a poder deslizarnos por una ventana, generalmente hacia abajo, sin necesidad de interactuar con elementos de paginación y navegación. Es muy utilizado, por ejemplo, en redes sociales como Twitter o Instagram, donde se observa claramente que el contenido se va cargando mientras deslizamos hacia abajo de forma infinita (de ahí su nombre). Para este tutorial se necesitan ciertos conceptos sobre Angular de base. Si no sabes, te recomiendo estos artículos con los que puedes aprender mucho sobre este framework. Ventajas y desventajas Este sistema es ampliamente utilizado porque su mayor ventaja es, desde luego, que mejora mucho la facilidad de navegación y la experiencia de usuario en cualquier aplicación. Sin este método, sería mandatorio utilizar siempre botones de navegación. Para lo que habría que bajar al fondo de la página, hacer click en siguiente o en la

Resultados de búsqueda