Poniéndose cómodo con Angular y UI

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

Un masterclass tanto para principiantes en UI como en Angular. Vamos a descargar la aplicación Tour of Heroes (escrita por John Papa y encontrada en la documentación de Angular) y darle una mejora en la interfaz de usuario. Todo lo que necesitarás es una computadora portátil y tu conjunto de datos favorito (el mío, por supuesto, serán ponis).

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

El componente Skeleton de Kendo UI es un componente que sirve como un indicador de carga para ciertos elementos o componentes, mostrando un esqueleto del contenido que se está cargando. Ofrece formas como texto, círculo y rectángulo, y permite personalizar las animaciones entre pulso y onda.

Para personalizar la navegación inferior en Kendo UI, puedes modificar los estilos CSS predeterminados, como el color de fondo, el estado activo y el estado al pasar el mouse. Los cambios en los estilos se realizan a través de selectores CSS específicos dentro de los archivos de estilo del proyecto.

La navegación inferior en Kendo UI se puede integrar con el enrutador de Angular al pasar los elementos de navegación como rutas definidas en Angular. Se pueden especificar los iconos y textos para cada ruta y vincularlos directamente con la navegación inferior para una interacción efectiva.

El componente de tarjeta en Kendo UI se utiliza para mostrar información en una forma organizada y visualmente atractiva. Es útil para resumir información detallada en tarjetas que pueden incluir imágenes, listas, botones y otros elementos interactivos.

En una aplicación de Angular, el conjunto de datos puede ser modificado manipulando los servicios que gestionan los datos. Por ejemplo, en el Tour de Héroes, se puede cambiar la lista de héroes modificando el archivo que simula la base de datos dentro del servicio que maneja los datos de los héroes.

Alyssa Nicoll
Alyssa Nicoll
149 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass cubrió varios temas como la configuración del entorno de desarrollo, solución de problemas y depuración, uso de Angular y Kendo UI, personalización de estilos y trabajo con variables SCSS. El orador enfatizó la importancia de un código limpio y proporcionó consejos para mejorar el rendimiento de la aplicación. También se discutió el uso del componente skeleton para indicadores de carga y el componente de navegación inferior para la navegación. En general, el masterclass proporcionó conocimientos prácticos sobre desarrollo de software e ingeniería.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Comienza con AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Comienza con AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.
Contenido:- comenzando e instalando AG Grid- configurando ordenamiento, filtrado, paginación- cargando datos en la cuadrícula- la API de la cuadrícula- agregar tus propios componentes a la cuadrícula para representación y edición- capacidades de la edición de la comunidad gratuita de AG Grid
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
Pruebas unitarias en aplicaciones Angular
TestJS Summit 2022TestJS Summit 2022
24 min
Pruebas unitarias en aplicaciones Angular
This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.
Renacimiento de Angular
JSNation 2024JSNation 2024
29 min
Renacimiento de Angular
Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.
El estado de Angular
JSNation Live 2020JSNation Live 2020
36 min
El estado de Angular
This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.
¿Qué dice Angular? 🦊
JSNation Live 2020JSNation Live 2020
8 min
¿Qué dice Angular? 🦊
Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.