En la actualidad las páginas web se han transformado en aplicaciones en sí mismas, con más cantidad de componentes que nunca antes, y con más exigencia de parte de sus consumidores y clientes. En este curso aprenderás a utilizar Angular, uno de los frameworks líderes del mercado para desarrollo de aplicaciones de una única página, o conocidas como SPA por la sigla en inglés de 'Single Page Application'. Además, se hará una introducción gradual al lenguaje NodeJS y al desarrollo de interfaces para aplicaciones (API por su sigla en inglés de Application Program Interface), con el objetivo de desarrollar servicios web básicos para darle comportamiento a la aplicación Angular.
Componentes y Controladores
Loading...
Destrezas que aprenderás
Redux, Typescript, programación front-end SPA, testing unitario (TDD), Angularjs
De la lección
Programación Reactiva basada en Componentes
En el módulo 2 trabajaremos con formularios y validaciones, con el fin de hacer aplicaciones interactivas. Además, aprenderemos los principios de programación reactiva, utilizando librerías como rxjs y redux, para lograr aplicaciones que manejen un estado a nivel global para manipular los cambios en la interfaz de usuario.
Impartido por:
Sebastián Matías Alonso
Ingeniero en Sistemas de la Información. UTN-FRBA
[MÚSICA]
[MÚSICA] Hola a todos nuevamente.
Aquí estamos comenzando el módulo dos.
El objetivo de este módulo dos será
conocer diferentes técnicas para hacer comunicar nuestros componentes.
Empezaremos por disparar eventos, ¿sí?
Desencadenar eventos entre componentes hijos hacia componentes
padres para que los componentes padres capturen dichos eventos.
Vamos a hacerlo en el contexto de detectar
cuándo eligen un destino de viaje como preferido, ¿sí?
Actualmente hay un botón que dice Read, leer.
Vamos a cambiarlo por un botón de Ir como seleccionar de preferido.
Entonces, como vamos a poder tener uno solo marcado como preferido entre todos
los destinos que agregamos a nuestra lista de deseos, hay que disparar, desencadenar
un evento hacia nuestro componente padre, que es donde está el listado de destinos,
para que el listado desactive al otro destino que estaba
como preferido antes, si es que estaba como preferido alguno, ¿no?
Entonces, vamos a empezar primero para ser
objetivo con la primer técnica de disparar eventos, emitir eventos entre componentes,
y luego vamos a ir conociendo técnicas un poco más avanzadas.
A medida que vamos a ir avanzando a lo largo de todos los módulos,
vamos a ir aprendiendo algo de
atajos sintácticos o syntax sugar como le dicen de Typescript.
¿Sí?
Vamos a empezar justamente por uno de ellos que consiste en declarar
en el constructor las variables públicas y ahorrarnos el
seteo de dicha variable a la propiedad subyacente y las propiedades subyacentes.
Esta línea de código que tenemos aquí hace exactamente lo mismo que lo que
teníamos antes en el objeto, es exactamente lo mismo.
Como podrán haber notado, yo estoy utilizando Visual Studio Code.
Sumé esta herramienta para recomendárselas.
Realmente genera instantáneamente un incremento en la
productividad por todo el tema de intelligence y de las recomendaciones que
nos va generando el ie.
Bien.
Dijimos que vamos a marcarlo como elegido.
Entonces, vamos a tener una bandera, una variable
bandera selected boolean, ¿sí?
Que será privada,
y vamos a tener dos métodos isselected.
[AUDIO_EN_BLANCO]
[AUDIO_EN_BLANCO] Primero,
vamos a tener un método para identificar si está seleccionado o no y luego vamos
a tener otro set selected para marcarlo como seleccionado, ¿sí?
Para encapsular el acceso a dicha variable.
Bien.
Acabo de realizar un reemplazo de los tabs por los espacios,
que yo activé para varios lenguajes y cada lenguaje tiene sus particularidades.
Este id lo que nos está haciendo cuando nos
sugiere que pongamos el tipo de dato separado del dos puntos,
que pongamos un enter luego de la llave que cierra la clase.
O sea, que la última línea sea una línea vacía en todos los archivos de Typescript,
todo eso se llama linters.
Linter es un lint, lint.
¿Sí?
Son sugerencias de buenas prácticas para los lenguajes,
para cada lenguaje de programación.
Cada lenguaje de programación tiene las buenas prácticas que su comunidad define.
Bien. Entonces, vamos a seleccionar.
Acá you tenemos un destino de viaje.
Nuestro modelo de dominio, el model, listo para poder hacerlo acá como seleccionado.
Entonces, ahora lo que vamos a tener que hacer es ir al destino viaje component,
que es la clase que wrapea a nuestro objeto de negocio.
¿Sí?
La que wrapea de wraper, wrap de inglés, es que encapsula.
¿Sí? Bien.
Entonces, nosotros lo que vamos a querer hacer es
en este componente que nos lo elijan, ¿sí?
Entonces, vamos a tocar el botón de Read,
vamos a ponerle que sea un botón Ir, ¿sí?
Y vamos a agregarle, como you vimos, algunos eventos.
Clic. Vamos a hacer que vaya al método Ir, ¿sí?
Y entonces,
luego vamos a agregar que un indicativo, ¿sí?
Un indicativo de si está seleccionado o no, ¿sí?
Entonces, vamos a elegir, a mostrar que está puesto como preferido.
Dentro de un span, pero esto solo lo vamos a mostrar,
solo lo vamos a mostrar si está elegido como preferido el destino.
Para eso, vamos a ir aprendiendo diferentes trucos.
Ahora vamos a aprender cómo manipular directamente desde
aquí, desde la vista cómo manejar la clase display, CSS, ¿sí?
El display CSS puede tener distintos valores.
Nosotros lo vamos a poner en un display vacío si
es que está marcado como preferido, eso va a hacer que se muestre.
Y vamos a poner un display none si no está seleccionado como preferido.
Entonces, aquí el código que tenemos que escribir es Typescript, ¿sí?
Destino.isselected.
Si esto es verdadero, entonces no le asignamos nada a display.
Y si es falso, le asignamos el valor none, ¿sí?
Bien. De esta manera,
you tenemos que crear en nuestra vista.
Este destino isselected you está creado, es lo que vemos en el modelo de dominio,
pero tenemos que crear esto en nuestra vista, en nuestro componente.
Entonces, vamos a ir al código del controlador,
del componente y vamos a hacer un método que se llame Ir, ¿sí?
Entonces, hacemos Ir es un método que lo que va a hacer es, como you sabemos, para
que no nos genere ningún tipo de efecto en el html, le ponemos return false, ¿sí?
Nunca olvidarnos de eso.
Y luego le ponemos la acción de desencadenamiento del evento.
Para esto, imagínense que esto es como un clic, ¿sí?
Vamos a ponerle clicked.emit, ¿sí?
Acá estamos escribiendo cómo lo querríamos usar.
this.clicked.emit lo que estamos diciendo es, bueno,
tenemos que tener algún atributo en nuestro objeto
que nos permite disparar eventos, que vamos a llamar clicked.
Y queremos emitir un evento, ¿sí?
Y en ese evento lo que queremos emitir es darle a conocer a nuestro componente padre
qué destino fue el clickeado, que es el destino que you tenemos aquí.
Entonces, esto es como intuitivamente uno querría usarlo, ¿no?
Cuando me sucede la acción Ir, que es porque me tocaron el botón en la vista,
¿sí?
Este botón que dice Ir,
se dispara esta función y yo emito un evento a mi componente padre.
Bien. ¿Cómo tenemos que declarar esta propiedad
para que esto funcione?
Vamos a declarar la propiedad clicked que va a ser de tipo event emitter, ¿sí?
Como ven, aquí you me lo sugiere, ¿sí?
Hay varias sugerencias.
Entonces, la que tenemos que elegir es Angular core, ¿sí?
Event emitter de Angular core es el que vamos a usar.
Esto es un generic.
Opcionalmente es de un generic,
pero conviene ponerle para que nuestro código esté más tipado.
you que estemos usando Typescript conviene ponerle el tipo en el generic, ¿sí?
Bien.
Pero esto solo no funcionaría.
Tenemos que darle una directiva a través de una notation
como hacemos con los input también que son los tipos de datos,
las variables, atributos de nuestro objeto que nosotros exponemos a nuestro
componente padre para que el componente padre nos dé valores de entrada.
En este caso, estamos haciendo un valor de salida, ¿sí?
Entonces, para eso le tenemos que poner output.
Output, muy bien.
Output también lo tenemos que importar, ¿sí?
Angular core,
como nos sugiere bien aquí el intelligence de Visual Studio Code, ¿sí?
Que es 100% open source gratuito.
Bien.
Entonces, aquí estamos vamos declarando la variable pero no la estamos inicializando,
entonces la vamos a inicializar en el constructor this.clicker
igual new event emitter.
perfecto.
De esta manera you declaramos, you le cargamos un objeto a esta propiedad, sí.
Y esta propiedad you está lista para ser usada, no tenemos que agregar nada más.
Entonces ahora para usarla y terminar de cerrar este ciclo,
lo que tenemos que hacer es ir al listado sí.
En el listado, en el html nosotros
lo que tenemos es la invocación al componente hijo con un ngfor.
Vamos a escribir esto un poco más
entendible porque sino se nos va a hacer muy ancho.
Bien.
Vamos a agregar una propiedad más,
por eso les dimos enter para que no se nos vaya en ancho.
Al igual que tenemos los clic de los botones como aquí
que este lo estamos haciendo sobre un button que es algo que you Angular
you soporta de fábrica digamos porque son los controles html básicos,
aquí vamos a agregar el nuestro que acabamos de generar,
clicked es el que generamos aquí, sí.
Este output.
Lo invocamos de igual manera que sobre los objetos,
sobre los eventos de tipo output de lo que you viene de fábrica de html y Angular.
Entonces bueno, ¿qué hacemos cuando nos tocan clicked?
Cuando nos tocan clicked vamos a invocar a una función elegido.
¿Elegido qué, qué dato?
Bien, elegido este destino porque sabemos que este destino es el que
se le pasó a destino viaje, así que yo podría poner así,
que es exactamente lo mismo que poner lo siguiente, event.
Cuando nosotros emitimos el destino,
estamos diciendo que nuestro emitidor de eventos es de destino viajes.
Entonces cuando lo emitimos le tenemos que pasar un destino viajes, sí.
Entonces, estamos pasando el this.destino.
Entonces esto es equivalente a usar de.
Porque este destino es el que va a estarlo de acá,
cuando se emite el evento me pasan este destino, es el mismo, sí, Pero bueno,
para otros casos que quizás el objeto que nos emite el evento
no es justamente el mismo que tenemos aquí sino que es algo distinto,
Para eso nos sirve este shorthand, este atajo event.
Esto significa pasemos como argumento exactamente el mismo objeto que
está llegándole a través del event emitter.
Entonces ahora tenemos que ir al código detrás y tenemos que
crear elegido,
elegido, muy bien.
Aquí tenemos un destino, de del tipo destino viajes.
Bien.
Y aquí lo que vamos a hacer es marcarlo como
seleccionado y vamos a desmarcar como seleccionados a todos los demás.
Entonces vamos a hacer un this destinos.foreach
y por cada destino lo que vamos a hacer es
x.setselected,
y aquí vamos a pasarle false.
No le definimos un argumento, nos está diciendo así que le tenemos que recibir
is, vamos a ponerle s:boolean,
así lo hacemos parametrizable.
Y luego por último vamos a marcar como elegido al que nos eligieron.
Setselected true.
De esta manera disparamos el evento en el destino viaje component
de elegido, lo capturamos aquí en el html y
cuando capturamos ese evento llamamos a la función elegido y en esa función elegido
desmarcamos como elegidos a todos los demás y marcamos como elegido al nuestro.
Entonces vamos
a servir la aplicación, y a probarla.
[AUDIO_EN_BLANCO]
[AUDIO_EN_BLANCO] Bien.
Vamos a ver Barcelona.
Muy bien.
Ir marcado como preferido.
Barcelona 2.
Guardar.
Me lo agrega ir, me lo marca como preferido, ¿ven?
Bien, de esta manera terminamos este primer
video tutorial de la primera lección del módulo 2.
Nos vemos en el siguiente video de esta primera lección.
> [MÚSICA]
[MÚSICA]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2019 Coursera Inc. Todos los derechos reservados.
