Componentes en Angular - 101 (principiantes)
4.4 (58 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,261 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Componentes en Angular - 101 (principiantes) to your Wishlist.

Add to Wishlist

Componentes en Angular - 101 (principiantes)

Intro a los componentes de Angular 2 y 4 por learning-by-doing: aprende bindings, eventos, template ref. variables y más
4.4 (58 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,261 students enrolled
Created by Enrique Oriol
Last updated 7/2017
Spanish
Price: Free
Includes:
  • 31 mins on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear componentes con mayor facilidad
  • Añadir inputs a los componentes
  • Añadir outputs (eventos) a los componentes
  • Personalizar los estilos del propio componente
  • Aprovechar el ciclo de vida de los componentes
  • Llamar a métodos de componentes hijos
  • Entender que son las "template reference variables"
View Curriculum
Requirements
  • Conocimientos básicos de Angular 2 o 4 (haber hecho uno o dos tutoriales)
  • Conocimientos básicos de Javascript ES6 (clases y arrow functions)
  • Conocimientos básicos de TypeScript
  • Conocimientos básicos de programación web (HTML, CSS y JS)
  • Uso básico de GIT
Description

Ponte al día con los componentes de Angular (Angular v4, válido también para Angular v2).

Refresca los conceptos básicos creando 2 componentes desde cero. En pocos vídeos te pondrás al día para enfrentarte a una entrevista de trabajo o para poder afrontar cursos más avanzados.

Este microcurso está orientado a repasar los fundamentos de los componentes de Angular. A través de los vídeos y siguiendo una metodología learning-by-doing, aprenderás a usar:

  • El Decorador Component
  • El Decorador Input y property binding
  • El Decorador Output
  • Los EventEmitter y los Event Bindings
  • Cómo aplicar estilos a tu componente (selector de pseudo-clase :host)
  • Cómo llamar métodos de componentes hijos
  • Cómo usar las Template Reference Variables
  • Entender los eventos del ciclo de vida del componente

Este curso te servirá como punto de partida para entender mejor el funcionamiento de una de las piezas fundamentales de Angular: los componentes. A partir de aquí te será más fácil profundizar en el aprendizaje a través de otros cursos o material online disponible.

Los requisitos para tomar este curso es que tengas unas nociones básicas de Angular (Angular 2 o Angular), dado que hay conceptos muy básicos que se dan por entendidos. Eso incluye también nociones elementales de ES6, Typescript, HTML y CSS.

Si has hecho un par de tutoriales en Angular 2, deberías estar preparado para hacer este curso.

Who is the target audience?
  • Principiantes en Angular que quieran entender los principios de los componentes
Students Who Viewed This Course Also Viewed
Curriculum For This Course
+
Intro
2 Lectures 01:20

Bienvenido a Componentes en Angular 101. A lo largo de este curso vas a aprender  a usar los elementos básicos que conforman los componentes en Angular.

Decoradores @Input y @Output, Event emitters, ciclo de vida del componente, como añadir estilos al propio componente… En los próximos vídeos aprenderás todos estos conceptos, y alguno más ;)

Introducción
00:53

Código fuente e instalación
00:27
+
Componentes Angular 101
9 Lectures 30:05

Repasarás brevemente la estructura de una app en Angular 2 / 4 y aprenderás qué es el decorador @Component de Angular y la estructura que tienen los componentes en esta plataforma.

1 - Decorador component
02:42

Crearás tu primer componente en Angular, al más puro estilo "hello world".

2 - Nuevo componente
02:10

Crearás un componente que será una barra de progreso

Además, en el camino aprenderás a aplicar estilos a tu propio componente sin necesidad de envolverlo en otro elemento, gracias al selector :host.

3 - Progress bar component: Estilo del componente (:host)
02:28

Completarás tu componente "progress bar" aprendiendo a recibir valores de entrada (inputs) desde fuera, gracias al decorador @Input

También aprenderás como asociar esos inputs de los componentes a datos variables, para que que el input se actualice de forma automática al actualizar la variable. Esto es lo que se conoce como property binding.

4 - Decorador @Input y property bindings
02:00

Crearás otro componente Angular que será capaz de realizar una cuenta atrás.

También aprenderás como funcionan los eventos de ciclo de vida de los componentes Angular, como en evento ngOnInit, que se llama tras iniciar el componente.

5 - Countdown component: ciclo de vida OnInit
05:36

Aprenderás a sacar valores desde un componente hacia afuera, emitiendo eventos, lo que en Angular se conoce como event binding.

En el proceso, conocerás cómo funciona el decorador @Output y aprenderás a usar la clase EventEmitter.

6 - Decorador @Output, EventEmitter e event bindings
05:14

Aprenderás cómo llamar a métodos y propiedades de un componente hijo desde el padre gracias a las template reference variables.

7 - Usando métodos de componentes hijos vía template ref. variable
04:34

Conocerás nuevos eventos de ciclo de vida de los componentes en Angular:

  • ngOnChange, para detectar cuando han cambiado los valores de entrada
  • ngOnDestroy, para detectar cuando se destruye el componente
8 - Lifecycle hooks: ngOnChange y ngOnDestroy
04:48

Sugerencias finales.

Si quieres dominar los componentes de Angular (Angular 2 y Angular 4) como un profesional, organizarlos correctamente y de forma escalable y ser capaz de enfrentarte a cualquier reto que te presenten tus componentes, te recomiendo encarecidamente que sigas mi curso: https://www.udemy.com/componentes-angular-pro/

9 - Notas finales
00:33
About the Instructor
Enrique Oriol
4.5 Average rating
196 Reviews
2,071 Students
3 Courses
SW Engineer & entrepreneur

Soy Ingeniero de Software, CTO en una startup de Barcelona que combina su pasión por la manipulación 3D con la consultoría tecnológica en proyectos mobile, incluyendo backend, frontend y aplicaciones híbridas y nativas. Me gustan especialmente el enfoque mobile con tecnologías web como Angular, Ionic y las client-side apps.

A lo largo de mi carrera profesional he desarrollado aplicaciones de Realidad Aumentada, backends de gestión y e-commerce móviles para empresas internacionales, ganando una visión global de las necesidades del mercado real del desarrollo software.

En mi tiempo libre me gusta enseñar programación ya sea a través de mi blog, en meetups de software o mediante cursos educativos.