Angular

Jorge Hugo Ospina Rendón

 Que es Angular?

•Angular es un framework que facilita el desarrollo de

aplicaciones web SPA.
•SPA: es una web de una sola página, en la cual la navegación
entre secciones y páginas de la aplicación, así como la carga de
datos, se realiza de manera dinámica, casi instantánea,
asincronamente haciendo llamadas al servidor (backend con un
API REST) y sobre todo sin refrescar la página en ningún
momento.

•Permite separar el Front-end del Back-End

•https://angular.io/
Evolución de angular
 Orígenes: Angular JS 1.x

● Extiende directamente las funcionalidades HTML

● Utiliza como patrón arquitectonico MVC o similares
● Esta especialmente orientado a la creación de aplicaciones SPA
● Promueve el uso de patrones de diseño de software
● permite crear pruebas unitarias con Jazmine y Karma
● Al estar exclusivamente orientado a la lógica es un framework muy liviano:
no incluye elementos gráficos ni CSS
● Se complementa muy bien con Bootstrap, Material design, Semantic UI
 Evolución: Angular 2, 4, … 7.x

● Amplia el modelo de extender las funcionalidades HTML empleando componentes

○ Arboles de componentes
○ Interconexiones entre ellos
○ Cada uno con su propia interface I/O
○ Inyección de dependencias renovado
● Se modifico la forma de emplear el patrón MVC
● Sigue estando orientado a la creación de aplicaciones SPA
 SPA: Single page application

● Carga completa en una sola página

● Asincronicidad
● Poca dependencia del servidor
● Aproximación a las aplicaciones de escritorio
 Caracteristicas

● Inyección de dependencias
● Servicios
● Cliente http (APIs REST)
● Navegación por la aplicación (Router)
● Internacionalización
● RxJS
● Soporte para test unitarios
● Librerías de componentes
● Renderizado en el servidor (Angular universal)
 Angular vs JQuery
Angular JQuery
Framework Librería

Última versión 7.0 (Octubre 18 de 2018) 3.4.0 (Abril 10 de 2019)

Curva de aprendizaje Difícil de entender Fácil de aprender y entender

Binding Es bidireccional Es unidireccional

Componentes Son los bloques de construcción JQuery UI

para el UI en la aplicaciones

Características ● Directivas son una extensión ● Compatibilidad entre

de HTML navegadores
● Inyección de dependencias ● Manipulación de CSS
● Binding bidireccional ● Manejo de eventos
● Soporte MVC ● Manipulación HTML/DOM
● Validación de forms ● Ligero
● Uso de API RESTFul ● Ajax/JSONP

Guias de estilo https://angular.io/guide/styleguide http://contribute.jquery.org/style-guide/

Porque angular
Visión general arquitectura Angular
 Instalaciones

•NodeJS: https://nodejs.org/es/
•TypeScript: http://www.typescriptlang.org/
•Angular CLI https://cli.angular.io/
https://github.com/angular/angular-cli

•Ionic http://ionicframework.com/getting-started/
•Atom https://atom.io/
•Visual Studio Code https://code.visualstudio.com/
 Plugins ATOM

•ATOM
• Angular 2 Type Script Snippets
• Atom Bootstrap3
• Atom Typescript
• File Icons
• Platformio Ide Terminal
• V Bootstrap4
 Plugin VSC

•Visual Studio Code

• Angular 2 TypeScript Emmet
• Angular 5 Snippets – TypeScript, Html, Angular Material...
• Angular Language Service
• Angular v5 Snippets
• Angular2-inline
• Bootstrap 4 & Font Awesome snippets
• TSLint
• TypeScript Hero
• TypeScript Importer
 Crear su primera aplicaciòn

•Crear una carpeta

•Navegar hacia la carpeta
•ng new taller-angular
•Moverse dentro de la carpeta creada
•ng serve –o
•Crear carpeta components
ng generate c components/navbar
 Estructura básica

● E2e: Para correr pruebas unitarias

● node_modules: Paquetes que se instalan de forma automática y solo
para desarrollo.
● src: Donde esta la aplicación angular
● Angular.json: Le dice a angular como funciona nuestra aplicación
● Package.json: se crea de forma automática y le dice a angular que
dependencias necesita
● Readme.nd: Explica como funciona la aplicación
● Tsconfig.json: Le dice a typescript como trabajar. Estandar de
javascript.
● Tslint.json: Forzar a escribir un código estándar y limpio.
 Módulos

● Los módulos son contenedores para almacenar

los componentes y servicios de una aplicación.
Anatomía de un módulo
 Componentes

● Los componentes son los bloques básicos de construcción de las páginas

web en Angular. Contienen una parte visual en html (la Vista) y una funcional
en Typescript (el Controlador).
 Typescript

•TypeScript es un lenguaje de programación de

distribución y código abierto desarrollado por Microsoft. Su
propio fabricante lo define como un superset
(superconjunto) de JavaScript que, en esencia, mejora
JavaScript añadiendo funciones de tipado y de
programación orientada a objetos.

•Angular ‘transpila’ el código TypeScript directamente a

JavaScript para que pueda ser interpretado en los clientes
web.
Anatomía de un componente
Templates y vistas
Definiendo un template en un
Component
Usando un componente como
una directiva
NgModules y componentes
Estructura jerárquica
 Utilizar Bootstrap 4

•npm install Bootstrap --save

•npm install jquery --save
•npm install Popper.js --save
•Modificar el angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Ejercicio
Data binding
 Data binding
● Interpolación: One way hacia el DOM
 Data binding

● Property binding: Interceptando input del componente

padre en el hijo
Comunicación entre componentes
 Data binding

● Property binding: pasando varios valores

 Paso a paso ejercicio

1. Cree un proyecto nuevo (ng new ...)

2. Cree un componente (user-item)
a. Cree una variable (name) e inicialice en el constructor
b. Realice una interpolación y muestre el valor
c. Adicione el componente a app.component.html para que se muestre
3. Cree un componente (user-list)
a. cree un array de names (names: string[]) e inicialice en el constructor
b. cree un *ngFor y muestre los valores del array en el template (*ngFor=
let name of names)
c. Adicione el componente a app.component.html
4. Elimine la directiva user-item de app.component.html y coloquela dentro
del ngFor de user-list
5. En user-item adicione el @Input a la variable name y elimine su inicialización
6. En user-list realice la comunicación entre los componentes ([name]=name)
Data binding
 Data binding
● Event binding: One way del template (DOM) al
componente
Ejercicio
 Typescript

Angular esta construido en Typescript

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft, el cual cuenta con
herramientas de programación orientada a objetos.

Es llamado también Superset de Javascript

Agrega tipos y decoradores

 Tipos de datos básicos

● boolean

let isAwesome: boolean = true;

● string

let punchline: string = 'Because it was free-range.';

let joke: string = `
Q: Why did the chicken cross the road?
A: ${punchline}
`;
● number

let decimalNumber: number = 42;

let binaryNumber: number = 0b101010; // => 42
let octalNumber: number = 0o52; // => 42
let hexadecimalNumber: number = 0x2a; // => 42
 Tipos de datos básicos

● array

let myPetFamily: string[] = ['rocket', 'fluffly', 'harry'];

let myPetFamily: Array<string> = ['rocket', 'fluffly', 'harry'];

● tuple

let myFavoriteTuple: [string, number, boolean];

myFavoriteTuple = ['chair', 20, true]; // ✅
myFavoriteTuple = [5, 20, true]; // ❌ - The first element should be a string

● enum

enum Sizes {
Small,
Medium,
Large,
}
Sizes.Small; // => 0
Sizes.Medium; // => 1
 Tipos de datos básicos

● any

let whoKnows: any = 4; // assigned a number

whoKnows = 'a beautiful string'; // can be reassigned to a string

● null y undefined

let anUndefinedVariable: undefined = undefined;

let aNullVariable: null = null;
 Inferencia de tipos

Inferencia de tipos es lo que utiliza el compilador de TypeScript para determinar los tipos automáticamente.

TypeScript puede inferir tipos durante la inicialización de variables, cuando se establecen los valores predeterminados
de los parámetros y al determinar los valores de retorno de la función.

let x = 10; // x is given the number type

// Default function parameters

const tweetLength = (message = 'A default tweet') => {
return message.length;
};

// function return
function add(a: number, b: number) {
return a + b;
}
const result = add(2, 4);
result.toFixed(2); // ✅
result.length; // ❌ - length is not a property of number types
 Inferencia de tipos

Cuando un tipo se está infiriendo de varios tipos posibles, TypeScript utiliza un algoritmo de Mejor
tipo común para elegir un tipo que funcione con todos los demás candidatos.

let list = [10, 22, 4, null, 5];

list.push(6); // ✅
list.push(null); // ✅
list.push('nope'); // ❌
 Interfaces

Es una manera de crear estructuras de tipos multiples

interface Animal {
kind: string;
weight: number;
}
let dog: Animal;
dog = {
kind: 'mammal',
weight: 10,
}; // ✅
dog = {
kind: true,
weight: 10,
}; // ❌ - kind should be a string
 Alias Type

type Animal = {
kind: string;
weight: number;
};
let dog: Animal;
dog = {
kind: 'mammal',
weight: 10,
}; // ✅
dog = {
kind: true,
weight: 10,
}; // ❌ - kind should be a string
 Generics

Hay situaciones en las que el tipo específico de una variable no importa, pero se debe imponer una
relación entre los diferentes tipos de variables.

const fillArray = <T>(len: number, elem: T) => {

return new Array<T>(len).fill(elem);
};
const newArray = fillArray<string>(3, 'hi'); // => ['hi', 'hi',
'hi']
newArray.push('bye'); // ✅
newArray.push(true); // ❌ - only strings can be added to the array
 Paso a paso ejercicio

1. Cree un proyecto nuevo (ng new ...)

2. en el template de app.component.html adicione dos campos (nombre y link)
de texto y un botón (adicionar)
a. En el componente adicione una funcion addArticulo
b. En el boton adicione el evento click
c. Adicione al metodo dos parametros (nombre : HTMLInputElement , link
: HTMLInputElement)
d. A los campos de texto adicione un #(hash) para crear una variable en el
template y asi poder pasarla como parametro (< input name = "nombre"
# newname >)
e. Envie los parametros en el evento click del boton
 Paso a paso ejercicio

3. Cree un componente llamado articulo

4. Cree las variables ( votos, nombre y link)

5. Inicialicelas en el constructor con valores por defecto
6. Cree una funcion votoUp que incremente la variable voto en 1 y una votoDown que la decremente
7. Adicione el template de articulo en el template app,component
8. Cree una clase articulo con los atributos nombre, link y votos (opcional), y los metodos votoUp y
votoDown
9. En el componente articulo cree una variable de tipo articulo que reemplace las variables antes creadas
10. Ajuste el template de articulo
 Paso a paso ejercicio

11. Cree un array de articulos en appComponent (articles : Article [];) e inicialicelo en el constructor

12. Renderice el array con *ngFor en el template

13. Adicione @Input en el componente de Articulo para la variable articulo, de tal manera que permita la
comunicación entre los componentes
14. Comunique el templete de appComponent con el de articulos
15. Implementar el metodo que adiciona nuevos articulos
 Paso a paso ejercicio

16. Crear una función en appComponent para ordenar artículos por el número de votos

17. Ejecutar
 Data binding
● Two-way binding: <input [(ngModel)]=“lastName">
 Visibilidad entre componentes

● Componentes públicos y privados

Importación y exportación
entre módulos
 Directivas

● Sonelementos personalizados escritos en HTML usados para extenderlo.

Podemos crearnos las nuestras, o usar las de angular.

○ Propias (Custom)
○ Construidas en Angular
■Estructurales
■Atributo
 Directivas propias

● Un Componente es una Directiva con template.

 Directivas estructurales

● Estas directivas, que se diferencian fácilmente al ser precedidas por un

asterisco, alteran el layout añadiendo, eliminando o reemplazando elementos
en el DOM.
○ *ngIf
○ *ngFor
Directivas estructurales (*ngIf)
Directivas estructurales (*ngFor)
 Directivas de atributo

● Las directivas atributo alteran la apariencia o el

comportamiento de un elemento existente en el DOM y
su apariencia es igual a la de atributos HTML.
○ ngClass
○ ngStyle
○ ngModel
 Directivas de atributo (ngClass)

● Permite establecer las clases de los CSS dinámicamente

para un elemento del DOM
 Directivas de atributo (ngStyle)

● Permite establecer estilos dinámicamente a un elemento

del DOM
 Directivas de atributo (ngModel)

● Implementa un mecanismo de binding bi-direccional. El

ejemplo típico es con el elemento HTML <input>, donde
asigna la propiedad value a mostrar y además responde a
eventos de modificación.

<input [(ngModel)]="todo.subject" >

 Pipes

● En español tuberías, son formas de transformar los datos

antes de mostrarlos, ya hay algunos incorporados por
ejemplo para formatear fechas y monedas.
Rutas
Creamos la configuración de las rutas

Podemos capturar una page no found (404)

Importamos las rutas en el modulo (app.module.ts)

Definimos donde se va a renderizar la ruta seleccionada

Creamos los links

 Servicios
● Los servicios son una de las características fundamentales de la
arquitectura Angular, ya que permiten centralizar el uso de código
común a muchos componentes, e incorporarlo a estos mediante la
inyección de dependencias.
● los servicios son clases TypeScript. Su propósito es contener
lógica de negocio, clases para acceso a datos o utilidades de
infraestructura.
● Se crean mediante el comando ng generate service
services/prueba
 Servicios

•Luego se importa y se matricula en providers de app.module.ts

•Y por ultimo para ser utilizado en un componente se debe
importar el service y se debe inyectar en el constructor
import { ProveedoresService } from
'../servicios/proveedores.service’;
…
constructor( private proveedoresService: ProveedoresService)
{}
…
this.mensaje = this.proveedoresService.getProveedores( );
 Conexión con el servidor

•Angular utiliza los métodos http para realizar conexiones con

servidores.

•Se debe importar: import { HttpClient } from '@angular/common/http';

•Petición post:
let url = “127.0.0.1:8080/rest/usuario/";
let headers = new Headers({'Content-Type': 'application/json’});
return this.http.post(url, usuario, {headers});

•Petición get
let url = “127.0.0.1:8080/rest/usuario/"+documento;
return this.http.get(url);
 Leer respuesta de servidor
this.usuarioService.getUsuario(this.usuario.documento).subscribe(

data => {
this.data = data;
console.log (this.data);
},
error => {
console.log(error);
alert("e2" + error);

}
);
Ciclo de vida de un componente
Ejercicio propuesto
 Reglas básicas
1. Cada aplicación debe iniciar al menos un componente, el componente raíz
de la aplicación.

2. El array de inicio sólo debería ser usado en el módulo raíz de la aplicación,

por defecto llamado AppModule.

3. Cada componente, directiva o pipe que creamos debe pertencer a uno y

sólo un módulo angular.

4. Sólo declara componentes, directiva y pipes. Las clases, servicios u otros

módulos NO SE declaran.

5. Nunca redeclares componentes, directivas o pipes que pertenezcan a otro

módulo.

6. Todos los componentes declarados, directivas y pipes son privadas por

defecto. Quiere decir que sólo son accesibles para otros componentes,
directivas y pipes declaradas en el mismo módulo.
 Reglas básicas

● Hay que exportar cualquier componente, directiva o pipe siempre

que otro componente lo necesite.

● Un módulo puede reexportar, es decir, hacer disponibles a otros algo

que él mismo ha tenido que importar de forma previa. Esto es útil
para encapsular en un mismo sitio todo lo común en nuestra
aplicación, como el módulo de formularios, el router.

● Un módulo angular puede reexportar algo, sin haberlo importado. El

sentido que tiene, es que sólo hay que importar elementos si estos
van a ser usados por los componentes declarados en el mismo
módulo.

● Nunca exportes un servicio.

 Reglas básicas

● Importar un módulo hace que cualquier componente, directiva y pipe del

importado estén disponibles en el importador.

● Importa sólo lo que necesite este módulo.

● Importar un módulo no da acceso a sus módulos importados.

● Cualquier proveedor de servicios añadido al array de providers es registrado

en la raíz de la aplicación.

● No añadas servicios al array providers de un módulo compartido.

● Los guardas de enrutamiento, es decir, los servicios que validan la

navegación, deben ser añadidos al array providers de un módulo angular.
 Funciones de flecha (=>)

● Sintaxis

● Las funciones flecha siempre son anónimas.

● La sintaxis es mucho más limpia y simple
 Ejemplos función de flecha

var alCuadrado = a => a*a;

Console.log (alCuadrado(3));

-----------------------------------------------------------------------------

var add = ( x, y ) => x + y;

console.info( add( 2, 4 ) ); // 6

----------------------------------------------------------------------------

var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'];
console.log(materials.map(material => material.length));
 Funciones de flecha (=>)

● Función tradicional

● Función de flecha
 Funciones de flecha (=>)

● Si solo tenemos un parámetro, podemos obviar el paréntesis:

● Si tenemos mas de un parámetro, si debemos incluir el paréntesis:

● Si no necesitamos parámetros, tenemos que incluir el paréntesis

vacío:
 Funciones de flecha (=>)

● si lo que queremos es devolver un objeto, pero no

queremos usar la palabra clave return, deberemos de
usar paréntesis para contener el objeto devuelto.

var calculos = (a,b) => ( {suma:a+b, resta:a-b, mult:a*b} )

console.log(JSON.stringify(calculos(3,2)));
 Arquitectura de datos con
observables
● En Angular, podemos estructurar nuestra
aplicación para usar observables como la
columna vertebral de nuestra arquitectura de
datos, a esto se le conoce como Programacion
Reactiva.

● La Programacion reactiva es una manera de

trabajar con streams(flujos) de datos asincronos.
Los observables son la estructura de datos
principal que utilizaremos.
 Que son streams

● En general se utiliza el término ”stream” para

describir los flujos de datos donde una vez que
se envía un dato éste no se va a volver a enviar
nunca.
● Un stream es un tipo de colección, al igual que
un array o un string, en este caso, de eventos o
elementos futuros. La diferencia radica en que
los stream no están disponibles de forma
síncrona y que, además, desconocemos su
tamaño.
 Streams

Un stream puede provenir de múltiples fuentes,

como por ejemplo:
● Eventos del DOM - (eventos del ratón,
eventos del teclado, eventos de formularios,
etc.)
● Animaciones
● Peticiones HTTP
● WebSockets
● Lectura o escritura de ficheros.
● Llamadas a base de datos
 Streams

● //Una letra es un stream

const letterStream$ = Rx.Observable.of(‘A’);
● // Un rango de números es un stream
const rangeStream$ = Rx.Observable.range(1,8);
● // Los valores de un Array son un stream
const arrayStream$ = Rx.Observable.from([1,2,3,4]);
● // Valores emitidos cada 100 ms son un stream
const intervalStream$ = Rx.Observable.interval(100);
● // Cualquier tipo de evento del ratón es un stream
const clicksStream$ = Rx.Observable.fromEvent(document, 'click');
● // La respuesta a un servicio basada en una promesa es un stream
const promiseStream$ =
Rx.Observable.fromPromise(fetch(’/products'));
 Stream

● Puede emitir tres cosas diferentes:

○ Un Valor
○ Un error
○ Una señal de completado
 Ejemplo

clickStream: ---c----c--c----c------c-->
vvvvv map(c becomes 1) vvvv
---1----1--1----1------1-->
vvvvvvvvv scan(+) vvvvvvvvv counterStream: ---1----2--3----4------5-->
 Ejercicio

● Digamos que queremos un nuevo stream al considerar los clics triples como los clics dobles o, en general,
los clics múltiples (dos o más).
Mantra Rx
 Patrón Observer

● La filosofía del patrón observer es sencilla: un objeto,

denominado sujeto (subject), posee un estado. Si dicho
estado cambia, es capaz de “notificar” a sus suscriptores
(observers) de este cambio.
 Patrón Observer en Angular

● Subject: es el objeto que utilizaremos para emitir nuevos valores o cambios a los suscriptores
● Observable: es el objeto que gestiona la lista de suscriptores y que notifica a éstos los cambios.
● Suscriptions: las suscripciones representan a los observadores que están a la escucha de cambios sobre
el subject.
 Tipos de subjects en Angular

● Subject: Es el subject basico

Ejemplo subject
 Tipos de subjects en Angular

● BehaviourSubject: en el momento en que nos

suscribimos al observable, recibiremos el valor del último
evento emitido por elsubject. Asimismo, a la hora de
inicializar el BehaviourSubject necesitaremos indicar un
valor inicial, que recibirán las suscripciones que se creen
para este subject si no e ha emitido hasta ese momento
algún otro valor.
Ejemplo BehaviourSubject
 Tipos de subjects en Angular

● ReplaySubject: las suscripciones recibirán todos los

valores emitidos por el Subject desde su creación.
Aquellos eventos que se emitieron antes de la
suscripción, los recibirá la suscripción en el momento de
crearse. Los eventos posteriores los recibirá conforme se
vayan emitiendo..
Ejemplo ReplaySubject
 Patron iterator

● El objetivo de este patrón es proporcionarnos una manera de acceder a los elementos de un objeto
agregado, de forma secuencial, sin exponer sus detalles.
 Programación reactiva

● La programación Reactiva es programación orientada al manejo de streams de datos asíncronos y la

propagación del cambio.
● Además de eso, te dan una increíble caja de herramientas con funciones para crear, combinar y filtrar
cualquiera de esos streams.
Programacion Programacion
imperativa
reactiva
Manifiesto Reactivo
Mantra RxJS
 Porque considerar la
Programación Reactiva?
● La Programación reactiva eleva el nivel de
abstracción de su código para que pueda
concentrarse en la interdependencia de los
eventos que definen la lógica empresarial, en lugar
de tener que lidiar constantemente con una gran
cantidad de detalles de implementación. El código
en RP probablemente será más conciso

● Las aplicaciones de hoy en día tienen una gran

cantidad de eventos en tiempo real de todo tipo
que permiten una experiencia altamente
interactiva para el usuario.
 Conceptos básicos de Rx

● Observable: Es una entidad que emite(o

publica) multiples valores de datos(stream de
datos) sobre el tiempo y asincronamente.
● Rx se basa en el patron observer, el cual define
un productor de información, nuestro stream y
que en RxJS está representado por una
secuencia Observable y un consumidor de la
misma, que sería el Observer. 

 
 Conceptos básicos de Rx

● Subscription representa la ejecución de un observable.

● Observer(listener) es un objeto que sabe reaccionar a los
valores entregados por el observable. Para ello
implementa la interfaz de observador. Dicha interfaz
contiene los métodos next(), error()y complete().  
 Conceptos básicos de Rx

● Un observable sabe como hacer 3 cosas:

○ Emitir el siguiente (next) elemento al observer
○ Lanzar un error sobre el observer
○ Informar al observer que el stream termino

● Un observer proporciona 3 callbacks:

○ La funcion para manejar el proximo elemento
emitido por el observable
○ La funcion para manejar los errores lanzados por el
observable
○ La funcion para manejar el fin del stream
 Next()

Complete()

Error()
 Observables hot y cold

● Hot: Comienza a emitir eventos incluso antes de que cualquier observer se suscriba.

● Cold: Comienzan a emitir valores cuando al menos un observer se suscribe.

 Operadores

● Los operadores te permiten transformar, combinar, manipular, y trabajar con las secuencias de items
emitidos por los observables.
● Permiten componer secuencias asincronas juntas de manare declarativa con todos los beneficios de
eficiencia de los callbacks pero sin los inconvenientes de anidacion de los mismos.
 Creation operators
● create: Crea un observable a partir de una función recibida y esta define cómo el observable va a emitir los
valores
 Creation operators

● From: Convierte otros objetos y tipos de datos en observables

Creation operators (From) -
Subject (multicast)
 Creation operators

● fromEvent: Convierte cualquier tipo de evento en un observable.

 Creation operators

● fromPromise: Convierte una promesa a un observable.

 Creation operators

● interval: Crea un observable que emite una secuencia de

enteros espaciados por un intervalo de tiempo.
 Creation operators

● range: Crea un observable que emite una secuencia de

números dentro de un rango especifico.
 Creation operators

● of: Crea un observable que emite algunos valores que

especifica como argumentos, uno tras otro y luego emite
una notificación de completado.
 Creation operators

● timer: Crea un observable que empieza a emitir después

de un retardo inicial y emite números cada vez mayores
después de cada período de tiempo posterior.
 Transformation operators

● map: Aplica una función dada a cada valor emitido por un

observable y emite los valores resultantes como otro
observable.
 Transformation operators

● mapTo: Emite un valor constante en la salida del

Observable cada vez que el Observable emite un valor
 Transformation operators

● flatMap / mergeMap: Transforma los elementos emitidos

por un observable en observables, luego aplana las
emisiones de estos en un solo observable
 Transformation operators

● concatMap: Devuelve un observable que emite

elementos en función de la aplicación de una función que
usted suministra a cada elemento emitido por el
observable de origen, donde esa función devuelve un
observable (denominado "interno"). Cada nuevo
Observable interno se concatena con el Observable
interno anterior.
 Transformation operators

● concatMap
 Transformation operators

● groupBy: Agrupa los elementos emitidos por un

Observable según un criterio específico y emite estos
elementos agrupados como GroupedObservables
 Transformation operators

● groupBy
 Transformation operators

● buffer: Recopila valores del pasado como una matriz y la

emite solo cuando otro observable emite.
 Transformation operators

● buffer
 Transformation operators

● scan: Recopila valores del pasado como una matriz y la

emite solo cuando otro observable emite.
 Transformation operators

● reduce: Aplica una funci{on de acumulador sobre un

observable, y retorna el resultado acumulado cuando se
completa la fuente.
 Transformation operators

● window: Subdivide periódicamente los elementos de un

Observable en ventanas Observables y emite estas
ventanas en lugar de emitir los elementos uno a la vez.
 Transformation operators

● window
 Filtering operators

● filter: Emite solamente esos items de un observable que

cumplen una condición especifica.
 Filtering operators

● debounce: Solamente emite un elemento de un

observable si un tiempo determinado ha pasado sin que
emita otro elemento .
 Filtering operators

● debounce
 Filtering operators

● distinct: Elimina los elementos duplicados emitidos por

un observable.
 Filtering operators

● distinctUntilChange: Emite solamente los valores que son

diferentes al anterior.
 Filtering operators

● distinctUntilChange
 Filtering operators

● first: emite solo el primer elemento (o el primer elemento

que cumpla con alguna condición) emitido por un
observable.
 Filtering operators

● last: emite solo el último elemento (o el último elemento

que cumpla con alguna condición) emitido por un
observable.
 Filtering operators

● ignoreElements: Ignora todos los elementos emitidos por

la fuente Observable y solo pasa llamadas de completo o
error.
 Filtering operators

● sample: Emite el ultimo valor emitido desde el observable

cada que otro observable, el notificador, emite.
 Filtering operators

● skip: Emite un observable que omite los primeros “n”

elementos emitidos por un observable.
 Filtering operators

● take: Emite solo los primeros valores de conteo emitidos

por un Observable..
 Combining operators

● take: Emite solo los primeros valores de conteo emitidos

por un Observable..
 En resumen
● Observable: Data stream que pone (push) los datos a
través del tiempo.
● Observer: Consumidor de un observable stream
● Suscriber: Conecta observer con observable
● Operador: Una función para la transformación de los
datos
 Implementar una caja de
sugerencias “A quien seguir”
● En el inicio, cargue los
datos de las cuentas
desde la API y muestre 3
sugerencias
● Al hacer clic en
"Actualizar", cargue otras
3 sugerencias de cuenta
en las 3 filas
● Al hacer clic en el botón
'x' en la fila de una cuenta,
borre solo esa cuenta
actual y muestre otra
● Cada fila muestra el avatar
de la cuenta y los enlaces
a su página.
 Como abordar este problema
con RX?
● Mantra Rx: Todo puede ser un stream
● Comencemos con la característica más sencilla: "en el inicio,
cargue 3 datos de cuentas desde la API".
○ (1) hacer una solicitud,
○ (2) obtener una respuesta,
○ (3) representar la respuesta.

● En el inicio solo tenemos que hacer una solicitud, por lo que si

lo modelamos como un stream de datos, será un flujo con un
solo valor emitido.

--a------|->

Donde a es el string 'https://api.github.com/users'

 • Callback Ajax

● Rx
Todo Junto
El boton refresh
● Merge
● DRY
Modelando los 3 sugerencias
con streams