Claves para entender Angular | Qué es y cómo se utiliza

portada claves para entender angular

Índice FrameworksSPAsVersiones d​​​​​e AngularLo que debes saber antes de empezar con AngularCómo empezar a usar Angular – Primeros pasosCómo editar un proyecto con AngularOrganización de un componenteContenido estático vs. contenido dinámicoAngular en la consola de las developer toolsCódigo dinámicoExtra: cómo añadir Bootstrap a un proyecto de AngularPracticar lo aprendido Angular es un framework creado por Google que … Leer más Claves para entender Angular | Qué es y cómo se utiliza

Ejercicio con componentes, data binding y encapsulation

portada coding challenge componentes

Índice ¿De qué va esto?InstruccionesPaso 1: Inicio y creación de los componentes de nuestra appPaso 2: Creación y ubicación de los botonesPaso 3: Creación y emisión de un custom eventPaso 4: Escuchando nuestro evento desde fuera de su componentePaso 5: Pausando el juegoPaso 6: Mostrar un componente u otro (EvenComponent o OddComponent) según la naturaleza del … Leer más Ejercicio con componentes, data binding y encapsulation

Uso avanzado de los componentes en Angular | Parte #3

portada componentes uso avanzado

Índice Ciclo de vida de un componente (aka component lifecycle)Lifecycle hooks en acciónngOnInitngOnChangesngDoCheck​AfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewCheckedngOnDestroyAccediendo a la template de un componente en distintas fases de su ciclo de vidaAccediendo al contenido proyectado mediante ngContent a través de @ContentChildMás recursos de aprendizaje Retomamos esta saga sobre el uso avanzado de componentes en Angular. Aquí tienes las partes #1 y #2 si te las … Leer más Uso avanzado de los componentes en Angular | Parte #3

Uso avanzado de los componentes en Angular | Parte #1

portada componentes uso avanzado

Índice Estado inicial de nuestra demoDividiendo el código en componentesPasando información del parent component al child component mediante property binding y el decorador @Input()Asignando un alias a una propiedadPasando información del child component al parent component mediante la emisión de nuestros propios eventos y el decorador @Output()Asignando un alias a custom eventsConclusión de esta primera parte Los componentes son el núcleo duro de Angular, elementos re-utilizables a lo … Leer más Uso avanzado de los componentes en Angular | Parte #1

Cómo gestionar errores de código en un proyecto de Angular

portada debugging en angular

Índice Herramienta #1: Consola (developer tools) de chromeError típico nº1Herramienta #2: SourcemapsHerramienta #3: Augury Herramienta #1: Consola (developer tools) de chromeAngular, a través de la consola de las dev tools de Chrome, se encarga de mandarnos mensajes de alerta cada vez que existe algún tipo de error en nuestro código. Entender estos mensajes es vital para poder … Leer más Cómo gestionar errores de código en un proyecto de Angular

Guía de iniciación al data binding en Angular

data binding poster

Índice ¿Qué es el databinding?Ejemplo para nuestra demoTipos de databindingString interpolationProperty binding¿Cómo saber cuándo usar string interpolation y cuándo property binding?Event bindingUso de la palabra clave $eventTwo way data bindingMás recursos de aprendizaje ¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos traducir el databinding como «comunicación» entre nuestro … Leer más Guía de iniciación al data binding en Angular

Cómo solucionar problemas comunes del Angular CLI

angular cli tips and tricks

Índice ProblemaSolución paso por pasoMás recursos de aprendizaje Problema¿Te ha pasado alguna vez que, al intentar escribir un comando del Angular CLI, a sabiendas de que lo tienes instalado, te ha dado este error? C:\Users\User\workspace\my-first-app (master -> origin) λ ng version ‘ng’ is not recognized as an internal or external command, operable program or batch … Leer más Cómo solucionar problemas comunes del Angular CLI

Entendiendo los componentes en Angular | Guía de iniciación

componentes en angular

Índice IntroducciónEditando nuestra appCómo crear un componenteEntendiendo el papel del AppModuleCómo usar nuestro componenteCreación automática de componentesAnidando componentesAñadiendo CSS a un componente con el apoyo de BootstrapDiferentes formas de usar el selectorMás recursos de aprendizaje TEN EN CUENTA QUE…En este artículo vamos a estudiar a fondo un pilar básico de Angular: los componentes. Si acabas … Leer más Entendiendo los componentes en Angular | Guía de iniciación

Angular: Entendiendo la Directiva ngModel

ngModel

Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas en las que podemos conseguir esto es utilizando la directiva ngModel. Para este ejemplo vamos a trabajar directamente en nuestro AppComponent.1. Borramos todo el contenido del archivo app.component.html y añadimos un sencillo input y un párrafo, al que le pasamos … Leer más Angular: Entendiendo la Directiva ngModel

Construye Minioland: Tu primera aplicación con Angular | Parte #3

construye minioland

Índice Tuneando los parámetros del MinionComponent para mostrar una página individual por cada minionDando forma al template del MinionComponentCreando un buscador de minionsCreando la pantalla de nuestros resultados de búsquedaConfigurando la parte visual del BrowserComponentAplicando el DRY principle usando la lógica del componente padre y el componente hijoAplicación de nuestro nuevo componente MinionCardComponent a otros componentesUtilizando @Output para comunicarnos entre el child … Leer más Construye Minioland: Tu primera aplicación con Angular | Parte #3

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar